/**
 *	@purpose:   animates and changes page content via UI Slider Effect
 *	@author:    robert.leurs@cooloxygen.com
 *	@version:   1.1 - 29.05.2009
 */

$(document).ready(function() {

	$(function() {

    
/**
* CONFIG: CHANGE THIS INFORMATION ACCORDING TO YOUR HTML MARKUP
*/
        var configVisibleItems      = 4;                    // how many items are visible at one time
        var configAnimationTime     = 500;                  // the time in milliseconds to animate the slide
        var configSliderBar         = $("#slider_bar");     // the element to transform into a slider
        var configSliderHandle      = $("#slider_handle");  // the element to transform into a handle
        var configItemsToSlide      = $(".content");        // the class of the items to slide
        var configItemsContainer    = $("#slider_data");    // the element containing the items to slide 
        var configDebugElemtent     = $("#debug");          // the element to show debug information

/**
* NO CHANGES FROM HERE..., OR AT OWN RISK!
*/        
        var intSteps    = configItemsToSlide.outerWidth();
        var intUBound   = configItemsContainer.innerWidth() - (intSteps * configVisibleItems);

        // instantiate slider
		configSliderBar.slider({
			handle: configSliderHandle, // the element to transform into a handle
            value: 0,                   // we are setting css:left -> start with negative value
			min: 0,                     // upperbound value -200 since we're showing 2x100 at the time
			max: intUBound,             // upperbound value
			step: intSteps,             // how many pixels are we sliding with
            
            // now let's bind the slide function....
			slide: function(event, ui) {

                // get value from slider
                var sliderPos = ui.value * -1;

                // update textbox
                var debugInfo = '<b>DEBUG INFO:</b><br >' 
                                    + '* css:left = ' + sliderPos  + 'px <br >' 
                                    + '* visible items = ' + configVisibleItems + '<br >' 
                                    + '* width of the content to slide = ' + intUBound + 'px<br >' 
                                    + '* steps to slide = ' + intSteps + 'px<br >';

                configDebugElemtent.html(debugInfo);

                // set the offset for the sliding-div (with or without animation)
                configItemsContainer.animate({'left' : sliderPos}, configAnimationTime);
			}
		});
	});

});