var counter = 0;
var sliderwidth = 190;
var slidermargin = 26;
var indicatorwidth = 16; // Please include margins and padding in this number
var slideduration = 300;
var timebetweenautoslides = 8000;
var forward = true;
var showbuttons = true;
var showindicators = false;
var periodicalFunctionVar;
var numberofslidesinview = 4;

var cannon = function() 
{
	aSlideDivs = $$('#stripslider div.slide');
	
    if (counter == aSlideDivs.length - 1 - (numberofslidesinview - 1)) forward = false;
    else if (counter == 0) forward = true;
	
	if(forward == true) counter++;
	else counter--;	
	
	doSlide();
}

var nextSlide = function(event) 
{
	$clear(periodicalFunctionVar);
	aSlideDivs = $$('#stripslider div.slide');
	if (counter < aSlideDivs.length - 1 - (numberofslidesinview - 1))
	{ 	
		counter++;		
		doSlide();
	}
	event.stop();
}

var previousSlide = function(event) 
{
	$clear(periodicalFunctionVar);
	if (counter > 0)
	{	
		counter--;		
		doSlide();
	}
	event.stop();
}

var jumpSlide = function(event)
{
	$clear(periodicalFunctionVar);
	periodicalFunctionVar = cannon.periodical(timebetweenautoslides);
	
	clickedIndicator = this;
	
	$$('#indicators li').each(function(item, index){
		if(clickedIndicator == item) counter = index;
	});
	doSlide();
	event.stop();
}

var doSlide = function()
{
	aSlideDivs = $$('#stripslider div.slide');
	
	aSlideDivs.each(function(div){
		offset = div.getStyle('width').substring(0, div.getStyle('width').length - 2);
		offset = (parseInt(offset) + slidermargin);
		div.set('tween', {duration: slideduration});
		div.tween('left', -(counter * offset) + (offset * (div.id.substring(5) - 1)) + 'px');
	});
	
	if(showindicators)
	{
		$$('#indicators li').set('class', 'inactive');
		$$('#indicators li')[counter].set('class', 'active');
	}

	if (showbuttons == true)
	{
		if (counter == aSlideDivs.length - numberofslidesinview)
		{
			if ($('leftarrow')) $('leftarrow').fade(1);
			if ($('rightarrow')) $('rightarrow').fade(0.3);
			
			if ($('leftarrow')) $('leftarrow').setStyle('cursor', 'pointer');
			if ($('rightarrow')) $('rightarrow').setStyle('cursor', 'auto');
		}
		else if (counter == 0)
		{
			if ($('leftarrow')) $('leftarrow').fade(0.3);
			if ($('rightarrow')) $('rightarrow').fade(1);
			
			if ($('leftarrow')) $('leftarrow').setStyle('cursor', 'auto');
			if ($('rightarrow')) $('rightarrow').setStyle('cursor', 'pointer');
		}
		else 
		{
			if ($('leftarrow')) $('rightarrow').fade(1);
			if ($('rightarrow')) $('leftarrow').fade(1);
	
			if ($('leftarrow')) $('rightarrow').setStyle('cursor', 'pointer');
			if ($('rightarrow')) $('leftarrow').setStyle('cursor', 'pointer');
		}
	}	
}

function setupSlides()
{
	aSlideDivs = $$('#stripslider div.slide');
	aSlideDivs.each(function(div){
		offset = div.getStyle('width').substring(0, div.getStyle('width').length - 2);
		offset = (parseInt(offset) + slidermargin);
		var aLeftPos = offset*(div.id.substring(5) - 1);
		div.setStyle('left', aLeftPos + 'px');
	});
	
	if (showbuttons == true)
	{
		if (counter == aSlideDivs.length - numberofslidesinview)
		{
			if ($('leftarrow')) $('leftarrow').fade(1);
			if ($('rightarrow')) $('rightarrow').fade(0.3);
			
			if ($('leftarrow')) $('leftarrow').setStyle('cursor', 'pointer');
			if ($('rightarrow')) $('rightarrow').setStyle('cursor', 'auto');
		}
		else if (counter == 0)
		{
			if ($('leftarrow')) $('leftarrow').fade(0.3);
			if ($('rightarrow')) $('rightarrow').fade(1);
			
			if ($('leftarrow')) $('leftarrow').setStyle('cursor', 'auto');
			if ($('rightarrow')) $('rightarrow').setStyle('cursor', 'pointer');
		}
		else 
		{
			if ($('leftarrow')) $('rightarrow').fade(1);
			if ($('rightarrow')) $('leftarrow').fade(1);
	
			if ($('leftarrow')) $('rightarrow').setStyle('cursor', 'pointer');
			if ($('rightarrow')) $('leftarrow').setStyle('cursor', 'pointer');
		}
	}
}
 
window.addEvent('domready', function() 
{
    if($$('#stripslider div.slide').length > 1)
    {
		$$('#stripslider div.slide').removeClass('nojs');
		
    	if(($$('#stripslider div.slide').length >= 5) && (showbuttons == true))
    	{
    		aSlideButtonLeftEl = new Element('div', {id: 'leftarrow'});
    		aSlideButtonLeftEl.inject($('filmstrip'), 'top');
    	
    		aSlideButtonRightEl = new Element('div', {id: 'rightarrow'});
    		aSlideButtonRightEl.inject($('filmstrip'), 'top');
    		
    		if ($('leftarrow')) $('leftarrow').addEvent('click', previousSlide);
    		if ($('rightarrow')) $('rightarrow').addEvent('click', nextSlide);
    	}
    
		setupSlides();
		//doSlide();
    	//periodicalFunctionVar = cannon.periodical(timebetweenautoslides);
    }
});