/*
	Copyright (c) 2006, Pikapet.com. All rights reserved.
*/
	
var PikaShow = new Object();

PikaShow.Initialize = function(container, pets, nameContainer){
	
	var petList = new PikaShow.data.PetList(pets);
	var nameZone = new PikaShow.dom.NameArea(nameContainer);
	var slideshow = new PikaShow.dom.SlideShow(container, petList, nameZone);
	slideshow.start();
	
}

PikaShow.data = new Object();

PikaShow.data.Pet = function(petInfo){
	this.init(petInfo);
}

PikaShow.data.Pet.prototype = {
	
	id: 0,
	name: "",
	src: "",
	caption: "",
	location: "",
	_domImage: null,
	
	init: function(petInfo){
		this.id = petInfo.pet_id;
		this.name = petInfo.name;	
		this.src = domain + "resources/uploads/" + petInfo.picture;	
		this.location = petInfo.location;
		this.caption = petInfo.caption;	
	},
	
	preload: function(){
		this._domImage = new Image();
		this._domImage.src = this.src;
	}
	
}


PikaShow.data.PetList = function(petInfo){
	this.init(petInfo);
}

PikaShow.data.PetList.prototype = {
	
	pets: null,
	currentIndex: 0,
	nextReady: false,
	length: 0,
	
	init: function(petInfo){
		this.pets = new Array();
		
		for(var i=0; i < petInfo.length; i++){
			this.pets[i] = new PikaShow.data.Pet(petInfo[i]);
		}
		
		this.length = petInfo.length;
		
	},
	
	addPet: function(pet){
		this.pets[this.pets.length] = pet;		
	},
	
	getPet: function(index){
		return this.pets[index];
	},
	
	getNextIndex: function(){
		
		this.currentIndex = (this.currentIndex+1)%this.pets.length;
		return this.currentIndex;
		
	},
	
	prepareNext: function(){
		
		var nextPet =  this.pets[(this.currentIndex+1)%this.pets.length];
		nextPet.preload();
		
	}
	
}


PikaShow.dom = new Object();


PikaShow.dom.SlideShow = function(container, petList, nameArea){
	this.init(container, petList, nameArea);
}

PikaShow.dom.SlideShow.prototype = {
	
	petList: null,
	container: null,
	_thread: null,
	boxes: null,
	zIndex: 15000,
	_lastChangeTime: 0,
	_resumeInterval: 0,
	frequency: 4000,
	_resumingThread: 0,
	nameArea:null, 
	
	init: function(container, petList, nameArea){
		
		this.boxes = new Array();
		this.petList = petList;
		this.container = container;	
		petList.prepareNext();
		this.nameArea = nameArea;
		
		for(var i=0; i < petList.length; i++){
			this.boxes[i] = new PikaShow.dom.PictureBox(petList.getPet(i), this.container);
		}
		
		var self = this;
		this.container.onmouseover = function(){self._pauseThread();}
		this.container.onmouseout = function(){self._resumeThread();}
		this.container.onclick = function(){self._visitLink()};
	},
	
	start: function(){
		this.boxes[this.petList.currentIndex].show(this.zIndex--);
		this.nameArea.write(this.petList.getPet(this.petList.currentIndex));
		this._lastChangeTime = (new Date()).getTime();
		var self = this;
		this._startThread();
		this.petList.prepareNext();
	},
	
	changeImage: function(){
		this.boxes[this.petList.currentIndex].hide();
		var next = this.petList.getNextIndex();
		this.boxes[next].show(this.zIndex--);
		this.nameArea.write(this.petList.getPet(this.petList.currentIndex));
		this.petList.prepareNext();
		this._lastChangeTime = (new Date()).getTime();
	},
	
	_pauseThread: function(){
		this._resumeInterval = (new Date()).getTime() - this._lastChangeTime;
		clearInterval(this._thread);
		this._thread = 0;
		clearTimeout(this._resumingThread);
	},
	
	_resumeThread: function(){
		if(this._resumeInterval > 0){
			var self = this;
			this._resumingThread = setTimeout(function(){self.changeImage(); self._startThread()}, this.frequency - this._resumeInterval);
		}
		this._resumeInterval = 0;		
	},
	
	_startThread: function(){
		var self = this;
		this._thread = setInterval(function(){self.changeImage()}, this.frequency);
	},
	
	_visitLink: function(){
		location.href = domain + "pet/view/" + this.petList.getPet(this.petList.currentIndex).id;	
	}
	
}


PikaShow.dom.PictureBox = function(pet, container){
	this.init(pet, container);
}

