var rotatorDiv;
var items;
var timer;

var isIE;
var loadingSprite;

function onPageReady(){
	isIE = (navigator.appName == "Microsoft Internet Explorer");
	rotatorDiv = document.getElementById("rotator");
	
	document.getElementById("rNav").style.display="block";
	
	if(!isIE){
		document.getElementById("rNav").style.opacity = 0;
		document.getElementById("caption").style.opacity = 0;
	}else{
		document.getElementById("rNav").style.filters = "alpha(opacity=0)";
		document.getElementById("caption").style.filters = "alpha(opacity=0)";
	}
	
	if(items) var rotator = new Rotator(items, "display", "caption", "rNavButtons", "leftNav", "rightNav","rNav", true, 10, (document.getElementById("zoom") != null));
}

function Rotator(dataItems, displayName, captionsName, buttonsName, leftName, rightName,navHolder ,autostart, slideDuration, doIncludeZoom){
	this.data = dataItems;
	this.displayDiv = document.getElementById(displayName);
	this.displayDiv.innerHTML = "<img id='loadingImg' src='/images/loading.gif' />";
	
	this.captionDiv = document.getElementById(captionsName);
	this.buttonsDiv = document.getElementById(buttonsName);
	this.navHolderDiv = document.getElementById(navHolder);
	
	this.btnLeft = document.getElementById(leftName);
	this.btnRight = document.getElementById(rightName);
	
	this.currentIndex;
	this.autostart = autostart;
	this.timer;
	this.duration = slideDuration;
	this.inTransition = false;
	this.includeZoom = doIncludeZoom;
	
	this.imageLoader;
	this.currentLoadIndex;
	
	this.init = function(){
		this.currentIndex = 0;
		//this.showCurrent(this.data[this.currentIndex]);
		
		if(this.data.length > 1){
			this.buildNav();
			this.activateNav();
			if(!isIE){
				this.navHolderDiv.style.opacity = 1;
			}else{
				this.navHolderDiv.style.filters = "alpha(opacity=100)";
			}
			this.setNavButtonStates();
			
			var thisObj = this;
			this.btnLeft.onclick = function(){ thisObj.stopShow(); thisObj.rotatePrevNext(-1); }
			this.btnRight.onclick = function(){ thisObj.stopShow(); thisObj.rotatePrevNext(1); }	
		}else{
			this.btnLeft.style.visibility = "hidden";
			this.btnRight.style.visibility = "hidden";
			this.buttonsDiv.style.visibility = "hidden";
		}
		
		this.imageLoader = new ImageLoader();
		this.currentLoadIndex = 0;
		var imgPath = this.getCurrentImage(this.data[this.currentLoadIndex]);
		if(imgPath != null){
			this.imageLoader.setImage(imgPath, {scope:this, func:"onImgLoadComplete"});
		}else{
			this.onImgLoadComplete();
		}
		//if(this.autostart){ this.startSlideShow(); }
	}
	
	this.onImgLoadComplete = function(){
		if(this.currentLoadIndex == this.currentIndex){
			this.showCurrent(this.data[this.currentIndex]);
			if(this.autostart) this.startSlideShow();
		}
		
		this.currentLoadIndex ++;
		if(this.currentLoadIndex < this.data.length - 1){
			var imgPath = this.getCurrentImage(this.data[this.currentLoadIndex]);
			if(imgPath != null){
				this.imageLoader.setImage(imgPath, {scope:this, func:"onImgLoadComplete"});
			}else{
				this.onImgLoadComplete();
			}
		}
	}
	
	
	this.getCurrentImage = function(dataObj){
		//imageurl:"",custom_imageurl:"/images/tempFeature2.png",  yt_url:""
		if(dataObj.imageurl != null && dataObj.imageurl != ""){
			return dataObj.imageurl;
		}else if(dataObj.custom_imageurl != null && dataObj.custom_imageurl != ""){
			return dataObj.custom_imageurl;
		}
		return null;
	}
	
	this.startSlideShow = function(){
		//this.timer = setInterval()
		if(this.data.length > 1){
			var thisObj = this;
			this.timer = setInterval(function() { thisObj.rotatePrevNext(1); }, this.duration * 1000);
		}
	}
	
	this.stopShow = function(){
		clearInterval(this.timer);
	}
	
	this.buildNav = function(){
		var l = this.data.length;
		var htmlStr = "";
		for(var i=0;i<l;i++){
			htmlStr += "<a href='javascript:void(0);' id='item"+i+"' ><img src='/images/rotatorDot.png' alt='Feature' /></a>";
			this.data[i].refID = "item"+i;
			//this.data[i].zoomID = "zoomedImage"+i;
			//ypGallery.add({ gallery: "display", id: this.data[i].zoomID, type: 'photo', media: 'http://prototype.dev/images/prototype/gallery/10951_rdax_700x457.JPG', width: '700', height: '457', alternate: 'Underwater picture with some fish and stuff.', caption: 'Under water', credits: '' });
		}
	
		this.buttonsDiv.innerHTML = htmlStr;
	}
	
	this.activateNav = function(){
		var l = this.data.length;
		var thisObj = this;
		for(var i=0;i<l;i++){ 
			/*
			imageurl_large
			if(this.includeZoom){
				var type = 'photo';
				if(this.data[i].yt_url && this.data[i].yt_url != "") type = 'youTube';
				ypGallery.add({ gallery: "display", id: 'zoomedImage', type: 'photo', media: 'http://prototype.dev/images/prototype/gallery/10951_rdax_700x457.JPG', width: '700', height: '457', alternate: 'Underwater picture with some fish and stuff.', caption: 'Under water', credits: '' });
			}
			*/
			document.getElementById(this.data[i].refID).onclick = function(){ thisObj.onSelectItem(this); } 	
		}
	}
	
	this.setNavButtonStates = function(){
		var l = this.data.length;
		for(var i=0;i<l;i++){
			if(i != this.currentIndex){
				document.getElementById(this.data[i].refID).innerHTML = "<img src='/images/rotatorDot.png' alt='Feature' />";
			}else{
				document.getElementById(this.data[i].refID).innerHTML = "<img src='/images/rotatorDotSelected.png' alt='Selected feature' />";
			}
		}
	}
	
	this.onSelectItem = function(target){
		if(!this.inTransition){
			var currentData = getItemFromArrayByProp(this.data, target.id, "refID");
			if(currentData != null && currentData != this.currentIndex){
				this.stopShow();
				this.currentIndex = currentData;
				this.setNavButtonStates();
				this.hideCurrent();
			}
		}
	}
	
	this.rotatePrevNext = function(dir){
		if(!this.inTransition){
			if(dir > 0){
				if(this.currentIndex < this.data.length - 1){
					this.currentIndex++;
				}else{
					this.currentIndex = 0;
				}
			}else{
				if(this.currentIndex > 0){
					this.currentIndex--;
				}else{
					this.currentIndex = this.data.length - 1;
				}
			}
		
			this.setNavButtonStates();
			this.hideCurrent();
		}
		
	}
	
	this.hideCurrent = function(){
		this.inTransition = true;
		new Tween(this.displayDiv, 500, {opacity:0}, {delay:50 });
		new Tween(this.captionDiv, 500, {opacity:0}, {delay:50, scope:this, completeListener:"onHideSlideComplete" });
	}
	
	this.showCurrent = function(currentObject){
		var htmlStr = "";
					
					
		if(this.includeZoom){
			var expandStr = "";
			var id=currentObject.zoomID;
			
			if(currentObject.imageurl && currentObject.imageurl != ""){
				expandStr = "<a class='expand' href='#' onclick='ypGallery.view({ gallery:\"display\", id:\""+id+"\" }); return false;' style='display: block'><img src='/images/featureExpander.png' alt='Expand feature' /></a>";
				htmlStr = "<div id='featureItem' class='object'>"+expandStr+"<img src='"+currentObject.imageurl+"' /></div>";
			}else if(currentObject.custom_imageurl && currentObject.custom_imageurl != ""){
				expandStr = "<a class='expand' href='#' onclick='ypGallery.view({ gallery:\"display\", id:\""+id+"\" }); return false;' style='display: block'><img src='/images/featureExpander.png' alt='Expand feature' /></a>";
				htmlStr = "<div id='featureItem' class='custom'>"+expandStr+"<img src='"+currentObject.custom_imageurl+"' /></div>"
			}else if(currentObject.yt_url && currentObject.yt_url != ""){
				expandStr = "<a class='expand' href='#' onclick='ypGallery.view({ gallery:\"display\", id:\""+id+"\" }); return false;' style='display: block'><img src='/images/featureExpander.png' alt='Expand feature' /></a>";
				htmlStr = "<div id='featureItem' class='object'>"+expandStr+"<iframe title='You Tube video player' width='490' height='297' src='"+currentObject.yt_url+"?wmode=transparent' frameBorder='0' wmode='Opaque' ></iframe></div>";
			}else{
			//this is a problem!
			}
		}else{
			if(currentObject.imageurl && currentObject.imageurl != ""){
				htmlStr = "<div class='object'><img src='"+currentObject.imageurl+"' /></div>";
			}else if(currentObject.custom_imageurl && currentObject.custom_imageurl != ""){
				htmlStr = "<div class='custom'><img src='"+currentObject.custom_imageurl+"' /></div>"
			}else if(currentObject.yt_url && currentObject.yt_url != ""){
				htmlStr = "<div class='object'><iframe title='You Tube video player' width='490' height='297' src='"+currentObject.yt_url+"?wmode=transparent' frameBorder='0' wmode='Opaque'></iframe></div>";
			}else{
			//this is a problem!
			}
		}
		
		this.displayDiv.innerHTML = htmlStr;
		this.captionDiv.innerHTML = currentObject.caption+(typeof currentObject.linkurl != "undefined" && currentObject.linkurl ? " <a href='"+currentObject.linkurl+"'>Read more</a>" : "");
		
		//alert(this.captionDiv.innerHTML);

		new Tween(this.displayDiv, 500, {opacity:1}, {delay:100, scope:this, completeListener:"onShowSlideComplete"  });
		new Tween(this.captionDiv, 500, {opacity:1}, {delay:400});	
	}
	
	this.onShowSlideComplete = function(){
		this.inTransition = false;
	}
	
	this.onHideSlideComplete = function(){
		this.showCurrent(this.data[this.currentIndex]);
	}
	
	this.init();
}

function getItemFromArrayByProp(array,obj,prop){
	var l = array.length;
	for(var i=0;i<l;i++){
		if(array[i][prop] == obj){
			return i;
		}
	}
	return null;
}