/*
 * 2. VIDEO THUMBNAIL FUNCTIONS
 * (c) 2011
 *
 * Thumbs consist of 4 layers:
 * [      ] - <div> thumbnailDiv parent stack w/id
 *  [    ]  - <span>thumb text 
 *   [  ]   - <canvas> bw version 
 *    []    - <img> color jpeg 
 *
*/ 
	
  	// global thumb vars
	var videoThumbPath = "videos/thumbnails/";
	var imgW = 236; // 474
	var imgH = 134; // 269
	// NOTE: these sizes are always redefined in build_a_thumbnail() below
	
// ===================
// MOUSE 

	/*
	 *
	 */
	 
	 //$('.debug').show();
	 
	 function thumb_click(e) {	
		var eventVars = get_event_vars(e);
		var dataObject = thumbsArray[eventVars.num];
		trace("> CLICK")
		if (currentPage=="like") { 
			dataObject = thumbsArray[eventVars.num - 1];
			trace("> o:" + e.target.id + " #:" + e.target.num + " #:"+ eventVars.num);
			//trace("> URL:" + dataObject.link);
			launch_url(dataObject);
		} else { 
			dataObject.thumbnail = eventVars.thumbImg;
			if (dataObject.type=="video") { prep_video(dataObject); } // in work_page.js
			else if (dataObject.type=="reel") { click_play_reel(dataObject); }
			else if (dataObject.type=="image" || dataObject.type=="link" || dataObject.type=="website") { click_no_video(dataObject); }
			else { click_no_video(dataObject); } // for links page
			//else trace(dataObject.type);
		}
		 reset_all_thumbs();
	 }
	 /*
	  *
	 */
	
	 function thumb_over(e) {
		 var eventVars = get_event_vars(e); // find all elements on page with this num
		 // bug fix: hide ALL hilites to prevent any getting stuck on
		 reset_all_thumbs();
		 // hilite  chosen one
		 $(eventVars.thumbText).animate({ "left":"0px" }, 150);
		 $(eventVars.thumbTextSub).animate({ "left":"0px" }, 150);
		 //$(eventVars.thumbImg).css({"top":"1px", "left":"1px" });
		 //$(eventVars.thumbImgBW).css({"top":"1px", "left":"1px" });
		 $(eventVars.thumbImgBW).fadeOut(250);
		 $(eventVars.thumbHilite).show();
	 }
	 
	 function thumb_out(e) {
		 var eventVars = get_event_vars(e);
		 // clear all hilites, reset all images 
		 reset_all_thumbs();
	 }	
	 
	 function reset_all_thumbs() {
		 $('.videoThumbImageBW').stop(true,true).show(); // show all BW 
		 $('.thumbnail').css({"top":"0px", "left":"0px"});
		 $('.thumbText').stop(true,true).css("left","-300px");
		 $('.thumbHilite').hide();
	 }
	 
	 function get_event_vars(e) {
		 var me = e.target;
		 //if (!me.num) { me.num = $(e.target).parent().attr("num"); } // failsafe if you click on credits
		 //me.num==undefined || me.num==''
		 if (!me.num && me.num!=0) { me.num = $(e.target).attr("num"); }
		 if (!me.num && me.num!=0) { me.num = $(e.target).parentsUntil(".thumbnailDiv").attr("num"); }
		 var eventVars = new Object();
		 eventVars.index = eventVars.num = me.num; // if null we have a problem
		 eventVars.thumb = document.getElementById("thumb"+me.num); // the div
		 eventVars.thumbImg = document.getElementById("thumbImage"+me.num); // the image
		 eventVars.thumbImgBW = document.getElementById("thumbImage"+me.num+"_BW"); // the BW image
		 eventVars.thumbText = document.getElementById("thumbText"+me.num); // the text strip
		 eventVars.thumbTextSub = document.getElementById("thumbTextSub"+me.num); // the text strip
		 eventVars.thumbHilite = document.getElementById("thumbHi"+me.num); // the text strip
		 eventVars.w = $(eventVars.thumb).attr("width");
		 eventVars.h = $(eventVars.thumb).attr("height");
		 eventVars.objectMousedOver = me; // what was mouseovered (usually the overlay)
		 return eventVars;
	 }
	 
	 /*
	 function get_raw_event_vars(e) {
		 var eventVars = new Object();
		 eventVars.index =  eventVars.num = e.target.num; // if null we have a problem
		 eventVars.thumb = document.getElementById("thumb"+e.target.num); // the div
		 eventVars.thumbImg = document.getElementById("thumbImage"+e.target.num); // the image
		 eventVars.thumbImgBW = document.getElementById("thumbImage"+e.target.num+"_BW"); // the BW image
		 eventVars.thumbText = document.getElementById("thumbText"+e.target.num); // the text strip
		 eventVars.thumbTextSub = document.getElementById("thumbTextSub"+e.target.num); // the text strip
		 eventVars.objectMousedOver = e.target; // what was mouseovered (usually the overlay)
		 return eventVars;
	 }
	 */
	
	function click_no_video(dataObject) {
		$('.videoPlayers').hide();
		$('.videoLoadingSpinner').hide();
		//	$('.videoPlayAreaDimmer').show().css({"left":"-1000px"}).animate({"left":"0px"}, 250); //
		$('.videoPlayAreaDimmer').fadeIn(250);
		$('.videoPlayAreaDiv').show();
		$('.videoNavBar').show();
		//
		var fullimg = document.createElement('img');
		fullimg.src="videos/"+dataObject.image_alt;
		$(fullimg).attr({"id":"image_alt", "width":"950px"});
		$(fullimg).addClass("videoPlayerImage");
		//$(fullimg).hide().delay(250).fadeIn(250);
		$(fullimg).animate({"left":"-1000px"},0).delay(250).animate({"left":"0px"}, 250); //fadeIn(150);
		$('.videoPlayAreaDiv').append(fullimg); //
		//
		manange_nav_menu_player(dataObject); // in 
		make_credits(dataObject); // in js/bp_video_func
		toggle_credits(); // start on
	}

	function launch_url(dataObject) {
		var name = "BETA PETROL"; // reset
		if (dataObject && dataObject!=undefined) {
		if (dataObject.client!=undefined)  {  name= dataObject.client; }
		if (dataObject.title!=undefined) { name += " - " + dataObject.title; }
		var newWindow=window.open(dataObject.link, "_blank"); //window.open(URL,name,specs,replace)
		newWindow.focus();
		}
	}
	
	function click_play_reel(dataObject) {
		var reelname= dataObject.reelid;
		//if (dataObject.category=="licensing") { reelname="licensing"; }
		//else if (dataObject.category=="original") { reelname="originalmusic"; }
		window.location = "reel/"+reelname;
	}
		
		
