// JavaScript Document
var resMode;
var colsMode;
var displayBtns = new Array();
function setResLinks(){ // sets onclick event for each result. Triggers the details column to appear for demo purposes. can be removed
		/*var resLinksArr = document.getElementById('results').getElementsByTagName('a');
		for(var i=0; i<resLinksArr.length; i++){
			if(resLinksArr[i].className.indexOf('resLink') != -1){
				resLinksArr[i].onclick=function(){
					sizePanels('resMed')
				}
			}
		}*/
		var resLinksArr = document.getElementById('results').getElementsByTagName('div');
		for(var i = 0; i < resLinksArr.length; i++)
		{
		  if(resLinksArr[i].className.indexOf('resWrapper') != -1)
		  {
		    resLinksArr[i].onclick = function(){
		      //sizePanels('resMed');
		    }
		  }
		}
}
function resDisplay(){
	var dispBtns = document.getElementById('dispBar').getElementsByTagName('img');
	var resCol = document.getElementById('results');
	for(var i =0; i < dispBtns.length; i++){
			
			if(dispBtns[i].src.indexOf('btn_respic') != -1){// results with pics
				dispBtns[i].onclick=function(){
					resMode = 'resNorm';
					resCol.removeAttribute(classAtt);
					addClass(resCol,'resNorm',true);
					$('#searchForm input[name=view_type_F]').val('resNorm');
					//changeResImg();
					changeImgArr(displayBtns,this);
					addAltClass();
				}
			}
			if(dispBtns[i].src.indexOf('btn_resnopic') != -1){// results with no pics
				dispBtns[i].onclick=function(){
					resMode = 'resNoPic';
					resCol.removeAttribute(classAtt);
					addClass(resCol,'resNoPic',true);
					$('#searchForm input[name=view_type_F]').val('resNoPic');
					changeImgArr(displayBtns,this);
					addAltClass();
				}
			}
			if(dispBtns[i].src.indexOf('btn_reslrgpic') != -1){// results with large pics
				dispBtns[i].onclick=function(){
						resMode = 'resLrgPic';
						resCol.removeAttribute(classAtt);
						addClass(resCol,'resLrgPic',true);
						$('#searchForm input[name=view_type_F]').val('resLrgPic');
						//changeResImg();//changes src for img's in results col
						changeImgArr(displayBtns,this);
						addAltClass();
				}
			}
			displayBtns.push(dispBtns[i]);
	}
	
}
function addAltClass(){// add a class to every alternate element
	var divArr = document.getElementById('results').getElementsByTagName('div');
	var resDiv = new Array();
	for(var i =0; i < divArr.length; i++ ){// populate array with divs that have 'resWrapper' as a classname
		
		if(divArr[i].className.indexOf('resWrapper') != -1){
			//alert(divArr[i].className);
			resDiv.push(divArr[i]);
			
			/*if(divArr[i].className.indexOf('floatR') != -1){
				//alert(' a float righter' + divArr[i].className);
				//resDiv.push(divArr[i]);
				addClass(divArr[i],'floatR',false);
			}*/
			
		}
		
	}
	
	if(colsMode == 'resMed' && resMode == 'resLrgPic'){// add the class if column is set to resMed and large thumbnail
		for(var i =0; i < resDiv.length; i++ ){
			if(resDiv[i].className.indexOf("floatR") == -1){
			//	alert(resDiv[i].className);
			}
			if(isEvenInt(i) == false){
				//resDiv[i].style.backgroundColor="#ffff00";
				addClass(resDiv[i],'floatR',true);
			}
		}
	}else{ 
		
			//alert('non large pics and med col reached');
			for(var i =0; i < resDiv.length; i++ ){
				if(resDiv[i].className.indexOf('floatR') != -1){
				//	alert(resDiv[i].className);
				//	alert(resDiv[i].className);
					addClass(resDiv[i],'floatR',false);
				}
			}
			
		
	}
}
function changeResImg(imgId){
	if(imgId != null){
		var carDetImg = document.getElementById('carDetImg');
		if(carDetImg.src.indexOf('_lrg.jpg') != -1  && colsMode == "resMed"){
			carDetImg.src = changeFileName(carDetImg.src,true);
		}else if(carDetImg.src.indexOf('_lrg.jpg') == -1 && colsMode == "resSml"){
			carDetImg.src = changeFileName(carDetImg.src,false);
		}
	}else{		
		var imgArr = document.getElementById('results').getElementsByTagName('img');
		for(var i = 0 ; i < imgArr.length ; i++){
			if(imgArr[i].parentNode.className=="resImg"){
				if(imgArr[i].src.indexOf('_lrg.jpg') != -1  && resMode == "resNorm"){
					imgArr[i].src = changeFileName(imgArr[i].src,true);
				}else if(imgArr[i].src.indexOf('_lrg.jpg') == -1 && resMode == "resLrgPic"){
					imgArr[i].src = changeFileName(imgArr[i].src,false);
				}
			}
		}
	}
}
function resOpts(dispLevel){// manage results links (blue bar with links at bottom of every result)
	var divArr = document.getElementById('results').getElementsByTagName('div');
	var resOptsArr = new Array();
	for(var i = 0; i < divArr.length; i++){// find div with class name 'resOpts'
		if(divArr[i].className == 'resOpts'){
			resOptsArr.push(divArr[i]);
		}
	}
	for(var i = 0; i < resOptsArr.length; i++){
		for(var k = 0; k < resOptsArr[i].childNodes.length; k++){
			if(resOptsArr[i].childNodes[k].nodeType == 1){
				var nodeTxt = resOptsArr[i].childNodes[k].childNodes[0].nodeValue;
				if(nodeTxt.indexOf('Shortlist') != -1){
					resOptsArr[i].childNodes[k].childNodes[0].nodeValue = "+ ShortList";
				}
				if(nodeTxt.indexOf('Similar') != -1){
					resOptsArr[i].childNodes[k].childNodes[0].nodeValue = "Email Similar";	
				}
			}
		}
	}
}
function widenLink(){
	if(document.getElementById('btnWideDet')){// Check for existance of one of the buttons before the handlers are set
		var btnWideDet = document.getElementById('btnWideDet');
		var btnWideDet2 = document.getElementById('btnWideDet2');
		//var btnWideDet3 = document.getElementById('btnWideDet3');
		var btnShortDet = document.getElementById('btnShortDet');
		btnWideDet.onclick=function(){
			/*if(colsMode == 'resSml')
			{
				sizePanels('resMed');
				//this.src = imgFileName(this,'widedet');
			}else{
				sizePanels('resSml');
				//this.src = imgFileName(this,'shortdet');
			}*/
			sizePanels('resSml');
			return false;
		}
		btnWideDet2.onclick=function(){
			sizePanels('resSml');
			return false;
		}
		//btnWideDet3.onclick=function(){
		//	sizePanels('resSml');
		//	return false;
		//}
		if(btnShortDet)
		{
		  btnShortDet.onclick=function(){
		    sizePanels('resMed');
		    return false;
		  }
		}
	}
}
function sizePanels(panel){
	var mainCol = document.getElementById('main');
	switch (panel) {
		case 'resMed':
			colsMode = 'resMed'; 
			mainCol.removeAttribute(classAtt);
			addClass(mainCol,'resMed',true);
			resOpts();
			//changeResImg('carDetImg');
			addAltClass();
			break;
		case 'resSml':
			colsMode = 'resSml'; 
			mainCol.removeAttribute(classAtt);
			addClass(mainCol,'resSml',true);
			document.getElementById("btnShortDet").onclick = function(){
			  sizePanels('resMed');
			  return false;
			}
			//changeResImg('carDetImg');
			break;
	  case 'resNorm':
	    mainCol.removeAttribute(classAtt);
		default: 
			break;
	}
	
}

