// dimensions of the area inside which the slideshow is displayed
var stageWidth = 456;
var stageHeight = 280;

// dimensions of a single slide
var slideWidth = 260;
var slideHeight = 280;

// the slideshow images
var slideImages = new Array();


slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/TomFord.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/leeanglecuff.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/RLCashmereBears1.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/AlexAniBangles.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/Balenciagabag.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/DerrianPottery.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/DeviKroellClutch.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/KateSpadeSuitcase.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/JimmyChooBoot.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/MichaelKorsjacket.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/GerardYoscaNecklace.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/toryburch.jpg');
slideImages.push('http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/MarcJacobsBag.jpg');

// slide transition settings
var transitionStepValue = 10;
var transitionStepTime = 10;

// the first showing slide
var startingSlideIndex = 0;

var slides = new Array();
var loadedSlides = 0;
var nextButton, previousButton, stage;

// the three slides shown
// slideWrapper: the wrapper arround the slide image
// slideIndex: the slide index
// slideImage: the image object of the slide
var showingSlides = new Array();
showingSlides.push({slideWrapper:null, slideIndex:null, slideImage:null});
showingSlides.push({slideWrapper:null, slideIndex:null, slideImage:null});
showingSlides.push({slideWrapper:null, slideIndex:null, slideImage:null});

// preparing slideshow
function init_slideshow()
{
	// getting navigation buttons and stage area
	nextButton = document.getElementById('nextButton');
	previousButton = document.getElementById('previousButton');
	stage = document.getElementById('stage');
	
	// getting the current slide index
	showingSlides[1]['slideIndex'] = startingSlideIndex;
	
	// getting the three slides wrappers
	showingSlides[0]['slideWrapper'] = document.getElementById('previousSlide');
	showingSlides[1]['slideWrapper'] = document.getElementById('currentSlide');
	showingSlides[2]['slideWrapper'] = document.getElementById('nextSlide');
	
	// positioning the slide wrappers inside the stage area
	position_slides();
	
	// adding the transparency masks for the side slides
	add_masks();
	
	// preloading slideshow images
	preload_slides();
}

// positions the slides relatively to the staging area, taking account of stage area and slide widths
function position_slides()
{
	
	for (var i=0; i<showingSlides.length; i++)
	{
		showingSlides[i]['slideWrapper'].style.position = 'absolute';
		showingSlides[i]['slideWrapper'].style.width = slideWidth + 'px';
		showingSlides[i]['slideWrapper'].style.height = stageHeight + 'px';
		showingSlides[i]['slideWrapper'].style.overflow = 'hidden';
		showingSlides[i]['slideWrapper'].style.top = '0' + 'px';
		showingSlides[i]['slideWrapper'].style.backgroundImage = 'url(http://a1540.g.akamai.net/f/1540/2629/1h/images.fairmarket.com/images/site1304/ajax-loader.gif)';
		showingSlides[i]['slideWrapper'].style.backgroundRepeat = 'no-repeat';
	}
	
	showingSlides[0]['slideWrapper'].style.left = stageWidth/2 - 3*slideWidth/2  + 'px';
	showingSlides[1]['slideWrapper'].style.left = (stageWidth - slideWidth)/2  + 'px';	
	showingSlides[2]['slideWrapper'].style.left = (stageWidth + slideWidth)/2 + 'px';
	
	showingSlides[0]['slideWrapper'].style.backgroundPosition = '100% 50%';
	showingSlides[1]['slideWrapper'].style.backgroundPosition = '50% 50%';
	showingSlides[2]['slideWrapper'].style.backgroundPosition = '0% 50%';
}

// ads the transparency masks for the side slides
function add_masks()
{
	var masks = new Array();
	var masksNo = 2;
	for (var i=0; i<masksNo; i++)
	{
		masks[i] = document.createElement('div');
		masks[i].style.backgroundColor = '#FFF';
		masks[i].style.width = '100%';
		masks[i].style.height = '100%';
		masks[i].style.position = 'absolute';
		masks[i].style.top = '0px';
		masks[i].style.left = '0px';
		masks[i].style.zIndex = '1';
		change_opacity(masks[i], 70); // sets the opacity for the mask (function defined in utils.js)
	}
	
	showingSlides[0]['slideWrapper'].appendChild(masks[0]);
	showingSlides[2]['slideWrapper'].appendChild(masks[1]);
}

