jQuery(function( $ ){

     //by default, the scroll is only done vertically ('y'), change it to both.
    $.scrollTo.defaults.axis = 'xy';
    
    //this one is important, many browsers don't reset scroll on refreshes
    //reset all scrollable panes to (0,0)
    //$('div.pane').scrollTo( 0 );
    
    //reset the screen to (0,0)
   // $.scrollTo( 0 );
    
    
    //After setting the Scroll defaults - Get the Image Width
    var mImageWidth = $('#scroller-contents-event li').width();
    
    //Get the List Item Margin
    var mListMargin = $('#scroller-contents-event li').css('margin-right').replace('px', '');
    
    //Assign the Width to tbx + Add border size
    $('#tbxImageWidth').attr("value", parseInt(mImageWidth) + parseInt(mListMargin));
    
    //
    $('#hrefLeftScroll-event').click(function() {
        ScrollLeft();
    });

    $('#hrefRightScroll-event').click(function() {

        ScrollRight();
    });
    
});

function ScrollRight()
{
        //Get the Target Pane
    var $paneTarget = $('#scroller-container-event'); 
        
        //Get the Image Width
        var $ImageWidth = $('#tbxImageWidth').attr("value"); 
        
        //Get the Scroll Position
        var $ScrollPos= $('#tbxscrollposition').attr("value"); 

        //Count the Image Elements
        var ct = $('#scroller-contents-event').children().size(); 

        //Assess the Maximum size
        ct = (parseInt(ct) * parseInt($ImageWidth)) - parseInt($('#scroller-container-event').width()) - parseInt($ImageWidth);

        if( $ScrollPos <= parseInt(ct) )
        {
            //Set the New Scroll Pos Value
            $ScrollPos = parseInt($ScrollPos) + parseInt($ImageWidth);
            
            //Assign the the Tbx
            $('#tbxscrollposition').attr("value", $ScrollPos);
            
            //Activate the Scroll
            $paneTarget.stop().scrollTo( { top:0,left:$ScrollPos} , 800);
            
        }
       
}

function ScrollLeft()
{
        //Get the Target Pane
    var $paneTarget = $('#scroller-container-event'); 
        
        //Get the Image Width
        var $ImageWidth = $('#tbxImageWidth').attr("value"); 

        //Get the Scroll Position
        var $ScrollPos= $('#tbxscrollposition').attr("value"); 
        
        if(parseInt($ScrollPos) > 0)
        {
            //Set the New Scroll Pos Value
            $ScrollPos = parseInt($ScrollPos) - parseInt($ImageWidth);
        
            //Assign the the Tbx
            $('#tbxscrollposition').attr("value", $ScrollPos);
        
            //Activate the Scroll
            $paneTarget.stop().scrollTo( { top:0,left:$ScrollPos} , 800);
        }
}