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

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

function SlideBoxH(elementsToMove, duration)
{
	this.box              = $('slidebox');
	this.clip             = $('slideboxClip');
	this.leftNav          = $('slideboxLeft');
	this.rightNav         = $('slideboxRight');
	this.selectedElement  = $$('#slideboxClip .selected').first();
	
	this.active           = false;
	this.scrollDuration  = duration;
	this.duration         = this.scrollDuration;
	this.leftDirection    = 1;
	this.rightDirection   = -1;
	this.moveTolerance    = 5;
	this.actualTime       = 0;
	this.shiftMade        = 0;
	this.currentPage 	  = 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()
//		.bindMouseEvents();	
} 

SlideBoxH.prototype.bindMouseEvents = function ()
{
	this.elements.each(function(element)
	{
		element.onmouseover = this.sliderItemOver.bindAsEventListener(this);
		element.onmouseout  = this.sliderItemOut.bindAsEventListener(this);
	}.bind(this)
	)
}

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.duration = (this.shift  / (this.elementWidth * this.elementsToMove)) * this.scrollDuration ;
		
		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()
{
	if(	$('page_'+this.currentPage).hasClassName('selected'))
	{
		$('page_'+this.currentPage).removeClassName('selected');
	}
	this.currentPage--;
	if (!$('page_'+this.currentPage))
	{
		this.currentPage++;
	}
	$('page_'+this.currentPage).addClassName('selected');
	
	this.run(this.leftDirection);
}

SlideBoxH.prototype.slideRight = function()
{
	
	if(	$('page_'+this.currentPage).hasClassName('selected'))
	{
		$('page_'+this.currentPage).removeClassName('selected');
	}
	this.currentPage++;
	
	if (!$('page_'+this.currentPage))
	{
		this.currentPage--;
	}
	$('page_'+this.currentPage).addClassName('selected');
	
	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.isLast = function(element)
{
	var left = this.getClipLeftStyle();
	return element.offsetLeft == -left + (this.elementsInView - 1) * this.elementWidth;
}


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()
{
	return this;
	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;
}

SlideBoxH.prototype.sliderItemOver = function(event)
{
	var element = Event.element(event).parentNode;
	if($(element.parentNode) == this.clip)
	{
		mouseOver(element);
		this.showToolTip.bind(this).delay(0.3, element);
	}
}

SlideBoxH.prototype.sliderItemOut = function(event)
{
	var element = Event.element(event).parentNode;
	var relatedElement = (event.relatedTarget) ? event.relatedTarget : event.toElement;
	if(relatedElement.parentNode != element)
	{
		var tooltip = element.select('.tooltip').first();
		if(tooltip)
		{
			tooltip.hide();
		}
		mouseOut(element);
	}
}

SlideBoxH.prototype.showToolTip = function(element)
{
	var tooltip = element.select('.tooltip').first();
	if(tooltip)
	{
		if(element.hasClassName('hover') && $(element.parentNode) == this.clip)
		{
			if(this.isLast(element))
			{
				if(!tooltip.hasClassName('end'))
				{
					tooltip.addClassName('end');
				}
			}
			else
			{
				if(tooltip.hasClassName('end'))
				{
					tooltip.removeClassName('end');
				}
			}
			if(Prototype.Browser.IE)
			{
				tooltip.show();
			}	
			else
			{
				Effect.Appear(tooltip.identify(), {duration: 0.3, afterFinish: this.hideToolTip.bind(this, tooltip)});
			}
		}
		else
		{
			tooltip.hide();			
		}
	}
}

SlideBoxH.prototype.hideToolTip = function(tooltip)
{
	if(!$(tooltip.parentNode).hasClassName('hover'))
	{
		tooltip.hide();
	}
}

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