/* ********************************************************************
	on page load, setup initial content
******************************************************************** */

var s_URL = (this.location).toString();
var n_paramsIndex = s_URL.lastIndexOf('?');
var s_urlParams = s_URL.substring(n_paramsIndex+1,s_URL.length);
var intStartNum;
var sStartNum;
var currThumbnail;

// get id from querystring
var qsId = getParamValue("id");

// set initial content variables
if(qsId && qsId > 0) { // make sure qs exists and is a number greater than 0
	
	intStartNum = parseInt(qsId);
    sStartNum = qsId;
	
}
else {
	// no qs so static start
	intStartNum = 1;
	sStartNum = "1";
}


/* ********************************************************************
	Default carousel configuration properties.
******************************************************************** */

var defaults = {
	vertical: false,
	start: intStartNum,
	offset: 1,
	size: null,
	scroll: 8,
	visible: null,
	animation: 'normal',
	easing: 'swing',
	auto: 0,
	wrap: null,
	initCallback: null,
	reloadCallback: null,
	itemLoadCallback: null,
	itemFirstInCallback: null,
	itemFirstOutCallback: null,
	itemLastInCallback: null,
	itemLastOutCallback: null,
	itemVisibleInCallback: null,
	itemVisibleOutCallback: null,
	buttonNextHTML: '<div></div>',
	buttonPrevHTML: '<div></div>',
	buttonNextEvent: 'click',
	buttonPrevEvent: 'click',
	buttonNextCallback: null,
	buttonPrevCallback: null
};


// jquery has loaded
jQuery(document).ready(function() {
	
	/* ********************************************************************
		On JQ Load
	******************************************************************** */
	
	// 1. load the carousel
    //jQuery('#mycarousel').jcarousel();
	
	// 2. if there are not enough thumbnails for pagination, remove the arrows
	/*if (projectDataArray.length < 9) {
		$(".jcarousel-next-disabled-horizontal").css("display", "none");
		$(".jcarousel-prev-disabled-horizontal").css("display", "none");
		$(".jcarousel-clip").css("left", "-27px");
	}*/
	
	// 3. setup initial content
	//setupInitialContent(sStartNum);
	
	// on load: make sure passed id is not greater than the amount of thumbnails in carousel
	if (parseInt(qsId) > $("#mycarousel").children("li").length) {	
	
		// update carousel start variables so the carousel starts at the first thumbnail
		defaults["start"] = "0";
		
		// set initial content to first thumbnail
		setupInitialContent("1");
		
		// set first thumbnail border on
		$("#mycarousel li:first-child").css("borderColor", "#f2601e");
    	jQuery('#mycarousel').jcarousel();
	
	}
	else { // run as normal using data form querystring
		jQuery('#mycarousel').jcarousel();
		setupInitialContent(sStartNum);
	}
	
	/* ********************************************************************
		Thumbnail onclick event
	******************************************************************** */
	
	// on click (thumbnail)
	$(".thimage").click(function () {
										 
		// set active border
		$(".thimage").parent(".jcarousel-item").css("borderColor", "#cccccc");
		$(this).parent(".jcarousel-item").css("borderColor", "#f2601e");
		
		// load project overview
		setOverview(this.id);
		
		// load large image
		$("#lg_image_cnt").html('<img id="lgimage" src="../images/portfolio/'+company+'/lg'+this.id+'.jpg" alt="" />');
		
		// update pagination
		buildPagination(this.id);
		
		// update current thumbnail variable
		currThumbnail = this.id;
		
    });

	
	/* ********************************************************************
		load project title & overview content
	******************************************************************** */
	
	function setOverview(div) {
		$("#project_title").html('<strong>'+projectDataArray[parseInt(div)-1].projectTitle+'</strong>&nbsp;<p><a href="'+projectDataArray[parseInt(div)-1].url+'">'+projectDataArray[parseInt(div)-1].urlTitle+'</a>');
		
		
		$("#project_overview").html('<strong>Project Overview:</strong>&nbsp;'+projectDataArray[parseInt(div)-1].projectDescription);
	}

	
	/* ********************************************************************
		thumbnail mouseover event
	******************************************************************** */
	
	$(".thimage").mouseover(function () {
		
		// don't change border color on currently selected thumbnail
		if (this.id != currThumbnail) {
			$(this).parent(".jcarousel-item").css("borderColor", "#f2601e");
		}
		
    });
	
	
	/* ********************************************************************
		thumbnail mouseout event
	******************************************************************** */
	
	$(".thimage").mouseout(function () {
		
		// don't change border color on currently selected thumbnail
		if (this.id != currThumbnail) {
			$(this).parent(".jcarousel-item").css("borderColor", "#cccccc");
		}
		
    });
	
	/* ********************************************************************
	create pagination
	******************************************************************** */
	
	function buildPagination(divId) {
		
		var multiPages = projectDataArray[parseInt(divId)-1].pages;
		
		$("#image_nums").html("");
		
		if (multiPages > 1 ) {
		
			var i=1;
			var image_numsCnt = "&nbsp;&nbsp;";
			for (i=1;i<=multiPages;i++) {
				// create the pagination per the amount for each item in the project data array
				image_numsCnt = image_numsCnt + '<a href="javas'+'cript:pagination('+divId+','+i+');" class="pageNumber" id="'+divId+'_'+i+'">'+i+'</a>';
			}
			
			// after loop update the inner html of the pagination container
			$("#image_nums").html(image_numsCnt);
			
			// set first pagination element to "current"
			currPage(divId,"1");
			
		};
		
	/*	if (multiPages == 1 ) {
			$("#image_nums").html('<a href="javas'+'cript:pagination('+divId+',1);" class="pageNumber" id="'+divId+'_1">'+1+'</a>');
			currPage(divId,"1");
		}*/
			
		
	}
	
	
	/* ********************************************************************
		initial content
	******************************************************************** */
	
	function setupInitialContent(sStartNum) {
	
		// set initial active thumbnail
		$("#"+sStartNum).parent(".jcarousel-item").css("borderColor", "#f2601e");	
		currThumbnail = sStartNum;
		
		// set initial project overview
		setOverview(sStartNum);
		
		// set initial large image
		$("#lg_image_cnt").html('<img id="lgimage" src="../images/portfolio/'+company+'/lg'+sStartNum+'.jpg" alt="" />');
		
		// build initial pagination
		buildPagination(sStartNum);
	
	}
	
	
}); // end jquery loaded
	
	

	
	