// ====================================
// CREATE ROOT/MAIN THUMB STACK
	
	function build_a_thumbnail(thumbObj) {	
		//if (thumbObj.featured) { imgW=470; imgH=266; trace("- Feat: "+thumbObj.title + " is "+thumbObj.featured); } 
		//else { imgW=234; imgH=132; }
		if (thumbObj.featured) { imgW=474; imgH=269; trace("- Feat: "+thumbObj.title + " is "+thumbObj.featured); } 
		else { imgW=236; imgH=134; }
		//
		var thumbStack = document.createElement('div'); // in memory, not on page	
		$(thumbStack).attr({ 'class':'thumbnailDiv', 'id':'thumb'+thumbObj.num, "num":thumbObj.num, "width":imgW, "height":imgH });
		// make color thumb image (bottom layer, default for all browsers) //var newThumbImage = create_thumb_image(index);
		$(thumbStack).append( create_thumb_image(thumbObj) ); 
		// if html5, compute BW version
		if (Modernizr.canvas) {  $(thumbStack).prepend( create_thumb_bw(thumbObj) );  } 
		// make text strip
		if (thumbObj.type=="reel") { thumbObj.client=thumbObj.title; thumbObj.title="BETA PETROL"; }
		$(thumbStack).prepend( make_thumb_text(thumbObj, thumbObj.client) ); 
		$(thumbStack).prepend( make_thumb_textsub( thumbObj, thumbObj.title) );
		// mkae hilite box
		var thumbHilite = document.createElement('div'); // in memory, not on page	
		$(thumbHilite).attr({ 'class':'thumbHilite', 'id':'thumbHi'+thumbObj.num, "num":thumbObj.num });
		$(thumbHilite).css({"width":(imgW-4)+"px", "height":(imgH-4)+"px", "top":"1px"}); // fit border inside image (ie, not in margin)
		$(thumbHilite).html("&nbsp;");
		$(thumbStack).prepend( thumbHilite );
		// add mouse interactivity
		//$(thumbStack).hover(thumb_over, thumb_out);
		//$(thumbStack).click(thumb_click);
		//
		thumbStack.num = thumbObj.num;
		//
		return thumbStack;	
	}
	
	function build_blank_thumbnail(index) {	
		var thumbStack = document.createElement('div'); // in memory, not on page	
		$(thumbStack).attr({ "class":"thumbnailDiv thumbBlank", "id":"thumb"+index, "width":imgW+"px", "height":imgH+"px" });
		$(thumbStack).html("&nbsp;");
		return thumbStack;	
	}
	
	
	function build_a_thumbreel(refObj) {
		var type = refObj.type;
		var reelname = refObj.id;
		var reelObj = new Object({"thumb":"beta.jpg", "num":refObj.num, "client":reelname+" REEL"});
		var thumbDiv = document.createElement('div'); // in memory, not on page
		$(thumbDiv).attr({ 'class':'thumbnailDiv', 'id':reelname });		
		// make color thumb image (bottom layer, default for all browsers) 
		$(thumbDiv).append( create_thumb_image(reelObj) ); 
		// if html5, compute BW version
		if (Modernizr.canvas) {  $(thumbDiv).prepend( create_thumb_bw(reelObj) );  } 
		// make text strip
		$(thumbDiv).prepend( make_thumb_text(reelObj, reelObj.client) );
		//
		// add mouse interactivity
		$(thumbDiv).hover(thumb_over, thumb_out);
		//$(thumbDiv).click(thumb_click);
		//
		return thumbDiv;
	}
	
	
