//--------------------------- Developed by AAN all rights reserved
//--------------------------------- ver 2.7
/*
2.0 - initial new version with its own namespace
2.1 [03/29/11] - added check and dynamic load of ajax module
2.2 [04/01/11] - added img height adjustment in displayPic() to fix different height images issue
2.3 [05/12/11] - added requestString var to be able to control request data
2.4 [07/20/11] - fixed autoloading of classes.js
2.5 [08/11/11] - fixed autoloading of showSlideshow(), fixed preloading issue when smoothTransition=false
2.6 [09/26/11] - fixed flickering issue with some browsers, changed popup default html to include progress bar and remove slideback from html
2.7 [11/21/11] - fixed PICNUMBER to have Gallery namespace
*/
var Gallery = new function(){
	var galleryReq;
	var slideshow_loaded=false;
	var currentCarImages=new Array();
	var current_img_id=0;
	var maxpicfitted=21;
	var curpicoffset=new Array(0,this.maxpicfitted);
	var currentCID=0;
	var currentCIDloaded=false;
	var pagerw=25;//multiplier for offset based on current style
	var effect;
	//var slideshowHTML='<div id="slideholder" class="slideholder"><div class="content group"><div class="topinfo"><p id="carname_container" class="car-name"></p><p class="car-name-lnks"><a href="javascript:;" onclick="Gallery.closeSlideshow()">Close Gallery</a></p></div><!-- .topinfo --><br class="clean" /><div class="image_slide"><div class="loader"><img id="image_slide" width="640" class="largethumbsimg" /></div></div><div id="showlargeimages"><div class="sll"><a href="javascript:;" onclick="Gallery.prevPic()">&lt;&lt;PREV</a></div><div id="imgbtns_holder"><div id="imgbtns_container" align="center"></div></div><div class="slr"><a href="javascript:;" onclick="Gallery.nextPic()">NEXT&gt;&gt;</a></div></div><!-- #showlargeimages --></div></div>';
	var slideshowHTML='<div id="slideholder" class="slideholder"><div class="preloader" id="preloader"><div><img src="images/progress-bar.jpg" width="500" height="15" id="pregress_bar" /></div></div><div class="content group" style="display:none" id="slide_content"><div class="topinfo"><p id="carname_container" class="car-name"></p><p class="car-name-lnks"><a href="javascript:;" onclick="Gallery.closeSlideshow()">Close Gallery</a></p></div><ins></ins><div class="image_slide"><div class="loader"><a href="javascript:;" onclick="Gallery.nextPic()"><img id="image_slide" width="1000" class="largethumbsimg" style="z-index:1" /></a></div></div><div id="showlargeimages"><div class="showlargeimages"><div class="sll"><a href="javascript:;" onclick="Gallery.prevPic()">&lt;&lt;PREV</a></div><div id="imgbtns_holder"><div id="imgbtns_container" align="center"></div></div><div class="slr"><a href="javascript:;" onclick="Gallery.nextPic()">NEXT&gt;&gt;</a></div></div></div></div></div>';
	
	this.hasPreloader=false;//will show if preloader elements are found
	this.Preloader={
		progressBar:null,
		width:0,
		increment:0,
		position:0,
		effect:null,
		getWidth: function(){
			return this.position*this.increment;
		}
	};
	this.hasPageNumbers=true;//property: display page numbers
	this.smoothTransition=true;//property: use mootols for smooth effects
	this.PICNUMBER=0;
	this.bottomImg;
	this.requestString="module=vigallery&cid=";
	
	//--- private functions
	function loadSlideShow(){
		if(typeof(mAJAXRequest)=='undefined'){//dynamically load classes script if it is not defined yet	
			var ajXscript=document.createElement("SCRIPT");
			ajXscript.type="text/javascript";
			ajXscript.src="/scripts/classes.js";
			//ajXscript.onload=Gallery.showSlideshow;
			document.getElementsByTagName("body").item(0).appendChild(ajXscript);
			setTimeout("Gallery.showSlideshow()",1000);//rerun after a second to give it some time to load
			return false;
		}
		galleryReq=new mAJAXRequest();
		//---------------------------------------------------------[create gallery container
		var gContainerDIV=document.createElement("div");
		gContainerDIV.setAttribute("id","slideshow");
		gContainerDIV.style.display="none";
		gContainerDIV.innerHTML='<div id="slideback" class="slideback" onclick="Gallery.closeSlideshow()"><iframe class="ifrgx"></iframe></div>'+slideshowHTML;
		document.getElementsByTagName("body").item(0).appendChild(gContainerDIV);
		
		Gallery.Preloader.progressBar=document.getElementById("pregress_bar");
		if(Gallery.Preloader.progressBar&&typeof(Gallery.Preloader.progressBar)!="undefined"){
			//alert(Gallery.Preloader.progressBar.width+"|"+Gallery.Preloader.progressBar.style.width+"|"+Gallery.Preloader.progressBar.attributes.getNamedItem("width").value);
			Gallery.Preloader.width=Gallery.Preloader.progressBar.attributes.getNamedItem("width").value;//only this works in all browsers
			Gallery.Preloader.progressBar.style.width="0px";
			Gallery.hasPreloader=true;
			if(Gallery.smoothTransition) Gallery.Preloader.effect=new Fx.Morph(Gallery.Preloader.progressBar,{duration: 100, transition: Fx.Transitions.linear});
		}
		//gContainerDIV.onclick=Gallery.onGReqError;
		//-----------------------------------------
		galleryReq.setRequestLocation("isapi_xml.php");
		galleryReq.setResponseType('xml');
		galleryReq.assignParser(Gallery.galleryParser);
		galleryReq.assignErrorHandler(Gallery.onGReqError);
		//-----------------------------------------
		slideshow_loaded=true;
		return true;
	}
	function movetoPic(pn){
		var s=Math.floor(pn/(maxpicfitted+1));//-get offset section number. (mpf+1) is to get s=0 if on the border
		curpicoffset[0]=s*maxpicfitted;
		curpicoffset[1]=maxpicfitted*(s+1);
		document.getElementById("imgbtns_container").style.left="-"+(curpicoffset[0]*pagerw)+"px";
		Gallery.displayPic(pn);
	}
	function picLoaded(){
		if(Gallery.hasPreloader){
			Gallery.Preloader.position++;
			if(Gallery.smoothTransition) Gallery.Preloader.effect.start({"width":Gallery.Preloader.getWidth()+"px"});
			else Gallery.Preloader.progressBar.style.width=Gallery.Preloader.getWidth()+"px";
			if(Gallery.Preloader.position==currentCarImages.length){
				document.getElementById("preloader").style.display="none";
				if(Gallery.smoothTransition){
					var content=new Fx.Morph(document.getElementById("slide_content"),{duration: 1000, transition: Fx.Transitions.linear});
					content.set({"opacity":0,"display":"block"});
					content.start({"opacity":1});
				}else document.getElementById("slide_content").style.display="block";
			}
		}
	}
	//--- public functions
	
	this.onGReqError=function(){
		alert("ERROR");
	}
	this.galleryParser=function(){
		var resp=galleryReq.getResponse();
		var gimages=resp.getElementsByTagName("IMG");
		if(gimages.length>0){
			currentCarImages=new Array();//<-clear old images
			if(resp.getElementsByTagName("CARNAME")[0].childNodes[0])
				document.getElementById("carname_container").innerHTML=resp.getElementsByTagName("CARNAME")[0].childNodes[0].nodeValue;
			var slideback=document.getElementById("slideback");
			slideback.style.width=document.documentElement.scrollWidth+"px";
			slideback.style.height=document.documentElement.scrollHeight+"px";
			
			document.getElementById("slideholder").style.top=document.documentElement.scrollTop+"px";
			document.getElementById("slideshow").style.display="block";
			//----------------------------------------------------------------------------------------
			var page_links='';
			if(Gallery.hasPreloader){
				Gallery.Preloader.increment=parseInt(Gallery.Preloader.width/gimages.length);
			}
			for(var i=0;i<gimages.length;i++){
				if(Gallery.hasPageNumbers){
					page_links+='<a id="page'+i+'" href="javascript:;" onclick="Gallery.displayPic('+i+')"';
					if(i==0) page_links+=' class="selected"';
					page_links+='>'+(i+1)+'</a>';
				}
				//---------------
				currentCarImages[i]=new Image();
				currentCarImages[i].onload=picLoaded;
				currentCarImages[i].src=gimages[i].childNodes[0].nodeValue;
			}
			var imgbtns_container=document.getElementById("imgbtns_container");
			imgbtns_container.innerHTML=page_links;
			imgbtns_container.style.width=(pagerw+5)*currentCarImages.length+"px";
			document.getElementById("image_slide").src=currentCarImages[0].src;
			current_img_id=0;
			currentCIDloaded=true;
			if(Gallery.PICNUMBER>0) movetoPic(Gallery.PICNUMBER);
		}
	}
	this.setCustomHTML=function(html){
		slideshowHTML=html;
		//if(arguments.length==2) buildButtons=arguments[1];
	}
	this.showSlideshow=function(cid){
		if(!slideshow_loaded){
			if(!loadSlideShow()){
				currentCID=cid;//save it for js loading
				return;
			}else{
				if(arguments.length==0){//restore it after js loading
					cid=currentCID;
					currentCID=0;
				}
			}
		}
		if(cid==currentCID){
			if(currentCIDloaded){//display same screen if already loaded, so if no images then we won't request it again
				document.getElementById("slideholder").style.top=document.documentElement.scrollTop+"px";
				document.getElementById("slideshow").style.display="block";
				if(Gallery.PICNUMBER>0) movetoPic(Gallery.PICNUMBER);
			}
		}else{
			curpicoffset=new Array(0,maxpicfitted);
			current_img_id=0;
			currentCIDloaded=false;
			currentCID=cid;
			document.getElementById("imgbtns_container").style.left="0px";
			document.getElementById("image_slide").src="";
			galleryReq.setData(Gallery.requestString+cid);
			galleryReq.send();
		}
	}
	this.nextPic=function(){
		var nextimgid=current_img_id;
		if(++nextimgid>=currentCarImages.length)
			nextimgid=0;
		if(nextimgid==curpicoffset[1]||nextimgid==0){
			curpicoffset[0]=nextimgid;//+=maxpicfitted;<-left offfset
			if(nextimgid==0) curpicoffset[1]=maxpicfitted;//<-right offset
			else curpicoffset[1]+=maxpicfitted;
			document.getElementById("imgbtns_container").style.left="-"+(curpicoffset[0]*pagerw)+"px";
		}
		this.displayPic(nextimgid);
	}
	this.prevPic=function(){
		var overlap=false;
		var nextimgid=current_img_id;
		if(--nextimgid<0){
			nextimgid=currentCarImages.length-1;
			if(nextimgid>curpicoffset[1])
				overlap=true;
		}
		if(nextimgid<curpicoffset[0]||overlap){
			if(overlap){
				curpicoffset[0]=parseInt(currentCarImages.length/maxpicfitted)*maxpicfitted-1;
				curpicoffset[1]=curpicoffset[0]+maxpicfitted;
			}else{
				curpicoffset[0]-=maxpicfitted;
				curpicoffset[1]-=maxpicfitted;
				if(curpicoffset[0]<0){//correct left shift if less then 0
					curpicoffset[0]=0;
					curpicoffset[1]=maxpicfitted;//also correct next right shift pic num
				}
			}
			document.getElementById("imgbtns_container").style.left="-"+(curpicoffset[0]*pagerw)+"px";
		}
		this.displayPic(nextimgid);
	}
	this.displayPic=function(imgid){
		if(imgid!=current_img_id){
			var img=document.getElementById("image_slide");
			document.getElementById("page"+current_img_id).className="";
			document.getElementById("page"+imgid).className="selected";
			current_img_id=imgid;
			if(Gallery.smoothTransition){
				if(!Gallery.bottomImg){
					Gallery.bottomImg=document.createElement("IMG");
					if(Gallery.bottomImg.style){
						Gallery.bottomImg.style.position="absolute";
						Gallery.bottomImg.style.left="0px";
						Gallery.bottomImg.style.top="0px";
						Gallery.bottomImg.style.zIndex=6;
					}else Gallery.bottomImg.setAttribute("style","position:absolute;left:0px;top:0px;z-index:6");
					Gallery.bottomImg.style.width=img.width+"px";
					//Gallery.bottomImg.style.height=img.height+"px";
					img.parentNode.appendChild(Gallery.bottomImg);
					//var bi=bottomImg;//<-assaign a private ref to public bottomImg so we can use it inside Fx.Morph
					//																			parseInt(interval/5)
					effect=new Fx.Morph(Gallery.bottomImg,{duration: 600, transition: Fx.Transitions.linear,
						onComplete: function(){
							Gallery.bottomImg.src=currentCarImages[current_img_id].src;
							//this.set({"opacity":1});
						}});
					Gallery.bottomImg.src=currentCarImages[0].src;
					//effect.set({"opacity":1});
				}
				effect.set({"opacity":1});//change state before we start transition effect and not after so we get rid of flickering
				img.src=currentCarImages[current_img_id].src;
				Gallery.bottomImg.style.height=img.height+"px";
				effect.start({"opacity":0});
			}else img.src=currentCarImages[current_img_id].src;
		}
	}
	this.closeSlideshow=function(){
		document.getElementById("slideshow").style.display="none";
	}
	this.setNumbersSettings=function(numwidth,maxnumsfit){
		pagerw=numwidth;
		if(arguments.length==2) maxpicfitted=arguments[1];
	}
}