$(document).ready(function () {

    var $panels = $('#slider .scrollContainer > div');
    var $container = $('#slider .scrollContainer');

	var timerInitial;
	var intval = 15000;
	var isPlaying = true;
    var horizontal = true;

    if (horizontal) {
        $panels.css({
            'float' : 'left',
            'position' : 'relative' // IE fix to ensure overflow is hidden
        });

        // calculate a new width for the container (so it holds all panels)
        $container.css('width', $panels[0].offsetWidth * $panels.length);
    }

    // collect the scroll object, at the same time apply the hidden overflow
    // to remove the default scrollbars that will appear
    var $scroll = $('#slider .scroll').css('overflow', 'hidden');
	
    // apply our left + right buttons
	var $navigation = $('#slider .navigation');
    $navigation
        .after('<img class="scrollButtons left" src="/video-widgets/img/scroll_left.png" /><img class="scrollButtons middle" src="/video-widgets/img/scroll_pause.png" /><img class="scrollButtons right" src="/video-widgets/img/scroll_right.png" />');

    // handle nav selection
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('selected')
                .end()
            .end()
            .addClass('selected');
    }

    $('#slider .navigation').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function triggerIt(data) {
        var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

    if (window.location.hash) {
        triggerIt({ id : window.location.hash.substr(1) });
    } else {
        $('ul.navigation a:first').click();
    }

    // offset is used to move to *exactly* the right place, since I'm using
    // padding on my example, I need to subtract the amount of padding to
    // the offset.  Try removing this to get a good idea of the effect
    var offset = parseInt((horizontal ? 
        $container.css('paddingTop') : 
        $container.css('paddingLeft')) 
        || 0) * -1;


    var scrollOptions = {   
        target: $scroll, // the element that has the overflow

        // can be a selector which will be relative to the target
        items: $panels,

        navigation: '.navigation a',

        // selectors are NOT relative to document, i.e. make sure they're unique
        prev: 'img.left', 
        next: 'img.right',
        axis: 'xy',

        onAfter: triggerIt, // our final callback

        offset: offset,

        duration: 800,
        interval: intval,

        easing: 'swing'
    };

    // apply serialScroll to the slider - we chose this plugin because it 
    // supports// the indexed next and previous scroll along with hooking 
    // in to our navigation.
    $('#slider').serialScroll(scrollOptions);
    
    
    // Xenario - Define a new Timer for auto-rotation
    setTimer( true );
    //timerInitial = setTimeout( goNext, intval );
	
	$('#slider .scroll').hover(
		function()
		{
			$(this).trigger('stop');
		},
		function()
		{
			if ( isPlaying )
			{
				setTimer( true );
			}
		}
	);
	
	function setTimer( start )
	{
		clearTimeout(timerInitial);
		if ( start )
		{
			isPlaying = true;
			timerInitial = setTimeout( goNext, intval );
		}
		else
		{
			isPlaying = false;
		}
	}
	
	function goNext(){
	 	$('#slider .scroll').trigger('start');
	    $('#slider .scroll').trigger('next.serialScroll');
	   
	};
	
	$('img.middle').toggle(
		function (e)
		{
			$(this).attr('src', '/video-widgets/img/scroll_play.png');
			$('#slider .scroll').trigger('stop');
			setTimer( false );
		},
		function (e)
		{
			$(this).attr('src', '/video-widgets/img/scroll_pause.png');
			goNext();
			setTimer( true );
		}
	);
	
	
});