/*
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

	PORTFOLIO
	
-----------------------------------------------------------------------------------------------------------------------------

	DEPENDENCIES:
	MooTools - version 1.20              
	copyright 2007 | Valerio Proietti | http://mootools.net/
	MIT-style license | http://www.opensource.org/licenses/mit-license.php
	
	Clientside CNET Libraries for MooTools
	For descriptions and documentation: http://clientside.cnet.com/wiki/cnet-libraries
	
-----------------------------------------------------------------------------------------------------------------------------

	:: squarehead design studio   -  845.331.1953 | www.squarehead.com | sbliss@squarehead.com

	
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
*/

/* 	initialize menu
---------------------------------------------------------------------------------------------------------------------------*/

function initPortfolio(){
	
	
	var myImages = new Asset.images(['img-core/bkgd_video.png', 'img-core/btn_close_window.png', 'img-core/btn_play.png' ]); 
	
	
	/* ==> initiate pop-up window for video */	
	var videoWin = new StickyWin({
		width: 656, 
		height: 479
	});
	videoWin.hide();
	
	/* ==> save default text for page */	
	var defaultbody = $('column').innerHTML;
	
	/* ==> initially hide videos */	
	$$('.videogrid').setStyle('display', 'none');
	$$('.bodytext').setStyle('display', 'none');
	
	/* ==> initialize icon grid icon buttons */	
	items = $$('.icon');
		items.each(function(elem, index){
			elem.addEvent('click', function(event){
				offset = (index + 1) * 312;
				
				$('slider').setStyle('opacity', 0);
				
				$('slider').setStyle('margin-left', '-'+offset+'px');
				
				$('slider').tween('opacity', 1);
				
				$('column').setStyle('opacity', 0);
				$('column').innerHTML = $$('.bodytext')[index].innerHTML;
				$('column').tween('opacity', 1);
		});
	});
	
	/* ==> back to icon grid */	
	$$('.back_btn').addEvent('click', function(event){
	
		/* ==> use this to slide back */	
		//$('slider').set('tween', {
		//	duration: 900,
		//	transition: Fx.Transitions.Quart.easeOut
		//}).tween('margin-left', '0px');	
		
		/* ==> use this to fade back */	
		$('slider').setStyle('opacity', 0);
		$('slider').setStyle('margin-left', '0px');
		$('slider').tween('opacity', 1);
		
		/* ==> reset the home copy */	
		$('column').setStyle('opacity', 0);
		$('column').innerHTML = defaultbody;	
		$('column').tween('opacity', 1);
	});
	
	/* ==> image grids */	
	items = $$('.imagegrid');
	targets = $$('.fullpic');
	
	/* ==> set first thumb as selected */
	items.getElement('.thumb').addClass('selected');
	items.getElement('.thumb').setStyle('opacity', .6 );
	
	items.each(function(elem, index){
			
		thumbs = elem.getChildren('.thumb');
		var target = targets[index];
		pics = $$('.thumb');
			
			thumbs.each(function(e,i){
				
				/* ==> preload image */
				path = pics[i].get('href');				
				new Asset.image('http://squarehead.myvnc.com'+path);
								
				/* ==> add event */				
				e.addEvent('click', function(event){

					// target.set('src', 'js/blank.gif');
					// target.setStyle('opacity', 0);
					target.set('src', this.get('href'));
					// target.tween('opacity', 0, 1);
					
					// set caption
					elem.getElement('.caption').set('html', this.get('alt'));
															
						this.getParent().getElements('.thumb').removeClass('selected');
						this.getParent().getElements('.thumb').setStyle('opacity', 1 );
						
						/* ==> selected thumb */
						e.addClass('selected');
						e.setStyle('opacity', .6 );
						
					return false;
				});
			});
	});
			
	/* ==> video grids */	
	items = $$('.videogrid');
	targets = $$('.fullvideo');
	
	/* ==> set first thumb as selected */
	items.getElement('.videothumb').setStyles({
		opacity: .5,
		cursor: 'default'
	});
	items.getElement('.videothumb').addClass('selected');
	
	
	items.each(function(elem, index){
		var target = targets[index]		 
	    
		videos = elem.getChildren('.playBtn');
		videos.setStyle('opacity', .5)	
		  videos.each(function(e,i) {
	
			
			e.addEvents({
				mouseover: function() { 
					this.tween('opacity', 1)
					},
				mouseout: function() { 
					this.tween('opacity', .5)  
					},
				click: function(){
					
					/* ==> Calls a new flv movie based on the image name, the flash video and video link image must have same name! - Craig's idea, and a good one. */
					var vidName =  target.src.substr(target.src.lastIndexOf('/') + 1);
					vidName = (vidName.substr(0, vidName.indexOf('.'))) + ".flv";

					/* ==> set content for the StickyWin */				
					videoWin.setContent('<div id="video-popup"><a href="javascript:void(0);" class="closeSticky"><img src="img-core/btn_close_window.png" width="28" height="28"></a><div id="video-content"></div></div>'); videoWin.show();

					/* ==> load the flv file with swfobject */	
					swfobject.embedSWF("swf/video_player.swf", "video-content", "600", "423", "9.0.0", "", {srcfile: "../img-case-studies/videos/"+vidName});
					
				}
			});
			
			 		  
		  });
	   			
		thumbs = elem.getChildren('.videothumb');
	
			thumbs.each(function(e,i){
				e.addEvent('click', function(event){
					target.setStyle('opacity', 0);
					target.set('src', this.get('href'));
					target.set('vid', this.get('href'));
					target.tween('opacity', 1);
					
					/* ==> reset thumbs */
					$$('.videothumb').setStyles({
						opacity: 1,
						cursor: 'pointer'
					});
					$$('.videothumb').removeClass('selected');
					
					/* ==> selected thumb - opacity .5, remove pointer cursor */
					e.setStyles({
						opacity: .5,
						cursor: 'default'
					});
					e.addClass('selected');
					
					return false;
				});				    
			});
	});
	
	/* ==> video buttons */	
	$$('.video_btn').each(function(elem, index){
		
		elem.addEvent('click', function(event){

			$$('.imagegrid')[index].setStyle('display', 'none');
			$$('.videogrid')[index].setStyle('display', 'block');
			$$('.videogrid')[index].setStyle('opacity', 0);
			$$('.videogrid')[index].tween('opacity', 1);					
		});
	});
	
	/* ==> image buttons */	
	$$('.img_btn').each(function(elem, index){
		
		elem.addEvent('click', function(event){

			$$('.videogrid')[index].setStyle('display', 'none');
			$$('.imagegrid')[index].setStyle('display', 'block');
			$$('.imagegrid')[index].setStyle('opacity', 0);
			$$('.imagegrid')[index].tween('opacity', 1);				
		});
	});
	
}