// recursively preloads the slides when all the images are loaded, starts the slideshow
function preload_slides()
{
	if (loadedSlides == slideImages.length)
	{
		start_slideshow();
		return true; // stop when all the images are preloaded
	}
		
//	var newImage = new Image(slideWidth, slideHeight);
	var newImage = document.createElement('img');
	// position of the image inside the slide wrapper
	newImage.style.position = 'absolute';
	newImage.style.left = '0px';
	newImage.style.top = '0px';
	
	// when the current image finished loading, start loading the next one
	newImage.onload = function()
						{
							slides.push(this); // add the image to the slides
							loadedSlides = loadedSlides + 1; // increase slides count
							preload_slides(); // try to load next slide
						}
						
	newImage.src = slideImages[loadedSlides]; // get image
}

// starts the slideshow
function start_slideshow()
{	
	set_showing_slides_indexes(); // get the slide indexes for previous and next slides
	load_slides();	// load the images inside the slide wrappers
	init_slideshow_navigation(); // add click events on the navigational buttons
	clear_loaders(); // clear the loaders displayed while the images where loaded
}

// clears the loaders displayed inside the slide wrappers while the images where loaded
function clear_loaders()
{
	for (var i=0; i<showingSlides.length; i++)
	{
		showingSlides[i]['slideWrapper'].style.background = 'none';
	}
}

// loads the images inside the slide wrappers
function load_slides()
{
	for (var i=0; i<showingSlides.length; i++)
	{
		showingSlides[i]['slideImage'] = slides[showingSlides[i]['slideIndex']];
		showingSlides[i]['slideWrapper'].appendChild(showingSlides[i]['slideImage']);
	}
}

// sets the indexes for the side slides
function set_showing_slides_indexes()
{
	var currentSlideIndex = showingSlides[1]['slideIndex'];
	showingSlides[0]['slideIndex'] = (currentSlideIndex == 0)?(slideImages.length - 1):(currentSlideIndex - 1);
	showingSlides[2]['slideIndex'] = (currentSlideIndex == (slideImages.length - 1))?0:(currentSlideIndex + 1);
}

// adds onclick events to the navigational buttons
function init_slideshow_navigation()
{
	previousButton.onclick = slideshow_forward; // previous button clicked on - slides move to the right(forward)
	nextButton.onclick = slideshow_backward; // previous button clicked on - slides move to the right(backward)
}

// moves the slides backward with one position
function slideshow_backward()
{
	for (var i=0;i<showingSlides.length; i++)
	{
		showingSlides[i]['slideImage'].style.left = slideWidth + 'px';
		showingSlides[i]['slideWrapper'].style.background = 'url(' + showingSlides[i]['slideImage'].src + ') 0px 0px no-repeat';
	}
	
	var currentSlideIndex = showingSlides[1]['slideIndex'];
	showingSlides[1]['slideIndex'] = (currentSlideIndex == (slides.length - 1))?0:(currentSlideIndex + 1);
	set_showing_slides_indexes();
	load_slides();
	slideshow_backward_transition()
}

// displays the slides backward transition
function slideshow_backward_transition()
{
	var slidePos = parseInt(showingSlides[1]['slideImage'].style.left);
	if (slidePos > 0)
	{
		for (var i=0;i<showingSlides.length; i++)
		{
			showingSlides[i]['slideImage'].style.left = (slidePos - transitionStepValue) + 'px';
			showingSlides[i]['slideWrapper'].style.backgroundPosition = (slidePos - slideWidth - transitionStepValue) + 'px' + ' 0px';
		}
		setTimeout(slideshow_backward_transition, transitionStepTime);
	}
}

// moves the slides forward with one position
function slideshow_forward()
{
	for (var i=0;i<showingSlides.length; i++)
	{
		showingSlides[i]['slideImage'].style.left = '-' + slideWidth + 'px';
		showingSlides[i]['slideWrapper'].style.background = 'url(' + showingSlides[i]['slideImage'].src + ') 0px 0px no-repeat';
	}
	
	var currentSlideIndex = showingSlides[1]['slideIndex'];
	showingSlides[1]['slideIndex'] = (currentSlideIndex == 0)?(slides.length - 1):(currentSlideIndex - 1);
	set_showing_slides_indexes();
	load_slides();
	slideshow_forward_transition()
}

// displays the slides forward transition
function slideshow_forward_transition()
{
	var slidePos = parseInt(showingSlides[1]['slideImage'].style.left);
	if (slidePos < 0)
	{
		for (var i=0;i<showingSlides.length; i++)
		{
			showingSlides[i]['slideImage'].style.left = (slidePos + transitionStepValue) + 'px';
			showingSlides[i]['slideWrapper'].style.backgroundPosition = (slidePos + slideWidth + transitionStepValue) + 'px' + ' 0px';
		}
		setTimeout(slideshow_forward_transition, transitionStepTime);
	}
}

// start the slide when the page is loaded (function defined in utils.js)
add_load_event(init_slideshow);