PikaShow.dom.PictureBox.prototype = {

	domObject: null,
	caption: null,
	pet: null,
	_domImage: null,
	_opacity: 1,
	_thread: null,	
	
	init: function(pet, container){
		this.pet = pet;
		this.domObject = this._createDomObject();
		container.appendChild(this.domObject);
		this.caption = new PikaShow.dom.Caption(this.pet.caption, container);
	},
	
	show: function(zIndex){
		if(!this._domImage){
			this._domImage = this._createImage();
		}

		this.domObject.style.zIndex = zIndex;
		this.domObject.style.visibility = "";
		//this.caption.show();
		
	},
	
	_augmentOpacity: function(){
		this._opacity -= 0.1;
		this._setOpacity(this._opacity);
		if(this._opacity <= 0.01){
			clearInterval(this._thread);
			this._recreateDomObject();
		}
	},
	
	_setOpacity: function(opacity) {//Thanks to moo.fx
		if (window.ActiveXObject) this.domObject.style.filter = "alpha(opacity=" + opacity*100 + ")";
		this.domObject.style.opacity = opacity;
		if (opacity == 0) this.domObject.style.visibility = "hidden";
	},
	
	hide: function(){

		this._augmentOpacity();
		var self = this;
		this._thread = setInterval(function(){self._augmentOpacity()}, 30);
		this.caption.hide();
	},
	
	_createDomObject: function(){
		var div = document.createElement("div");
			div.style.position = "absolute";
			div.style.top = "0px";
			div.style.visibility = "hidden";
			div.style.backgroundColor = "white";
			div.style.height = "136";
			div.style.width = "180";
		return div;
	},
	
	_recreateDomObject: function(){
		var parent = this.domObject.parentNode;
		parent.removeChild(this.domObject);		
		this.domObject = this._createDomObject();
		parent.appendChild(this.domObject);
		this._domImage = null;
		this._opacity = 1;
	},
	
	_createImage: function(){
		
		var image = new Image();
		image.src = this.pet.src;
		this.domObject.appendChild(image);
		return image;
		
	}
	
	
}

PikaShow.dom.Caption = function(text, container){
	this.init(text, container);	
}

PikaShow.dom.Caption.prototype = {
	
	domCaption: null,
	_opacity: 0,
	_thread: 0,
	
	init: function(text, container){
		this.domCaption = this._createCaption(text);
		document.body.appendChild(this.domCaption);
		this.positionate(container);
			
	},
	
	_createCaption:  function(text){
		
		var caption = text || ". . .";
	
		var html = 
				'<table border="0" cellpadding="0" cellspacing="0">'+
				  '<tr><td colspan="3"><img name="tooltip_top" src="/resources/images/tool/tarriba.gif" height="11" border="0"></td></tr>'+
				  '<tr><td width="6" background="/resources/images/tool/tizq.gif">&nbsp;</td>' + 
						'<td background="/resources/images/tool/tback.gif" width="150" height="35"><div width="100%"  id="encourage_box" class="encourageReal" style="font-size:15px;font-weight:bold">'+
							caption + 
						'</div></td>'+
				   '<td width="6" background="/resources/images/tool/tder.gif">&nbsp;</td>'+
				  '</tr>'+
				  '<tr><td colspan="3" ><img name="tooltip_bottom" src="/resources/images/tool/taba.gif" height="17" border="0" ></td></tr>'+
				'</table>';
		
		var div = document.createElement('div');
		div.style.visibility = "hidden";
		div.style.position = "absolute";
		div.innerHTML = html;
		
		return div;
		
	},
	
	positionate: function(container){
		var pos = Position.cumulativeOffset(container);	
		this.domCaption.style.left = pos[0] + 10 + "px";
		this.domCaption.style.top = pos[1] - this.domCaption.offsetHeight -5 + "px";
	},

	_reduceOpacity: function(){
		this._opacity += 0.1;
		this._setOpacity(this._opacity);
		if(this._opacity >= 1){
			clearInterval(this._thread);
		}
	},
	
	_setOpacity: function(opacity) {//Thanks to moo.fx
		if (window.ActiveXObject) this.domCaption.style.filter = "alpha(opacity=" + opacity*100 + ")";
		this.domCaption.style.opacity = opacity;
		if (opacity == 0) this.domCaption.style.visibility = "hidden";
		else this.domCaption.style.visibility = "visible"
	},
	
	show: function(){
		this.domCaption.style.visibility = "";
		return;
		var self = this;
		setTimeout(function(){self._startShowing()}, 1500);
	},
	
	_startShowing: function(){
		this._reduceOpacity();
		var self = this;
		this._thread = setInterval(function(){self._reduceOpacity()}, 30);
	},
	
	hide: function(){
		this.domCaption.style.visibility = "hidden";
		return;
		this._augmentOpacity();
		var self = this;
		this._thread = setInterval(function(){self._augmentOpacity()}, 30);
	},

	_augmentOpacity: function(){
		this._opacity -= 0.1;
		this._setOpacity(this._opacity);
		if(this._opacity <= 0.01){
			clearInterval(this._thread);
			this.domCaption.style.visibility = "hidden";
		}
	}
	
}

PikaShow.dom.NameArea = function(area){
	this.init(area);
}

PikaShow.dom.NameArea.prototype = {
	
	container: null,
	
	init: function(area){
		this.container = area;
				
	},
	
	write: function(pet){
		var html  = "<a href='" + domain + "pet/view/" +pet.id+ "'>"+pet.name+"</a><br>";
		html += pet.location ? "<span class='note'>"+pet.location+"</span>" : "<br>";
		this.container.innerHTML = html;
	}
	
}