// JavaScript Document
var isIphone = (navigator.userAgent.toLowerCase().indexOf("iphone") > 0);
var isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") > 0);

/***************** VIDEO HANDLING ****************/
// rationale: if not Safari (or Chrome) offer Flash player. If Safari then use html tag unless iPhone, in which case link direct to file

var currentVideoID = "";

var projImgPathList = new Array();
var projImgIDlist = new Array();
var projImgLoadedList = new Array();
var currentImgID = "";

function queueImg(f,imgID){
	projImgPathList.push(f);
	projImgIDlist.push(imgID);
}

function loadnextImg(){
	if (projImgPathList.length > 0){
		var imgDiv = projImgIDlist.shift();
		var imgPath = projImgPathList.shift();
		//trace("loadNextImg: " + imgPath + " " + imgDiv);
		$('#' + imgDiv).load(checkImg());
		$('#' + imgDiv).attr('src',imgPath);
		currentImgID = imgDiv;
	} else {
		alert("load Done");
	}
}

function checkImg(){
	// remove existing "loading" bg
	$('#' + currentImgID).parent().css('background-image',"../img/shim.gif");
	if (projImgPathList[0]){loadnextImg()};
}


function prepWorkPage(){
	// convert images to images and set up the preloader
	projImgPathList = []; // reset
	projImgIDlist = []; // reset
	
	var randomID = "";
	$(".jndimg").each(function(){
		var w = $(this).attr("width");
		var h = $(this).attr("height");
		var imgPath = $(this).attr("imgPath");
		var imgHTMLstring = "";
		
		// now only load if it is the first image in a project
		var myParentDiv = $(this).parent();
		var myIndex = myParentDiv.parent().children().index(myParentDiv);
		
		if (myIndex == 0){
			imgHTMLstring = '<img src="' + imgPath + '" width="944" height="' + h + '" />';	
		} else {
			// assign and id
			var randomImgID = "img_" + String(Math.floor(100000*Math.random()));  // generate unique id
			
			imgHTMLstring = '<img id="' + randomImgID  + '" src="img/shim.gif" width="944" height="' + h + '" />';
			
			// add the id and the real image to the preloader
			queueImg(imgPath,randomImgID);
			
		}
		
		
		$(this).html(imgHTMLstring);
	});
	
	// convert video hrefs to video
	$(".jndvideo").each(function(){
		var myVideo = $(this).attr("vidPath");
		var myPosterframe = myVideo.split(".")[0] + ".jpg";
		randomID = String(Math.floor(100000*Math.random()));  // generate unique id
		var posterString = "";
		
		/*
		if (isIphone){
			// write out the poster frame with a link to the video. note change of classname to 'vidLink_' to avoid attaching behaviours
			posterString = '<div id="vidLink_' + randomID + '"><a href="' + myVideo + '"><img src="' + myPosterframe + '" width="944" height="534" /></a></div>';
		} else {
			*/
			// html tag of posterframe, load video when playbutton clicked
			posterString = '<div id="vidContainer_' + randomID + '"><img src="' + myPosterframe + '" width="944" height="534" /></div>';	
			posterString += '<div id="playbtn_' + randomID + '" class="playoverlay"><img src="img/playbutton.png" /></div>';
		//}
		$(this).html(posterString);
	});
		
	// set previous and next button click functions
	$('.nextNav').click(function() {
		var projID = $(this).parent().parent().parent().attr("id");
		nextPanel(projID);
	});
	$('.prevNav').click(function() {
		var projID = $(this).parent().parent().parent().attr("id");
		prevPanel(projID);
	});
	
	// set previous and next button hover functions
	if (isNotIE && !isMobileSafari){
		$('.prevWrapper').hover(function(){$(".prevNav", this).show();},function(){$(".prevNav", this).hide();});
		$('.nextWrapper').hover(function(){$(".nextNav", this).show();},function(){$(".nextNav", this).hide();});
		$('.nextNav').hide();
		$('.prevNav').hide();
	} else {
		if (!isMobileSafari){
			$('.prevWrapper').show();
			$('.nextWrapper').show();
		}
	}

	
	// set thumb click functions
	$('.dot').click(function() {
		var projID = $(this).parent().parent().attr('id');
		var myIndex = $(this).parent().children().index(this);  // this is the index of the dot within the current project
		clickDot(projID, myIndex);
	});
	
	$('.dot').each(function(){
		// assign indexes to each dot
		var myIndex = $(this).parent().children().index(this);  // this is the index of the dot within the current project
		$(this).data("myIndex",myIndex);
	});
	
	
	// decide to show/hide next, prev, and dots based on how many panels in each project content area
	$(".project").each(function(){
		var maxPanels = $(this).find('.panel').length;
		$(this).data("maxPanels",maxPanels); // add the count as a parameter
		$(this).data("currentPanel",0); // add the count as a parameter
		//if (maxPanels > 1){
			// show nav and thumbs
			var dotsetWidth = 16*$('.dot',this).length;
			$('.dotset',this).width(dotsetWidth);
			$('.dotset',this).css('visibility','visible');
			
			if (maxPanels > 1){
				$('.nextNav',this).css('visibility','visible');
				$('.prevNav',this).css('visibility','visible');
			} else {
				$('.nextWrapper',this).css('display','none');
				$('.prevWrapper',this).css('display','none');
			}
			
			// make the first dot highlighted
			var myProj = $(this).attr('id');
			selectDot(myProj,0);
			
			// attach touch events
			//if ("ontouchstart" in document.documentElement){
				/*
				$(this).on('touchstart',function(event){touchStart(event,myProj)}); 
				$(this).on('touchend',function(event){touchEnd(event)}); 
				$(this).on('touchmove',function(event){touchMove(event)}); 
				$(this).on('touchcancel',function(event){touchCancel(event)}); 
				*/
			//}
			
			// adjust the panelSet width to suit
			var newWidth = String(maxPanels*944) + "px";
			$(".panelSet",this).css('width',newWidth);
					
		//}
	});
	// touch events 
	// ontouchstart="touchStart(event,'project_1');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);
	if (isMobileSafari){
		$('.prevWrapper').css('display','none');
		$('.nextWrapper').css('display','none');
		$('.prevNav').css('display','none');
		$('.nextNav').css('display','none');
	
	//if ("ontouchstart" in document.documentElement){
		/*
		$(".panelSet").on('touchstart',function(event){
				//myProj = $(this).attr('id');
				touchStart(event,myProj);
		});
		$(".panelSet").on('ontouchend',function(event){touchEnd(event)});
		$(".panelSet").on('ontouchmove',function(event){touchMove(event)});
		$(".panelSet").on('ontouchcancel',function(event){touchCancel(event)});
		*/
	};
	
	
	
	// find any videos and set the behaviour for the playbuttons
	$('.playoverlay').click(function(){
		var myID = $(this).attr("id").split("_")[1];
		resetVideos();
		$(this).hide();
		//$(this).css('display','none');
		currentVideoID = myID;
		var myVideo = $(this).parent().attr("vidPath");
		var vidHTMLstring = "";
		
		// now write out the video code and assign, so as to start loading the video

		var vidHTMLstring = "";
		if (isSafari || isMobileSafari){ 
			if (!isMobileSafari){
				vidHTMLstring = '<video id="vidPlayer_' + currentVideoID + '" width="944" height="534" controls="controls"><source src="' + myVideo + '" type="video/mp4" /></video>';
			} else {
				vidHTMLstring = '<video id="vidPlayer_' + currentVideoID + '" width="944" height="534" src="' + myVideo + '" controls></video>';
			}
			$(this).parent().html(vidHTMLstring);
			var myVid = $("#vidPlayer_" + myID).get(0);
			myVid.setAttribute("controls","controls") ;
			myVid.play();
				
		} else {
			// flash based using FlowPlayer
			vidHTMLstring = '<div class="flashVidPlayer" style="display:block;width:944px;height:534px" id="vidPlayer_' + randomID + '"></div>';
			$(this).parent().html(vidHTMLstring);
			flowplayer("vidPlayer_" + randomID, "flowplayer/flowplayer-3.2.7.swf",{
					   clip: {
						   autoPlay: true,
						   autoBuffering: true,
						   url: myVideo
						}
			});
		}	
	});
	
	loadnextImg(); // start the image load queue
};

