/*
 * Slider object, used to calculate default values and initialize the slider.
 */
var Slider = {
	moveTo: 0, //start value of the slider
	itemsWidth: 0, //total width of the images 
	container: null, //container DOM object containing the UL element
	ul: null, //UL DOM object containing the images
	
	/*
	 * Initializes the values of the Slider object.
	 */
	initialize: function() {
	    this.ul = $('ul#slidemenu');
		this.container = $('#courseselector div.sliderGallery');
	    this.itemsWidth = this.ul.innerWidth() - this.container.outerWidth();

		//calculating the value of the slider for the current page
	    var imagesWidth = this.itemsWidth / $('li', this.ul).length;
	    var index = this.getIndexOfCurrentPage();
	    var real_index = index - 2;
	    this.moveTo = (index * imagesWidth) + (real_index * 10) + real_index;	
	},
	
	/*
	 * Returns the index of the image associated with the current page.
	 * 			This value is calculated by checking the current URL and the href values of the links. 
	 */
	getIndexOfCurrentPage: function() {
	    var index = 0;
	    $('li a', this.ul).each(function(i, item) {
	        if (item.href == location.href) { index = i; }
	    });
	    return index;
	}
}

$(document).ready(function() {
	Slider.initialize(); //initializing the values used for the slider
	Slider.ul.css({'left': Slider.moveTo * -1}); //setting the left value of the UL containing the images
    $('.slider', Slider.container).slider({
        min: 0,
        max: Slider.itemsWidth,
        handle: '.handle',
		startValue: Slider.moveTo, //start value depending on the current page
        stop: function (event, ui) {
            Slider.ul.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
            Slider.ul.css('left', ui.value * -1);
        }
    });
});