function expBoxLinks(){// Expanding panels in car details column
	var imgArr1 = document.getElementById('detMoreInfo').getElementsByTagName('img');//Further Info panel
	var imgArr2 = document.getElementById('detGnrtee').getElementsByTagName('img');//Our Guarantee panel
	var copyDiv = document.getElementById('detGnrtee').getElementsByTagName('div')[0];//Our Guarantee panel first div to reveal onclick
	for(var i = 0; i < imgArr1.length; i++){
		if(imgArr1[i].className="downChev"){
			imgArr1[i].onclick=function(){
				if(document.getElementById('carDataForm2').className.indexOf('showEle') == -1){
					addClass(document.getElementById('carDataForm2'),'showEle',true);
					this.src = imgFileName(this,'minusbox');
				}else{
					addClass(document.getElementById('carDataForm2'),'showEle',false);
					this.src = imgFileName(this,'plusbox');
				}
				//addClass(this,'hideEle',true);
				//changeEleBg(imgArr1,this)
				
				return false;
			}
		}
	}
	for(var i = 0; i < imgArr1.length; i++){
		if(imgArr2[i].className="downChev"){
			imgArr2[i].onclick=function(){
				if(copyDiv.className.indexOf('showEle') == -1){
					addClass(copyDiv,'showEle',true);
					this.src = imgFileName(this,'minusbox');
				}else{
					addClass(copyDiv,'showEle',false);	
					this.src = imgFileName(this,'plusbox');
				}
				return false;
			}
		}
	}
}

