//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Customisable Carousel script v 1.1
// By: Silas Landricombe
// Created: January 2010
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// EDITABLE VARIABLES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

// widths and heights for images - set a small and large image size, these can be the same
var smlImgWidth = 88; var smlImgHeight = 60; var lrgImgWidth = 110; var lrgImgHeight = 75;
//font sizes for image tags
var smlFnt = '10px'; var lrgFnt = '12px';
// the gap between images in your carousel
var imgMargin = 5; 
// speed of transitions - you may need to play with these two values to get it looking right depending on your image sizes / orientation - rSpeed = rotation, sSpeed = scale
var rSpeed = 10; var sSpeed = 10;

// previous button - please base this on the one supplied i.e. same dimensions and format, otherwise you will need to edit the script to accomodate it
var pBtn = '/wp-content/scripts/crsl/img/spinner-left.png';
// next button - please base this on the one supplied i.e. same dimensions and format, otherwise you will need to edit the script to accomodate it
var nBtn = '/wp-content/scripts/crsl/img/spinner-right.png';

// blank image - will cap either end of the carousel (not part of the array). If you dont want any cap images then leave it as ''
var blnk = '/wp-content/scripts/crsl/img/blank-image_small.jpg';

// copy to precede the image link titles supplied as the third item in each image array
var lnkTtleIntr = 'click here view more photos from the gallery ';

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// DO NOT EDIT BENEATH THIS LINE /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var totalwidth, imgWdth, imgHght, midItm, rTimer, swdTimer, shdTimer, swuTimer, shuTimer, trnelm, curMidImg, nxtMidImg, fnsh, dir;
var scrlNxt = true; var scrlPrev = true; 
var topPad = Math.ceil((lrgImgHeight - smlImgHeight) / 2);

function setupCrsl(){
	var container = document.getElementById(crsl);
	
	var crslLeft = '<div class="spinner-nav" style="margin-right:' + imgMargin + 'px;"><a href="javascript:void(0);" onmouseover="imgOver(\'crslPrv\');" onmouseout="imgOut(\'crslPrv\');" onclick="imgPrv(); return false;" title="click here to move left"><img src="' + nBtn + '" id="crslPrv" /></a></div>';
	var crslRight = '<div class="spinner-nav"><a href="javascript:void(0);" onmouseover="imgOver(\'crslNxt\');" onmouseout="imgOut(\'crslNxt\');" onclick="imgNxt(); return false;" title="click here to move right"><img src="' + pBtn + '" id="crslNxt" /></a></div>';
	var capImg = '<div style="padding-top:' + topPad + 'px;"><img src="' + blnk + '" width="' + smlImgWidth + '" height="' + smlImgHeight + '" /></div>'
	
	var crslContent = ''; midItm = (Math.ceil(imgArray.length / 2) - 1);
	var adClass = topPad; var fntClass = smlFnt; imgWdth = smlImgWidth; imgHght = smlImgHeight;
	totalwidth = ((imgArray.length - 1) * smlImgWidth) + lrgImgWidth + ((imgArray.length - 2) * imgMargin);
	if(blnk != ''){ totalwidth = totalwidth + ((smlImgWidth * 2) + (imgMargin * 2)); }
	
	var crslOffset = (totalwidth - ((imgWdth * 2) + lrgImgWidth + (imgMargin * 2))) / 2;
	if (imgArray.length%2 == 0){
		crslOffset = crslOffset - (imgWdth / 2);
	}
	
	for ( var i in imgArray ){
		if(i == midItm){ adClass = '0'; fntClass = lrgFnt; imgWdth = lrgImgWidth; imgHght = lrgImgHeight; }
		crslContent +=  '<div style="padding-top:' + adClass + 'px; margin-right:' + imgMargin + 'px;"><a href="' + imgArray[i][3] + '" title="' + lnkTtleIntr + imgArray[i][2] + '"><img src="' + imgPath + imgArray[i][0] + '" width="' + imgWdth + '" height="' + imgHght + '" id="' + i + '" /></a><p style="font-size:' + fntClass + '; width:' + imgWdth + 'px;">'+ imgArray[i][1] + '</p></div>';
		adClass = topPad; fntClass = smlFnt; imgWdth = smlImgWidth; imgHght = smlImgHeight;
	}
	
	container.innerHTML += crslLeft + '<div class="spinner-imgs" style="width:' + ((imgWdth * 2) + lrgImgWidth + (imgMargin * 2)) + 'px; margin-right:' + imgMargin + 'px;"><div id="spinner-imgwrap" style="margin-left:-' + crslOffset + 'px; width:' + totalwidth * 2 + 'px;">' + capImg + crslContent + capImg + '</div></div>' + crslRight;
	
	cReady = true;
}

function imgOut(elmnt){ 
	document.getElementById(elmnt).style.marginLeft = '0';
	
	if(scrlNxt == false && elmnt == 'crslNxt'){ document.getElementById(elmnt).style.marginLeft = '-96px';  }
	if(scrlPrev == false && elmnt == 'crslPrv'){ document.getElementById(elmnt).style.marginLeft = '-96px';  }
}

function imgOver(elmnt){ 
	document.getElementById(elmnt).style.marginLeft = '-32px';
	
	if(scrlNxt == false && elmnt == 'crslNxt'){ document.getElementById(elmnt).style.marginLeft = '-96px';  }
	if(scrlPrev == false && elmnt == 'crslPrv'){ document.getElementById(elmnt).style.marginLeft = '-96px';  }
}