/* ********************************************************************
	pagination on click
******************************************************************** */

// last active pagination page
var lastPage = "";

function currPage(div,page) {
	
	if(lastPage) { // if its not empty
	
		// set all pagination href styles to default
		$("#"+lastPage).css("background-image", "url(../images/pag_bg.gif)");
		$("#"+lastPage).css("color", "#fff");
		
	}
	
	// set current pagination href style to active
	$("#"+div+"_"+page).css("background-image", "none");
	$("#"+div+"_"+page).css("color", "#000");
	
	// update last page variable
	lastPage = div+"_"+page;
	

}

function pagination(div,page) {
	
	if (page == "1") {
		$("#lg_image_cnt").html('<img id="lgimage" src="../images/portfolio/'+company+'/lg'+div+'.jpg" alt="" />');
	}
	else {
		$("#lg_image_cnt").html('<img id="lgimage" src="../images/portfolio/'+company+'/lg'+div+'_'+page+'.jpg" alt="" />');
	}
	
	// update current page variabe
	currPage(div,page);
	
}





/* ********************************************************************
	get "id" from the querystring
******************************************************************** */

function getParamValue (s_param) {
	var n_paramIndex = s_urlParams.indexOf(s_param+"=");
	if(n_paramIndex!=-1){
		var s_urlParam1 = s_urlParams.substring(n_paramIndex+1,s_urlParams.length);
		if(s_urlParam1.indexOf("&")!=-1){
			var n_endIndex = s_urlParam1.indexOf("&");
		}else{
			if(s_urlParam1.indexOf("#")!=-1){
				var n_endIndex = s_urlParam1.indexOf("#");
			}else{
				var n_endIndex = s_urlParam1.length;
			}
		}
		
		var s_urlParam2 = s_urlParam1.substring(0, n_endIndex);
		var s_urlParamValue = s_urlParam2.substring(s_urlParam2.indexOf("=")+1, s_urlParam2.length);
		return s_urlParamValue;
	}else{
		return "";
	}
}