var slider;

var sliderbg;
var sliderthumb;
var sliderContainer;
var photoContainer;
var slideButtons;

var photoSliderSize = 0;
var photoContainerSize = 0;
var sliderSize = 0;

var photo_slider;
var photo_container;
var slider_bg;
var slider_thumb;
var slide_buttons;

var numPhotos = 0;

var currentImage = 0;

var old_position = -1;
var target_position = 0;

var resizing = false;

/******* SET UP THE SCROLLER ***********/

function sliderInit(sliderbg_p, sliderthumb_p, sliderContainer_p, photoContainer_p, slideButtons_p)
{
	sliderbg = sliderbg_p;
	sliderthumb = sliderthumb_p;
	sliderContainer = sliderContainer_p;
	photoContainer = photoContainer_p;
	slideButtons = slideButtons_p;
	
	sliderInit2();
}

function sliderInit2()
{
	//Get references to the html elements used by the javascript
	slider_bg = document.getElementById(sliderbg);
	slider_thumb = document.getElementById(sliderthumb);
	photo_slider = document.getElementById(sliderContainer);
	photo_container = document.getElementById(photoContainer);
	slide_buttons = document.getElementById(slideButtons);

	photoSliderSize = photo_slider.offsetWidth;

	slider_bg.style.left = "0px";
	slider_thumb.style.left = "0px";
	slider_bg.style.width = (photoSliderSize - slide_buttons.offsetWidth - 5) + "px";
	
	//Set the size variables to be used by detecting the size of the 
	sliderSize = slider_bg.offsetWidth - slider_thumb.offsetWidth;	
	
	//Set the number of photos to scroll through
	numPhotos = photo_slider.getElementsByTagName("img").length;

	//Set the width of the inner container based on the images contained
	setupContainer();

	//Build an array of possible values
	var rangeValues = new Array();
	for (var i = 0; i < numPhotos; i++ )
		rangeValues.push(i);	

	//Initialise the slider control
	slider = null;
	slider = new Control.Slider(sliderthumb,sliderbg,{
		range:$R(0,numPhotos-1),
        //values:rangeValues,
        onSlide:function(v){debug(v);sliderMoved();},
        onChange:function(v){debug(v);sliderMoved();}});

	slider.setValue(currentImage);

	//Move to the first image
	moveToPhoto(currentImage);
		
	//Set the resize timer going
	ResizeTimer();
}

function setupContainer()
{
	var photos = photo_slider.getElementsByTagName("img");
	var width = 0;
	
	for (var i = 0; i < photos.length; i++ )
	{
		width += photos[i].offsetWidth;
	}
	
	photo_container.style.width = width + "px";
	photoContainerSize = photo_container.offsetWidth;
}

/******** MOVING SCROLLER FUNCTIONS *********/

function sliderMoved()
{
	currentImage = Math.round(slider.value);
	moveToPhoto(currentImage);
}

function moveToPhoto(index)
{
	//debug( index );
	
	var photos = photo_slider.getElementsByTagName("img");

	if ( photos.length > index )
	{
		//CALCULATE THE POSITION WITH THE SELECTED IMAGE IN THE CENTRE
		var position = (photoSliderSize / 2);
		
		for ( var i = 0; i < index; i++ )
			position -= photos[i].offsetWidth;
		
		position -= photos[index].offsetWidth / 2;

		//CHECK THE LAST IMAGE WON'T HAVE SPACE AFTER IT
		if ( ( position + photoContainerSize ) < photoSliderSize )
			position = photoSliderSize - photoContainerSize;	
		
		//CHECK THE FIRST IMAGE WON'T HAVE SPACE BEFORE IT
		if ( position > 0 )
			position = 0;	

		//debug(position);

		//Move the div to that position
		target_position = Math.round(position);
		animateSlide();
	}
}

function animateSlide()
{
	if ( old_position != target_position )
	{
		if ( old_position < target_position )
			if ( old_position <= target_position - 20 )
				//big move	
				old_position += (target_position - old_position) / 5;
			else
				//small move	
				if ( old_position <= target_position - 5 )
					old_position += 4;
				else
					old_position += 1;
		else
			if ( old_position >= target_position + 20 )
				//big move	
				old_position -= (old_position - target_position) / 5;
			else
				//small move	
				if ( old_position >= target_position + 5 )
					old_position -= 4;
				else
					old_position -= 1;
		
		old_position = Math.round(old_position);
		photo_container.style.marginLeft = old_position + "px";
		
		//debug(old_position + ", " + target_position);
		
		SetNewTimer("animateSlide()");
	}
	else
	{
		ResetTimer();
	}
}

/*********** TIMER FUNCTIONS ***********/

var timerID = null;
var timerRunning = false;
var delay = 40;

function ResetTimer()
{
    if(timerRunning)
        clearTimeout(timerID);
		
    timerRunning = false;
}

function SetNewTimer(callback)
{
	if (timerRunning)
		ResetTimer();
	
	timerRunning = true;
    timerID = self.setTimeout(callback, delay);
}

var currentPageWidth = 0;
var resizeTimerRunning = false;
var resizeTimerID = null;

function ResetResizeTimer()
{
    if(resizeTimerRunning)
        clearTimeout(resizeTimerID);
		
    resizeTimerRunning = false;
}

function ResizeTimer()
{
	if (resizeTimerRunning)
	{
		if (resize())
		{
			currentPageWidth = photo_slider.offsetWidth;
			sliderInit2();
		}
	}
	else
	{
		currentPageWidth = photo_slider.offsetWidth;	
	}

	if(resizeTimerRunning)
		ResetResizeTimer();

	resizeTimerRunning = true;
	resizeTimerID = self.setTimeout("ResizeTimer()", 100);
}

function resize()
{
	
	//Set the size variables to be used by detecting the size of the 
	if ( photo_slider.offsetWidth !=  (slider_bg.offsetWidth + slide_buttons.offsetWidth + 5) )
	{
		return true;	
	}
	
	return false;
	
}

/*********** Scroller buttons **************/

function moveRight()
{
	if ( currentImage < numPhotos )
	{
		currentImage++;		
		slider.setValue(currentImage);
	}
}

function moveLeft()
{
	if ( currentImage > 0 )
	{
		currentImage--;	
		slider.setValue(currentImage);
	}
}


/*********** debugging *************/

function debug(output)
{
	var out = document.getElementById("out");
	
	if ( out )
		out.innerHTML = output;	
}

function WindowWidth()
{
    if (window.innerWidth)
		return window.innerWidth;
		
	if (document.documentElement.clientWidth)
		return document.documentElement.clientWidth;
		
	if (document.body.clientWidth)
		return document.body.clientWidth;
		
	if (document.body.offsetWidth)
		return document.body.offsetWidth;
}

function WindowHeight()
{
    if (window.innerHeight)
		return window.innerHeight;
		
	if (document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
		
	if (document.body.clientHeight)
		return document.body.clientHeight;
		
	if (document.body.offsetHeight)
		return document.body.offsetHeight;
}

function PageInit()
{
	sliderInit("sliderbg", "sliderthumb", "photo_slider", "photo_slider_inner", "sliderButtons");
}

var oldonload = window.onload;
if (typeof window.onload != 'function') { window.onload = PageInit; }
else { window.onload = function() { if (oldonload) { oldonload(); } PageInit(); } }