function imgPrv(){
	if(cReady == true && scrlPrev == true){
		curMidImg = document.getElementById(midItm);
		nxtMidImg = document.getElementById(midItm - 1);
		trnelm = document.getElementById('spinner-imgwrap');
		
		fnsh = parseInt(trnelm.style.marginLeft) + (imgWdth + imgMargin); dir = 'f'; differential = parseInt(trnelm.style.marginLeft) - fnsh; rotateImg();
		scaleDn(); scaleUp();
		
		nxtMidImg.parentNode.parentNode.style.paddingTop =  '0px';
		var lrgImgTag = nxtMidImg.parentNode.parentNode.getElementsByTagName('p');
		lrgImgTag[0].style.fontSize = lrgFnt; lrgImgTag[0].style.width = lrgImgWidth + 'px';
		
		curMidImg.parentNode.parentNode.style.paddingTop =  topPad + 'px';
		var smlImgTag = curMidImg.parentNode.parentNode.getElementsByTagName('p');
		smlImgTag[0].style.fontSize = smlFnt; smlImgTag[0].style.width = smlImgWidth + 'px';
		
		midItm = (midItm - 1);
		if(midItm == 0){ scrlPrev = false; document.getElementById('crslPrv').style.marginLeft = '-96px'; }
		if(midItm != (imgArray.length - 1)){ scrlNxt = true; document.getElementById('crslNxt').style.marginLeft = '0'; }
	}
}

function imgNxt(){
	if(cReady == true && scrlNxt == true){
		curMidImg = document.getElementById(midItm);
		nxtMidImg = document.getElementById(midItm + 1);
		trnelm = document.getElementById('spinner-imgwrap');
		
		fnsh = parseInt(trnelm.style.marginLeft) - (imgWdth + imgMargin); dir = 'b'; differential = parseInt(trnelm.style.marginLeft) - fnsh; rotateImg();
		scaleDn(); scaleUp();
		
		nxtMidImg.parentNode.parentNode.style.paddingTop =  '0px';
		var lrgImgTag = nxtMidImg.parentNode.parentNode.getElementsByTagName('p');
		lrgImgTag[0].style.fontSize = lrgFnt; lrgImgTag[0].style.width = lrgImgWidth + 'px';
		
		curMidImg.parentNode.parentNode.style.paddingTop =  topPad + 'px';
		var smlImgTag = curMidImg.parentNode.parentNode.getElementsByTagName('p');
		smlImgTag[0].style.fontSize = smlFnt; smlImgTag[0].style.width = smlImgWidth + 'px';
		
		midItm = (midItm + 1);
		if(midItm == (imgArray.length - 1)){ scrlNxt = false; document.getElementById('crslNxt').style.marginLeft = '-96px'; }
		if(midItm != 0){ scrlPrev = true; document.getElementById('crslPrv').style.marginLeft = '0'; }
	}
}

function rotateImg(){
	var curPos = parseInt(trnelm.style.marginLeft);
	if(dir == 'f'){ var differential = fnsh - curPos; } else { var differential = curPos - fnsh; }
	if(differential < rSpeed){ var turnby = differential; } else { var turnby = rSpeed; }
	if(curPos == fnsh){
		clearTimeout(rTimer);
		trnelm.style.marginLeft = fnsh + 'px';
		cReady = true;
	} else {
		if(dir == 'f'){
			trnelm.style.marginLeft = (parseInt(trnelm.style.marginLeft) + turnby) + 'px';
		} else {
			trnelm.style.marginLeft = (parseInt(trnelm.style.marginLeft) - turnby) + 'px';
			
		}
		rTimer = setTimeout("rotateImg()", 20);
		cReady = false;
	}
}

function scaleDn(){		
	var ow = curMidImg.width; var nw = smlImgWidth;
	var oh = curMidImg.height; var nh = smlImgHeight;
	var wdifferential = ow - nw; var hdifferential = oh - nh;
	
	if(wdifferential < sSpeed){ var wscaleby = wdifferential; } else { var wscaleby = sSpeed; }
	if(hdifferential < sSpeed){ var hscaleby = hdifferential; } else { var hscaleby = sSpeed; }
	
	if(ow == nw){
		clearTimeout(swdTimer);
		curMidImg.width = smlImgWidth;
		cReady = true;
	} else {
		curMidImg.width = curMidImg.width - wscaleby;
		swdTimer = setTimeout("scaleDn()", 100);
		cReady = false;
	}
	
	if(oh == nh){
		clearTimeout(shdTimer);
		curMidImg.height = smlImgHeight;
		cReady = true;
	} else {
		curMidImg.height = curMidImg.height - hscaleby;
		shdTimer = setTimeout("scaleDn()", 100);
		cReady = false;
	}
}

function scaleUp(){
	var ow = nxtMidImg.width; var nw = lrgImgWidth;
	var oh = nxtMidImg.height; var nh = lrgImgHeight;
	var wdifferential = nw - ow; var hdifferential = nh - oh;
	
	if(wdifferential < sSpeed){ var wscaleby = wdifferential; } else { var wscaleby = sSpeed; }
	if(hdifferential < sSpeed){ var hscaleby = hdifferential; } else { var hscaleby = sSpeed; }
	
	if(ow == nw){
		clearTimeout(swuTimer);
		nxtMidImg.width = lrgImgWidth;
		cReady = true;
	} else {
		nxtMidImg.width = nxtMidImg.width + wscaleby;
		swuTimer = setTimeout("scaleUp()", 100);
		cReady = false;
	}
	
	if(oh == nh){
		clearTimeout(shuTimer);
		nxtMidImg.height = lrgImgHeight;
		cReady = true;
	} else {
		nxtMidImg.height = nxtMidImg.height + hscaleby;
		shuTimer = setTimeout("scaleUp()", 100);
		cReady = false;
	}
}