// ===================
// CREATE THUMB PIECES

	// the color (bottom layer)
	function create_thumb_image(thumbObj) {
		 var thumbImage = new Image();
		 $(thumbImage).attr({ 
				width: imgW,
				height: imgH,
				id: 'thumbImage'+thumbObj.num,
				"class": "thumbnail videoThumbImage",
				src: videoThumbPath + thumbObj.thumb
		 });
		 thumbImage.num = thumbObj.num; /// required for mouseover
		 //trace(imgW+"x"+imgH);
		 //
		 return thumbImage;
 	}
	
	// the bw (top layer)
	function create_thumb_bw(thumbObj) {
		var thumbImage = new Image();
		$(thumbImage).attr({ 
				width: imgW,
				height: imgH,
				src: videoThumbPath + thumbObj.thumb
		 });
		//
		var canvas = document.createElement('canvas');
		var canvasctx = canvas.getContext('2d');
		canvas.width = imgW;
		canvas.height = imgH;	
		$(canvas).attr({ 
			'id' : 'thumbImage'+thumbObj.num+"_BW",
			'class' : 'thumbnail videoThumbImageBW'
		});
		canvas.num = thumbObj.num; // required for mouseover
		//
		thumbImage.onload = function() {
			var bwimgW = thumbImage.width;
			var bwimgH = thumbImage.height;
			//trace("bw: "+bwimgW+"x"+bwimgH);
			// draw bw
			canvasctx.drawImage(thumbImage, 0,0,bwimgW,bwimgH); // 1. draw color
			var imgBWPixels = canvasctx.getImageData(0,0, bwimgW,bwimgH); // 2. copy image area
			for(var y=0; y <= bwimgH; y++) { // 3. average each pixel to grey
				 for(var x=0; x <= bwimgW; x++) {
					  var i = (y * 4) * imgBWPixels.width + x * 4;
					  var avg = (imgBWPixels.data[i] + imgBWPixels.data[i + 1] + imgBWPixels.data[i + 2]) / 3;
					  imgBWPixels.data[i] = avg;
					  imgBWPixels.data[i + 1] = avg;
					  imgBWPixels.data[i + 2] = avg;
				 }
			}
			canvasctx.putImageData(imgBWPixels, 0,0, 0,0, bwimgW,bwimgH); // 4. draw bw pixels. Note: (0,0,0,0 make it BW)
		} // end img.onload
		//
		return canvas;
	}
	

		// v1 html text
	function make_thumb_text(dataObject, getText) {
		var stripText = getText.toUpperCase(); 
		//if (!getText) { title = dataObject.client.toUpperCase(); }
		//
		var strip = document.createElement('span');
		strip.setAttribute('class', 'thumbText');
		strip.setAttribute('id', 'thumbText'+ dataObject.num); // required for rollover hilite
		if (currentSubPage=="featured") { $(strip).addClass("thumbTextFeature"); } 
		if (dataObject.featured) { $(strip).addClass("thumbTextFeature"); }
		$(strip).text( stripText );
		//
		return strip;
	}
	
	function make_thumb_textsub(dataObject, getText) {		
		var stripText = getText.toUpperCase();  ; //dataObject.title.toUpperCase(); 
		//if (!getText) { title = dataObject.title.toUpperCase(); }
		//
		var strip = document.createElement('span');
		if (dataObject.featured) { strip.setAttribute('class', 'thumbText thumbTextFeatureSub'); }
		else { strip.setAttribute('class', 'thumbText thumbTextSub'); }
		strip.setAttribute('id', 'thumbTextSub'+dataObject.num); // required for rollover hilite
		$(strip).text( stripText );
		//
		return strip;
	}
	
	function make_thumb_num(num) {
		var badge = document.createElement('span');
		badge.setAttribute('class', 'thumbNumFeature');
		$(badge).text(num);
		//
		return badge;
	}