/* Slide show functions for car detail pics */
var thmbIndex = 0;
var slidesIntvId = null; //setinterval id for slide show
var allSlides = false; // var to indicate if all slides have been loaded
var lrgImgArr = new Array(); // Array holds all img objects to be loaded
var loadMsg; // loading message object
function slideShow(){
	var slideBtn = document.getElementById('slideBtn');
	var stillBtn = document.getElementById('stillBtn');
	var btnsArr = new Array(stillBtn,slideBtn);
	//var thmbsArr = document.getElementById('carDetThmbs').getElementsByTagName('img');
	if(slideBtn)
	{
		slideBtn.onclick = function(){
			//alert(allSlides);
			if(!slidesIntvId)
			{		
				loadSlides();
				changeImgArr(btnsArr,this);
			}
			else
			{
				clearInterval(slidesIntvId);
				slidesIntvId = null;
				changeImgArr(btnsArr,stillBtn);
			}
			
		}
		stillBtn.onclick = function(){
			//alert(clearInterval(slidesIntvId));
			
			if(slidesIntvId){
				clearInterval(slidesIntvId);
				slidesIntvId = null;
			}
			changeImgArr(btnsArr,this);
		}
	}	
}
function loadSlides(){
		var thmbsArr = document.getElementById('carDetThmbs').getElementsByTagName('img');
		for(var i =0 ; i < thmbsArr.length; i++){// preload thumbs large versions
			
			var imgObj = new Image(); // obj for normal sized images
			var lrgImg = new Image(); // obj for largest sized images
			imgObj.src =thmbsArr[i].src.replace( '29x', '300x' );//e.g thmb_filename.jpg becomes lrg_filename.jpg
			lrgImgArr.push(imgObj);
			lrgImg.src =imgObj.src.replace( '300x', '470x' );//e.g lrg_filename.jpg becomes lrg_filename_lrg.jpg
			//alert(imgObj.src + imgObj.width+ imgObj.complete);
			imgObj.onerror=function(){
				//alert('no file = ' +imgObj.src);
			}
			lrgImgArr.push(lrgImg);
			//alert(lrgImg.src + lrgImg.readyState + ' / ' + imgObj.src + imgObj.readyState);
		}
		slidesIntvId = setInterval ( "changeSlides()", 2000 );
}
function checkProgress(){
	var divMsg = document.createElement('div');
	var msgTxt = 'Loading images please wait ...';
	divMsg.setAttribute('id','loadMsg');
	divMsg.innerHTML = msgTxt;
	loadMsg = document.getElementById('carDetThmbs').appendChild(divMsg);
	for(var i =0 ; i < lrgImgArr.length; i++){
	//	alert(lrgImgArr[i].src+' '+lrgImgArr[i].width+' '+lrgImgArr[i].height+lrgImgArr[i].complete);// test for width rather than img.complete
		if(lrgImgArr[i].complete){//tests for image in cache
			//alert(lrgImgArr[i].complete);
		}
		lrgImgArr[i].onerror=function(){
			//alert(lrgImgArr[i].src+' not found');	
		}
		if(i == lrgImgArr.length -1){// if last obj in array
			if(lrgImgArr[i].complete){//tests for image in cache
				if(loadMsg){
						document.getElementById('carDetThmbs').removeChild(loadMsg);
				}
				allSlides = true;
			}else{
				lrgImgArr[i].onload=function(){
					allSlides = true;
					if(loadMsg){
						document.getElementById('carDetThmbs').removeChild(loadMsg);
					}
				}
			}
		}
	}	
}
function changeSlides(){
	var thmbsArr = document.getElementById('carDetThmbs').getElementsByTagName('img');
	 	if(allSlides == true){
			var medImgSrc = thmbsArr[thmbIndex].src.replace('29x', '300x');
			if(colsMode == 'resMed'){//if result column is set to medium width, therefore medium pic is used
				document.getElementById('carDetImg').src = thmbsArr[thmbIndex].src.replace('29x', '300x');
			}else{
				document.getElementById('carDetImgLrg').src = thmbsArr[thmbIndex].src.replace('29x', '470x');
			}
			if(thmbIndex < (thmbsArr.length - 1)){
				thmbIndex += 1;
			}else{
				thmbIndex = 0;
			}
		}else{
			checkProgress();
		}
}
/*function setThumbLinks(){
	var thmbsArr = document.getElementById('carDetThmbs').getElementsByTagName('img');
	for(var i = 0; i < thmbsArr.length; i++){
		thmbsArr[i].onclick = function(){
			alert(imgFileName(this,'lrg'));
		}
	}
	
}*/
function iniResults(){ /* initialise results functions for onload handler */
	if(document.getElementById('resultsPage'))
	{
		//setThumbLinks();
		//widenLink();
		setResLinks();
		resDisplay();
		slideShow();
		//expBoxLinks();
	}
}