/*  Function: rPosition

    Finds the position of the mouse, relative to the specified element 

    Parameters:
        ele - a jQuery object representing the element which is used to find the relative position.
        mouseX - the X position of the mouse pointer on the page.
        mouseY - the Y position of the mouse pointer on the page.

    Returns:
        object - relative x and y position of the mouse.   

*/
function rPosition ( ele, mouseX, mouseY)  {
    var offset = ele.offset();
    var x = mouseX - offset.left;
    var y = mouseY - offset.top;

    return {'x': x, 'y': y};
}




( function ( $ ) {
    $.fn.scrollbars = function ( options ) {
        // the plugin functionality goes in here
    
        // TODO: User scrollers methods to create vertical/horizontal bars.
        // $.fn.scrollbars.scrollers.vertical();
        
        // Extend our default options with those provided.
        var opts = $.extend({}, $.fn.scrollbars.defaults, options);
    
        return this.each( function () {
            // apply plugin functionality to each element
            // console.log(opts);
            
            var currentId = $(this).attr('id');
            
            var pane = $(this).find(opts.paneSelector).eq(0);
            var bars = $(this).find(opts.barSelector); 
                       
            /*
console.log('Found ' + bars.length + ' bars in ' + currentId);
            console.log(bars);
*/
            
            for (var i = 0; i < bars.length; i++) {
                var bar = $( bars[i] );
                if ( bar.height() > bar.width() ) {
                    /* console.log('Vertical Bar'); */
                    $.fn.scrollbars.scrollers.vertical(pane, bars[i], opts);
                }
                else if ( bar.width() > bar.height() ) {
                    /* console.log('Horizontal Bar'); */
                    $.fn.scrollbars.scrollers.horizontal(pane, bars[i], opts);
                }

            }
            
            /* console.log('End of loop'); */       
        });
    }
  
    $.fn.scrollbars.defaults = {
        'orientation': '',
        'barSelector': '.scrollbar',
        'paneSelector': '.scrollpane',
        'handleSelector': '.handle'
    }
    
    $.fn.scrollbars.scrollers = {
        vertical : function( pane, bar, options ) { 
             
            var pane = $( pane );
            var bar = $( bar );
            var handle = $( bar ).children( options.handleSelector );
            
           /*
 console.log(pane);
            console.log(handle);
*/
            
            var paneHeight = pane.height();
            var barHeight = bar.height();
            var handleHeight = handle.outerHeight();
            var contentHeight =  pane.attr( "scrollHeight" );

            var scrollHeight = barHeight - handleHeight;
            var amountToScroll = contentHeight - paneHeight;

            // 1. Make handle draggable.
            handle.draggable( { axis:'y', containment: 'parent' } );

            // 2. Scroll the content in the pane when the handle is dragged.
            handle.bind( 'drag', function ( event, ui ) {
                var position = ui.position;     

                // Calculate percentage the scroll handle has moved from the top
                // and scroll the content by this percent.           
                var scrolled = ( position.top / scrollHeight );       
                pane.attr( { scrollTop: scrolled * amountToScroll } );
                
                /* console.log('Scrolled pane by % ' + (scrolled * 100) ); */  
            });

            // When the user clicks on the scrollbar...
           /*  console.log('Binding ' + handle.attr('id') + ' to ' + bar.attr('id') + ' onClick '); */
            
            bar.bind( 'click', function ( e ) {
                var handle = $( bar ).find( options.handleSelector ).eq(0);
                
               /*  console.log('Clicked on ' + $(this).attr('id')); */
                
                var position = rPosition( $( bar ), e.pageX, e.pageY);

                var scrolled = ( position.y / scrollHeight );
                var handleTop = position.y - handle.height();

                // Make sure the handle stays within bounds.
                if ( handleTop < 0 ) { 
                    handleTop = 0;
                }
                else if ( handleTop > ( barHeight - handle.height() ) ) {
                    handleTop = ( barHeight - handle.height() );
                }
                
              /*   console.log('Animating ' + handle.attr('id')); */
                handle.animate( { top: handleTop }, 1000 );
                
               /*  console.log('Animating ' + pane.attr('id')); */
                pane.animate( { scrollTop: scrolled * amountToScroll }, 1000 );
            });        
            
        },
        horizontal : function( pane, bar, options ) { 
            var pane = $( pane );
            var bar = $( bar );
            var handle = $( bar ).find( options.handleSelector ).eq(0);

          /*
  console.log(pane);
            console.log(handle);
*/

            var paneWidth = pane.width();
            var barWidth = bar.width();
            var handleWidth = handle.outerWidth();
            var contentWidth =  pane.attr( "scrollWidth" );

            var scrollWidth = barWidth - handleWidth;
            var amountToScroll = contentWidth - paneWidth;

            // 1. Make handle draggable.

            handle.draggable( { axis:'x', containment: 'parent' } );

            // 2. Scroll the content in the pane when the handle is dragged.
            handle.bind( 'drag', function ( event, ui ) {
                var position = ui.position;     

                // Calculate percentage the scroll handle has moved from the top
                // and scroll the content by this percent.           
                var scrolled = ( position.left / scrollWidth );       
                pane.attr( { scrollLeft: scrolled * amountToScroll } );

               /*  console.log('Scrolled pane by % ' + (scrolled * 100) );   */
            });

            // When the user clicks on the scrollbar...
            bar.bind( 'click', function ( e ) {

                var handle = $( $(this).find(options.handleSelector).eq(0) );
                
               /*  console.log('Clicked on ' + $(this).attr('id')); */

                var position = rPosition( $( bar ), e.pageX, e.pageY);

                var scrolled = ( position.x / scrollWidth );
                var handleLeft = position.x - handle.width();

                // Make sure the handle stays within bounds.
                if ( handleLeft < 0 ) { 
                    handleLeft = 0;
                }
                else if ( handleLeft > ( barWidth - handle.width() ) ) {
                    handleLeft = ( $(this).css('left') - handleLeft );
                }

               /*  console.log('Animating ' + handle.attr('id')); */
                handle.animate( { left: handleLeft }, 1000 );
               /*  console.log('Animating ' + pane.attr('id')); */
                pane.animate( { scrollLeft: scrolled * amountToScroll }, 1000 );
            });
        }
    }
    
    
})( jQuery );