var parseLinkExp = /.*\/portfolio\/[^/.]+/i;
var slidebox;

Event.observe(window, 'load', 
	function() 
	{
		if($('slidebox'))
		{
			slidebox = new SlideBoxH(5, 35);
		}
		var link = parseLink();
		Cookies.create("prevUrl", link, 1);
	}
);

function SlideBoxH(elementsToMove, duration)
{
	this.box              = $('slidebox');
	this.clip             = $('slidebox_clip');
	this.leftNav          = $('slidebox_left');
	this.rightNav         = $('slidebox_right');
	this.selectedElement  = $$('#slidebox_clip .selected').first();
	
	this.active           = false;
	this.duration         = duration;
	this.leftDirection    = 1;
	this.rightDirection   = -1;
	this.moveTolerance    = 5;
	this.actualTime       = 0;
	this.shiftMade        = 0;
	
	this.elementsToMove   = elementsToMove;
	this.boxWidth         = this.box.getWidth();
	this.clipWidth        = 0;
 	this.elements         = this.clip.childElements(); 
	this.elementWidth     = this.getElementWidth(this.elements[0]);
	this.maxShift         = this.elementWidth * this.elementsToMove;
	this.elementsInView   = Math.round(this.boxWidth / this.elementWidth);
	
	this.adjustClipWidth()
		.createNavigation()
		.initClipFromCookie()
		.findSelectedElement()
		.toggleButtons();	
} 


SlideBoxH.prototype.adjustClipWidth = function (element)
{
	for(var i = 0; i < this.elements.length; i++)
	{
		this.clipWidth += this.getElementWidth(this.elements[i]);
	}
	this.clipWidth = Math.max(this.clipWidth, this.boxWidth);
	this.clip.style.width = this.clipWidth + 'px';	
	return this;
}

SlideBoxH.prototype.createNavigation = function (element)
{
	Event.observe(this.leftNav.id, 'click', this.slideLeft.bindAsEventListener(this));
	Event.observe(this.rightNav.id,'click', this.slideRight.bindAsEventListener(this));
	this.leftNav.href  = 'javascript:;';
	this.rightNav.href = 'javascript:;';
	return this;
}


SlideBoxH.prototype.initClipFromCookie = function ()
{		
	var link = parseLink();
	if(Cookies["prevUrl"] != link)
	{
		var left = this.getClipLeftStyle();
		Cookies.create("clipLeft",  left, 1);
	}
	this.setClipLeftStyle(Cookies["clipLeft"]);
	return this;
}

SlideBoxH.prototype.findSelectedElement = function ()
{
	if(this.selectedElement)
	{
		var left = this.getClipLeftStyle();
		if(this.selectedElement.offsetLeft < (-1 * left) || this.selectedElement.offsetLeft > (this.boxWidth - left))
		{
			var shift = this.selectedElement.offsetLeft + this.maxShift - this.boxWidth;
			shift = Math.round(shift / this.elementWidth) * this.elementWidth;
			shift = Math.min(shift, this.clipWidth - this.boxWidth);
			shift = Math.min(0, -shift);
			this.setClipLeftStyle(shift);
		}
	}
	return this;
}

SlideBoxH.prototype.setClipLeftStyle = function(left)
{
	this.clip.style.left = Math.round(left) + 'px';
	Cookies.create("clipLeft", left, 1);
}

SlideBoxH.prototype.getClipLeftStyle = function()
{
	var left = parseInt(this.clip.style.left);
	return left ? left : 0;
}

SlideBoxH.prototype.getElementWidth = function(element)
{
	var width = 0;
	if(element)
	{
		width += element.getWidth();
		width += parseInt(element.getStyle('margin-left'));
		width += parseInt(element.getStyle('margin-right'));
	}
	return width;
}

SlideBoxH.prototype.run = function (direction)
{
	if(!this.active)
	{
		this.actualTime = 0;
		this.shiftMade  = 0;
		this.direction  = direction;
		this.active     = true;
		if(this.direction == this.leftDirection)
		{
			this.shift = -1 * parseInt(this.clip.getStyle('left'));
		}
		else if(this.direction == this.rightDirection)
		{
			this.shift = this.clipWidth + parseInt(this.clip.getStyle('left')) - this.boxWidth;			
		}
		this.shift = Math.min(this.shift, this.maxShift);		
		this.slide();
	}
}


SlideBoxH.prototype.previousElement = function(linkObj)
{
	if(this.isSelectedFirst())
	{
		this.returnUrl = linkObj.href;
		this.run(this.leftDirection);
		return false;
	}
	return true;
}

SlideBoxH.prototype.nextElement = function(linkObj)
{
	if(this.isSelectedLast())
	{
		this.returnUrl = linkObj.href;
		this.run(this.rightDirection);	
		return false;
	}
	return true;
}

SlideBoxH.prototype.slideLeft = function()
{
	this.run(this.leftDirection);
}

SlideBoxH.prototype.slideRight = function()
{
	this.run(this.rightDirection);	
}
SlideBoxH.prototype.isSelectedFirst = function()
{
	if(this.selectedElement)
	{
		var left = this.getClipLeftStyle();
		return this.selectedElement.offsetLeft + left <= this.moveTolerance ;
	}
	return false;
}

SlideBoxH.prototype.isSelectedLast = function()
{
	if(this.selectedElement)
	{
		var left = this.getClipLeftStyle();
		return this.selectedElement.offsetLeft == -left + (this.elementsInView - 1) * this.elementWidth;
	}
	return false;
}



SlideBoxH.prototype.slide = function()
{
	if(this.shiftMade == this.shift)
	{
		this.active = false;
		if(this.returnUrl)
		{
			location.href = this.returnUrl;
			return;
		}
		this.toggleButtons();
		return;
	}

	var offset  = this.calculateOffset(this.shift);
	this.shiftMade += offset; 
	this.actualTime++;
		
	var left = this.getClipLeftStyle();
	var move = left + this.direction * offset;
	this.setClipLeftStyle(move);
	setTimeout(this.slide.bindAsEventListener(this), 1);
}



SlideBoxH.prototype.calculateOffset = function(length)
{
	if(this.actualTime == this.duration)
		return 1;
		
	return Math.round(Easing.easeOutQuad(this.actualTime, 0, length, this.duration)) - this.shiftMade;	
}

SlideBoxH.prototype.toggleButtons = function()
{
	var left = this.getClipLeftStyle();
	
	if(left == 0)
	{
		this.leftNav.hide();	
	}
	else
	{
		this.leftNav.show();	
	}
	
	if(this.boxWidth - left == this.clipWidth)
	{
		this.rightNav.hide();	
	}
	else
	{
		this.rightNav.show();;	
	}
	return this;
}

function parseLink()
{
	var matches = location.href.match(parseLinkExp);
	if(matches)
	{
		return matches[0];
	}
	return location.href;
}