function initVideo(){
	
var myImages = new Asset.images(['img-core/bkgd_video.png', 'img-core/btn_close_window.png', 'img-core/btn_play.png' ]); 


/* ==> initiate pop-up window for video */	
var videoWin = new StickyWin({
	width: 656, 
	height: 479
});
videoWin.hide();


targets = $$('.fullvideo');
videos = $$('.playBtn');	
	  
videos.setStyle('opacity', .5)	
	
videos.each(function(e,i) {
	
	var target = targets[i];	
		
		e.addEvents({
			mouseover: function() { 
				this.tween('opacity', 1)
				},
			mouseout: function() { 
				this.tween('opacity', .5)  
				},
			click: function(){
								
				/* ==> Calls a new flv movie based on the image name, the flash video and video link image must have same name! - Craig's idea, and a good one. */
				var vidName =  target.src.substr(target.src.lastIndexOf('/') + 1);
				vidName = (vidName.substr(0, vidName.indexOf('.'))) + ".flv";
				
				/* ==> set content for the StickyWin */				
				videoWin.setContent('<div id="video-popup"><a href="javascript:void(0);" class="closeSticky"><img src="img-core/btn_close_window.png" width="28" height="28"></a><div id="video-content"></div></div>'); videoWin.show();

				/* ==> load the flv file with swfobject */	
				swfobject.embedSWF("swf/video_player.swf", "video-content", "600", "423", "9.0.0", "", {srcfile: "../img-case-studies/videos/"+vidName
			
			});
				
			}
		
		});
	});
}