/******************* PROJECT IMAGES NAV ********************/

function nextPanel(projID){
	resetVideos();
	var currentPanel = $("#" + projID).data("currentPanel");
	var maxPanels = $("#" + projID).data("maxPanels");
	currentPanel = (currentPanel +1) % maxPanels;
	//trace('nextPanel: ' + currentPanel);
	
	slideTo(projID, currentPanel);
	selectDot(projID, currentPanel);
	$("#" + projID).data("currentPanel",currentPanel);
	return false;
};

function prevPanel(projID){
	resetVideos();
	var currentPanel = $("#" + projID).data("currentPanel");
	var maxPanels = $("#" + projID).data("maxPanels");
	currentPanel -- ;
	if (currentPanel < 0){currentPanel = maxPanels -1};
	//trace('prevPanel: ' + currentPanel);
	
	slideTo(projID, currentPanel);
	selectDot(projID, currentPanel);
	$("#" + projID).data("currentPanel",currentPanel);
	return false;
};

function clickDot(projID, dotIndex){
	// move panel to suit
	$("#" + projID).data("currentPanel",dotIndex);	
	slideTo(projID, dotIndex);
	selectDot(projID, dotIndex);
	return false;
};

function selectDot(projID, dotIndex){	
	$(".dot","#" + projID).each(function(){
		var myIndex = $(this).data('myIndex');
		if (myIndex == dotIndex){
			$("img",this).attr('src','img/dot_hi.png');
		} else {
			$("img",this).attr('src','img/dot.png');
		}
    });
};

function slideTo(projID, panelNo){
	var newLeft = -panelNo*944;
	$(".content .panelSet","#" + projID).animate({"left":newLeft},500);
};

function resetVideos(){
	// reset currently playing video when sliding or when new veideo is activated
	if (isSafari){
		if (currentVideoID != ""){
			var myVid = $("#vidPlayer_" + currentVideoID).get(0);
			myVid.pause();
			myVid.currentTime = 0;
			if (myVid.hasAttribute("controls")) {myVid.removeAttribute("controls") };  
			// show play overlay again
			$("#playbtn_" + currentVideoID).show();
		}
		currentVideoID = "";
	} else {
		// stop all videos
		 $f("*").each(function() {this.stop();});
	}
};