/*
*  jScroller version 1.0
*  Simple Content Scroller jQuery Plugin
*  
*  Usage:
*  
*   $('.classname').jScroller()
*   
*  options: {
*       sliderWidth: thickness of the scroll bar
*       sliderBg: class for the slider background 
*       sliderPointer: class for the pointer
*       position:{
*           orientation: vertical or horizontal
*           side: left,top,right,bottom
*       }
*       
*  }
*   
* 
* 
*/

(function($)
{                    
    $.fn.jScroller = function(options)
    {
        $.fn.jScroller.defaults = 
        {
            sliderWidth:10,
            sliderBg:'sliderBg',
            sliderPointer:'sliderPointer',
            pointerWidth:8,
            pointerHeight:44,
            position:{
                orientation:'vertical',
                side:'right'
            }
        };
                
        var opts = $.extend({}, $.fn.jScroller.defaults, options); /* PUTS ALL THE DEFAULT VALUES INTO A VARIABLE */
        
        var mainCont=$(this);
        // add css to container
        mainCont.css({
                overflow:'hidden',
                position:'relative'
            })
            
        var paddingTop=parseInt(mainCont.css('paddingTop')?mainCont.css('paddingTop').replace('px',''):0);
        var paddingLeft=parseInt(mainCont.css('paddingLeft')?mainCont.css('paddingLeft').replace('px',''):0);
        var paddingRight=parseInt(mainCont.css('paddingRight')?mainCont.css('paddingRight').replace('px',''):0);
        var paddingBottom=parseInt(mainCont.css('paddingBottom')?mainCont.css('paddingBottom').replace('px',''):0);
        mainCont.html('<div class="slider-container">'+mainCont.html()+'</div><div class="slider-bar"><div class="slider-holder"><div class="slider"></div></div></div>')

        if(mainCont.find('.slider-container').height()<=mainCont.height()) return;
        
        mainCont.find('.slider-container').css({overflow:'visible',position:'absolute'})
            
        mainCont.find('.slider-bar').css({position:'absolute'})
                
        if(opts.position.orientation=='vertical'){
        
            mainCont.find('.slider-container').css({overflowX:'hidden',top: paddingTop,width: mainCont.width()-opts.sliderWidth-10+'px'})
            
            mainCont.find('.slider-bar').css({top: paddingTop,width: opts.sliderWidth+'px',height: mainCont.height()+'px'})
            
            
            if(opts.position.side=='right'){
                mainCont.find('.slider-container').css({left: paddingLeft})
                mainCont.find('.slider-bar').css({right: paddingRight})
            }
            else {
                mainCont.find('.slider-container').css({right: paddingRight})
                mainCont.find('.slider-bar').css({left: paddingLeft})
            }
                       
            mainCont.find('.slider-holder').css({
                height: mainCont.find('.slider-bar').height()-opts.pointerHeight,
                width: mainCont.find('.slider-bar').css('width'),
                paddingTop:opts.pointerHeight+2
            }).addClass(opts.sliderBg)
            
        }   
        else{
            
            while(mainCont.find('.slider-container').height()>mainCont.height()){
                mainCont.find('.slider-container').css({width:mainCont.find('.slider-container').width()+10})
            }
        
            mainCont.find('.slider-container').css({overflowY:'hidden',left: paddingLeft,height: mainCont.height()-opts.sliderWidth-10+'px'})
            
            mainCont.find('.slider-bar').css({left: paddingLeft,height: opts.sliderWidth+'px',width: mainCont.width()+'px'})
            
            
            if(opts.position.side=='bottom'){
                mainCont.find('.slider-container').css({top: paddingTop})
                mainCont.find('.slider-bar').css({bottom: paddingBottom})
                
            }
            else {
                mainCont.find('.slider-container').css({bottom: paddingBottom})
                mainCont.find('.slider-bar').css({top: paddingTop})
                
            }
            
                    
            mainCont.find('.slider-holder').css({
                width: mainCont.find('.slider-bar').width()-opts.pointerWidth,
                height: mainCont.find('.slider-bar').css('height'),
                paddingRight:opts.pointerWidth
            }).addClass(opts.sliderBg)
            
        }    
        
        mainCont.find('.slider').css({
            height: mainCont.find('.slider-holder').height(),
            width: mainCont.find('.slider-holder').width(),
            position:'relative'
        })
        
        
        if(opts.position.orientation=='vertical'){
            
            mainCont.find('.slider').slider(
                {
                  orientation: "vertical",
                  max: 100,
                  value: 100,
                  slide: function(event, ui) { 
                        var top=100-ui.value;  
                        if(mainCont.find('.slider-container').height()<=mainCont.height()) return;
                        mainCont.find('.slider-container').css({
                            top:(-top*((mainCont.find('.slider-container').height()-mainCont.height())/100))+paddingTop
                        })
                  }

            
                }
            )
            
            mainCont.find('.ui-slider-handle').css({marginTop:-(opts.pointerHeight/2)+'px'})
        }else{
            
            mainCont.find('.slider').slider(
                {
                  orientation: "horizontal",
                  max: 100,
                  value: 100,
                  slide: function(event, ui) { 
                        var left=ui.value;  
                        if(mainCont.find('.slider-container').width()<=mainCont.width()) return;
                        mainCont.find('.slider-container').css({
                            left:(-left*((mainCont.find('.slider-container').width()-mainCont.width())/100))+paddingLeft
                        })
                  }
            
                }
            )
        
            mainCont.find('.ui-slider-handle').css({marginRight:-(opts.pointerWidth/2)+'px'})
            
        }
        
        mainCont.find('.ui-slider-handle').css({
            cursor:'pointer',
            margin:'0',
            display:'block',
            position:'absolute',
            width:opts.pointerWidth+'px',
            height:opts.pointerHeight+'px'
        }).addClass(opts.sliderPointer)
        
        
    };
})(jQuery);


$(document).ready(function(){
        
        
               $('.slidecontent1').jScroller()
               
               $('.slidecontent2').jScroller({
                   position:{
                       orientation:'horizontal',
                       side:'bottom'
                   },
                    sliderWidth:10,
                    sliderBg:'sliderBg',
                    sliderPointer:'sliderPointer',
                    pointerWidth:44,
                    pointerHeight:8,
                   
               })
       
    });