// -----------------------------------------------------------------------------------
//
//	TickerBox v0.3 BETA
//	by Alexandre Marinho - http://www.cuboestudioweb.com/
//	03/02/2008
//
//	For more information on this script, visit:
//	http://www.cuboestudioweb.com/projects/tickerbox
//
//	Licensed under the The GNU General Public License - http://www.opensource.org/licenses/gpl-license.php
//
//
// -----------------------------------------------------------------------------------

var containerWidth = 665;
var containerHeight = 233;
var filePrevImage = "images/prev.gif";
var fileNextImage = "images/next.gif";

/****************************************************************/
var photos;
var index = 0;
var countPhotos;
var timeout;
var loaded = Array();


var Ticker = Class.create();

Ticker.prototype = {
	
	initialize: function() {
		//gets all ticker elements
		photos = $$('#tickerbox .ticker');
		countPhotos = photos.length;
		this.hideAllPhotos();
		
		//define the dimensions
		$('tickerbox').style.width = containerWidth+'px';
		$('tickerbox').style.height = containerHeight+'px';
		
		var tickerPreLoad = document.createElement("div");
		tickerPreLoad.setAttribute('id','ticker-loading');
		$('tickerbox').appendChild(tickerPreLoad);
		
		var prev = document.createElement("img");
		prev.setAttribute('id','prev');
		prev.setAttribute('src',filePrevImage);
		prev.style.top = '-'+((containerHeight/2)+22.5)+'px';
		setOpacity(prev,20);
		prev.onmouseover = function(){setOpacity($('prev'),100)}
		prev.onmouseout = function(){setOpacity($('prev'),20)}
		$('tickerbox').appendChild(prev);
		
		var next = document.createElement("img");
		next.setAttribute('id','next');
		next.setAttribute('src',fileNextImage);
		next.style.top = '-'+((containerHeight/2)+22.5)+'px';
		next.style.left = (containerWidth-(45*2))+'px';
		setOpacity(next,20);
		next.onmouseover = function(){setOpacity($('next'),100)}
		next.onmouseout = function(){setOpacity($('next'),20)}
		$('tickerbox').appendChild(next);
		
		//create comments element
		var comments = document.createElement("div");
		comments.setAttribute('id','comments');
		$('tickerbox').appendChild(comments);
		setOpacity($('comments'),50);
		//this.show();
	},

	/**
	 * Show the current picture
	 */
	show: function() {
		this.lockButtons();
		$('comments').innerHTML = photos[index].alt;
		new Effect.Appear(photos[index],{
				duration:0.5,
				afterFinishInternal: function(){
					if(photos[index].alt!=""){
						Element.show('comments')
						new Effect.Move('comments', {
							x:0,
							y:-40,
							duration:0.2,
							afterFinishInternal:function(){
								myTicker.unLockButtons();
							}
						});
					}else{
						myTicker.unLockButtons();
					}
					timeout = setTimeout(function(){myTicker.hide(false)},5000);
				}
			}
		);
	},
	
	hide: function(prev) {
		this.lockButtons();
		if(photos[index].alt!=""){
		new Effect.Move('comments',{
			x:0,
			y:40,
			duration:0.2,
			afterFinishInternal: function(){
				Element.hide('comments');
				myTicker.fadePhoto(prev);
			}
		});
		}else{
			myTicker.fadePhoto(prev);
		}
	},
	
	fadePhoto : function(prev){
		new Effect.Fade(photos[index],{
			duration:0.5,
			afterFinishInternal:function(){
				Element.hide(photos[index]);
				if(prev==true)
					index = (index == 0) ? countPhotos-1 : index-1;
				else
					index = (index == countPhotos-1) ? 0 : index+1;
				myTicker.show();
			}
		});
	},
	
	lockButtons: function(){
		$('prev').onclick = function(){}
		$('next').onclick = function(){}
	},
	
	unLockButtons: function(){
		$('prev').onclick = function(){
			clearTimeout(timeout);
			myTicker.hide(true);
		}
		$('next').onclick = function(){
			clearTimeout(timeout);
			myTicker.hide(false);
		}
	},
	
	hideAllPhotos: function() {
		for(i=0;i<photos.length;i++){
			photos[i].hide();
			Event.observe(photos[i],'load',function(){
				loaded.push('loaded');
				if(loaded.length == countPhotos){
					Element.hide('ticker-loading');
					myTicker.show();
				}
			});
			photos[i].style.height = containerHeight+'px';
		}
	}
}

onLoadImage = function(){
	loaded++;
}

setOpacity = function(element, opacity) {
    opacity = (opacity == 100) ? 99.999 : opacity;
    element.style.filter = "alpha(opacity:"+opacity+")";
    element.style.opacity = opacity/100 /*//*/;
}

startTicker = function(){
	if($('tickerbox'))
		myTicker = new Ticker(); 
}
Event.observe(document,"dom:loaded", startTicker);