var js = new Object();

js.stepper = function(start, end, time, options)
{
	this.start = start;
	this.end = end;
	this.time = time;
	this.timeout = 20;
		
		for(prop in options)
		{
			this[prop] = options[prop];
		}
		
	this.init();
}
js.stepper.prototype = {

	init : function()
	{
		this.steps = {
			total : this.time / this.timeout,
			count : 0,
			one : (this.end - this.start) / (this.time / this.timeout)
		}
		
		var that = this;
		this.timer = window.setInterval(function()
		{
			that.step();	
		
		}, this.timeout)
		
	},

	step : function()
	{
		this.steps.count++;
		if(this.steps.count > this.steps.total)
		{
			window.clearInterval(this.timer)
			if(typeof this.onstep == "function")
			{
				this.onstep(this.end);
			}

		} else {
			
			if(typeof this.onstep == "function")
			{
				this.onstep(this.start + (this.steps.count * this.steps.one));
			}
			
		}
		
	}, 
	
	abort : function()
	{
		window.clearInterval(this.timer);
	}

}

var widthExpand = function(element, small, big)
{
	if(typeof element == "string")
	{
		element = document.getElementById(element);
	}
	
	this.small = small;
	this.big = big;
	this.element = element;
	this.width = (parseInt(element.style.width))? parseInt(element.style.width) : 0;
	this.stepper = null;
	this.status = false;
	this.onupdate = null;
}
widthExpand.prototype = {

	widthTo : function(newWidth)
	{
		if(this.stepper) {
			this.stepper.abort();
			delete stepper;
		}
	
		var that = this;
		this.stepper = new js.stepper(this.width, newWidth, 200,
		{ 	onstep : function(value) { 
		
				that.element.style.width = Math.round(value)+"px";
				that.width = value;
				if(typeof that.onupdate == "function")
					that.onupdate(value);
					
			}
		})
		
	},
	
	toggle : function()
	{
		if(this.status == false)
		{
			this.open();
			this.status = true;
			
		} else {
			
			this.close();
			this.status = false;
		}
		
	},

	open : function()
	{
		this.widthTo(this.big);
	},
	
	close : function()
	{
		this.widthTo(this.small);
	}

}

function setOpacity ( el, opacity )
{
	el.style.opacity = opacity;
	el.style.filter = 'alpha(opacity=' + opacity*99 + ')';
}

var small = 25;
var big = 265;

var picinfdiv = document.getElementById("pictureinfo")
picinfdiv.style.width = "25px";

var ticker = document.getElementById("ticker")

var picinf = new widthExpand(picinfdiv, small, big)
picinf.close()
	
picinf.onupdate = function(value)
{
	var percent = (big - value) / (big - small)
	setOpacity(ticker, percent);
}
	
var openbutton = document.getElementById("open");
openbutton.onclick = function() { picinf.toggle(); return false; };
var closebutton = document.getElementById("close");
closebutton.onclick = function() { picinf.close(); return false; };