/* HTML USAGE
< >
∧ ∨
*/
(function($) {
$.fn.customScrollbar = function(options){
// default configuration properties customScrollbar EKM
var defaults = {
timer: 10,
axis: 'xy',
scrollerX: 'scrollerX',
scrollerXBtn1: 'btn1',
scrollerXBtn2: 'btn2',
scrollerXDraggerCont: 'draggerCont',
scrollerXDragger: 'dragger',
scrollerY: 'scrollerY',
scrollerYBtn1: 'btn1',
scrollerYBtn2: 'btn2',
scrollerYDraggerCont: 'draggerCont',
scrollerYDragger: 'dragger'
};
var options = $.extend(defaults, options);
this.each(function() {
var obj=$(this);
var msk=obj.parent();
var timeout;
switch(options.axis){
case "xy":
getScrolable(options.scrollerX, options.scrollerXBtn1, options.scrollerXBtn2, options.scrollerXDraggerCont, options.scrollerXDragger, "x");
getScrolable(options.scrollerY, options.scrollerYBtn1, options.scrollerYBtn2, options.scrollerYDraggerCont, options.scrollerYDragger, "y");
break;
case "x":
getScrolable(options.scrollerX, options.scrollerXBtn1, options.scrollerXBtn2, options.scrollerXDraggerCont, options.scrollerXDragger, "x");
break;
case "y":
getScrolable(options.scrollerY, options.scrollerYBtn1, options.scrollerYBtn2, options.scrollerYDraggerCont, options.scrollerYDragger, "y");
break;
}
function getScrolable(sc, scb1, scb2, scdc, scd, dir){
var osc=$('.'+sc);
var oscb1=$('.'+scb1,osc);
var oscb2=$('.'+scb2,osc);
var oscdc=$('.'+scdc,osc);
var oscd=$('.'+scd,osc);
osc.css("position","relative");
oscdc.css("position","relative");
oscd.css("position","relative");
switch(dir){
case "x":
var mskw=msk.width();
var oscb1w=oscb1.width();
var oscb2w=oscb2.width();
var oscdcw=mskw-(oscb1w+oscb2w);
var oscdcl=oscdc.offset().left;
var oscdMD=false;
if(obj.width()>mskw){
oscdc.css("width",oscdcw+"px");
oscd.mousedown(function(e){
oscdMD=true;
var cp = e.pageX - $(this).offset().left;
$(oscdc).mousemove(function(e){
pos=getMousePos(e);
var cl = (pos.x-cp) - oscdcl;
if(cl>=0 && cl<=(oscdcw-oscd.width())){
$(oscd).css("left",cl+"px");
}
calcPos(sc, scb1, scb2, scdc, scd, dir);
});
})
oscd.mouseup(function(){ $(oscdc).unbind('mousemove'); })
oscdc.click(function(e){
controlSystem(sc, scb1, scb2, scdc, scd, dir, "scAreaX", e);
})
oscb1.mousedown(function(){
controlSystem(sc, scb1, scb2, scdc, scd, dir, "ltr");
}).mouseup(function(){ clearTimeout(timeout); });
oscb2.mousedown(function(){
controlSystem(sc, scb1, scb2, scdc, scd, dir, "rtl");
}).mouseup(function(){ clearTimeout(timeout); });
init(sc, scb1, scb2, scdc, scd, dir);
}else{
osc.css("display","none");
}
break;
}
}
function init(sc, scb1, scb2, scdc, scd, dir){
switch(dir){
case "x":
var osc=$('.'+sc);
var oscdc=$('.'+scdc,osc);
var oscd=$('.'+scd,osc);
var mskw = msk.width();
var sW=obj.attr("scrollWidth")-mskw;
var dsW=oscdc.width()-oscd.width();
var cl=msk.scrollLeft();
var dl=parseInt((dsW*cl)/sW);
$(oscd).css("left", dl+"px");
break;
}
}
function calcPos(sc, scb1, scb2, scdc, scd, dir){
switch(dir){
case "x":
var osc=$('.'+sc);
var oscdc=$('.'+scdc,osc);
var oscd=$('.'+scd,osc);
var mskw = msk.width();
var sW=obj.attr("scrollWidth")-mskw;
var oscdl=parseInt($(oscd).css("left"));
var dsW=oscdc.width()-oscd.width();
var cSL=(sW*oscdl)/dsW;
msk.scrollLeft(parseInt(cSL));
break;
}
}
function controlSystem(sc, scb1, scb2, scdc, scd, dir, btnDir, e){
var sto=true;
switch(dir){
case "x":
var osc=$('.'+sc);
var oscdc=$('.'+scdc,osc);
var oscd=$('.'+scd,osc);
var mskw = msk.width();
var sW=obj.attr("scrollWidth")-mskw;
var dsW=oscdc.width()-oscd.width();
var oscdcl=oscdc.offset().left;
var cl = msk.scrollLeft();
switch(btnDir){
case "ltr":
cl=cl-5;
if(cl<0){ cl=0 }
break;
case "rtl":
cl=cl+5;
if(cl>sW){ cl=sW }
break;
case "scAreaX":
sto=false;
pos=getMousePos(e);
if(pos.x(oscd.offset().left+oscd.width())){
dl=parseInt(pos.x-oscdcl);
var cl=parseInt((sW*dl)/dsW);
}
break;
}
msk.scrollLeft(cl);
var dl=parseInt((dsW*cl)/sW);
$(oscd).css("left",dl+"px");
break;
}
if(sto){
timeout = setTimeout(function(){
controlSystem(sc, scb1, scb2, scdc, scd, dir, btnDir)
}, options.timer);
}
}
function getMousePos(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { 'x': posx, 'y': posy };
}
});
};
})(jQuery);