// -----------------------------------------------------------------------------------
//
//	TickerBox v0.1 BETA
//	by Alexandre Marinho - http://www.cuboestudioweb.com/
//	12/18/2007
//
//	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 = 911;
var containerHeight = 200;
var filePrevImage = "images/prev.gif";
var fileNextImage = "images/next.gif";

/****************************************************************/
var photos;
var index = 0;
var countPhotos;
var timeout;
var loaded = 0;


var Ticker = Class.create();

Ticker.prototype = {
	
	initialize: function() {
		//gets all ticker elements
		photos = document.getElementsByClassName('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);
		//Insertion.After(photos[0],"<div id='ticker-loading'></div>");
		
		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(){
					Element.show('comments')
					new Effect.Move('comments', {
						x:0,
						y:-40,
						duration:0.2,
						afterFinishInternal:function(){
							myTicker.unLockButtons();
						}
					});
					timeout = setTimeout(function(){myTicker.hide(false)},5000);
				}
			}
		);
	},
	
	hide: function(prev) {
		this.lockButtons();
		new Effect.Move('comments',{
				x:0,
				y:40,
				duration:0.2,
				afterFinishInternal: function(){
					Element.hide('comments');
					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();
			photos[i].onload = function(){
				loaded++;
				if(loaded == 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);