$(document).ready(function(){

    //scrollpane parts
    var scrollPane = $('.scrollBox');
    var scrollContent = $('#scrollContent');
    
    //build slider
    var scrollbar = $(".scroll-bar").slider({
        max: 2734,
        slide:function(e, ui){
            if( scrollContent.width() > scrollPane.width() )
            {
                scrollContent.css('margin-left', Math.round( ui.value / 2734 * ( scrollPane.width() - scrollContent.width() )) + 'px');
            }
            else
            {
                scrollContent.css('margin-left', 0);
            }
        },
        change:function(e, ui){
            if( scrollContent.width() > scrollPane.width() )
            {
                scrollContent.css('margin-left', Math.round( ui.value / 2734 * ( scrollPane.width() - scrollContent.width() )) + 'px');
            }
            else
            {
                scrollContent.css('margin-left', 0);
            }
        }
    });

    //append icon to handle
    var handleHelper = scrollbar.find('.ui-slider-handle')
    .mousedown(function(){
        scrollbar.width( handleHelper.width() );
    })
    .mouseup(function(){
        scrollbar.width( '100%' );
    })
    .append('<span class="ui-icon ui-icon-grip-dotted-vertical"></span>')
    .wrap('<div class="ui-handle-helper-parent"></div>').parent();
    
    //change overflow to hidden now that slider handles the scrolling
    scrollPane.css('overflow','hidden');
    
    //size scrollbar and handle proportionally to scroll distance
    function sizeScrollbar(){
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - (proportion * scrollPane.width());
        scrollbar.find('.ui-slider-handle').css({
            width: handleSize,
            'margin-left': -handleSize/2
        });
        handleHelper.width('').width( scrollbar.width() - handleSize);
    };


    //init scrollbar size
    setTimeout(sizeScrollbar,10);//safari wants a timeout
        
    
    $.extend($.ui.slider.prototype, {
        next: function() {
            this.value(this.value() + 100);
        },
        forward: function() {
            this.value(this.value() + 200);
        },
        previous: function() {
            this.value(this.value() - 100);
        },
        reverse: function() {
            this.value(this.value() - 200);
        }
    });
    
    
    $(".cal-next").click(function(){
        $(".scroll-bar").slider("next");
    });
    
    $(".cal-skipahead").click(function(){
        $(".scroll-bar").slider("forward");
    });
    
    $(".cal-skipback").click(function(){
        $(".scroll-bar").slider("reverse");
    });
    
    $(".cal-previous").click(function(){
        $(".scroll-bar").slider("previous");
    }); 
    
    
    
    $('.target').each(function(){ // guess the each() part does the trick?
        var eventId = $(this).attr('id');
        
        $(this).qtip({
            show: {
                solo: true,
                delay: 100,
                when: {
                    event: 'mouseover' 
                }
            },
            hide: {
                fixed: true,
                effect: {
                    type: 'fade',
                    length: 100
                }
            },
            content: {
                url: SITE_BASE_URL+'/sched/geteventpopupdata/',
                data: { id: eventId },
                method: 'post'
            },
            style: {
                border: {
                    width: 2,
                    radius: 5,
                    color: '#666666'
                },
                width: 400,
                name: 'blue',
                tip: 'bottomMiddle'
            },
            position: {
                corner: {
                    target: 'topMiddle',
                    tooltip: 'bottomMiddle'
                }
            }
        });
    });		
});