var SLIDER_VERSION = "1.1 BETA";
var mover;
var bar;
var tooltip;
var iPageOffsetX;
var bHitBound;
var bSliderActive = false;
var iBoundsOffset = 0;
var iBoundsEntry = 0;
var bOutOfBoundsLeft = false;
var bOutOfBoundsRight = false;
var iCallBackOffset = 1;


var activeSlider = null;
var activeSliders = {
    "hitlistSlider": {
        "box": "sliderBox",
        "mover": "sliderMover",
        "bar": "sliderBar",
        "tooltip": "sliderTooltip"
    },
    "lpSlider": {
        "box": "lpsliderBox",
        "mover": "lpsliderMover",
        "bar": "lpsliderBar",
        "tooltip": "lpsliderTooltip"
    }
    //	"bookSlider" : {
    //		"box" : "sliderBox",
    //		"mover" : "sliderMover",
    //		"bar" : "sliderBar",
    //		"tooltip" : "sliderTooltip",
    //	},
};

// fn OHNE ();
//var fnReleaseCallback = fnc;
var fnMoveCallback = function(iLeft, tooltip){
    tooltip.innerHTML = 'Offset: ' + iLeft;
};
var fnReleaseCallback = function(iLeft){
    window.status = "callback: " + iLeft;
};

function activateSlider(slider){
    activeSlider = slider;
}

function initSlider(e){

    /* get HTML elements */
    box = document.getElementById(activeSlider["box"]);
    mover = document.getElementById(activeSlider["mover"]);
    bar = document.getElementById(activeSlider["bar"]);
    tooltip = document.getElementById(activeSlider["tooltip"]);
    
    
    /* Apply styles */
    if (bar.style.setAttribute && tooltip.style.setAttribute) {
        bar.style.setAttribute("backgroundColor", "#F7F7F7");
        if (SLIDER_SHOWTOOLTIP === true || typeof(SLIDER_SHOWTOOLTIP) != 'boolean') {
            tooltip.style.setAttribute("display", "block");
        }
        //		tooltip.style.setAttribute("top", "-50px");
        tooltip.style.zIndex = 10001;
    }
    else {
        bar.style.backgroundColor = "#F7F7F7";
        if (SLIDER_SHOWTOOLTIP === true || typeof(SLIDER_SHOWTOOLTIP) != 'boolean') {
            tooltip.style.display = "block";
        }
        tooltip.style.zIndex = 10001;
        //		tooltip.style.top = "-50px";
    }
    
    if (e.cancelBubble) {
        e.cancelBubble = true;
    }
    if (typeof(e.stopPropagation)=='function') {
        e.stopPropagation();
    }
    
    /* Preset Variables */
    bSliderActive = true;
    iPageOffsetX = e.clientX;
    bHitLowerBound = false;
    iBoxWidth = parseInt(getStyle(box, "width", "width"));
    iBarLeft = parseInt(getStyle(bar, "left", "left"));
    
    fnMoveCallback(iBarLeft, tooltip);
    
    positionateTooltip(e);
    var body = document.getElementsByTagName("body")[0];
    if (body.attachEvent) {
        body.attachEvent("ondrag", markPrevention);
        body.attachEvent("onselectstart", markPrevention);
    }
    addEvent(mover, "mousemove", moveSlider);
    addEvent(body, "mousemove", moveSlider);
}

var a = "";
var b = "";
function moveSlider(e){
    tooltip.innerHTML = e.clientX;
    
    var iBarWidth = parseInt(getStyle(bar, "width", "width"));
    var iBarLeft = parseInt(getStyle(bar, "left", "left"));
    var iBarRight = parseInt(getStyle(bar, "right", "right"));
    var iNewOffset = iPageOffsetX - e.clientX;
    iBarLeft -= iNewOffset;
    
    // =====> left side....
    
    // detect a bouncing out of bounds on the left side
    if (iBarLeft <= 1) {
        tooltip.innerHTML = "Hit lower!";
        if (!bOutOfBoundsLeft && iBoundsEntry == 0) {
            iBoundsEntry = e.clientX;
            bOutOfBoundsLeft = true;
        }
    }
    
    // check wether the mouse is back
    if (bOutOfBoundsLeft && e.clientX >= iBoundsEntry && iPageOffsetX < e.clientX) {
        iBarLeft = e.clientX - iBoundsEntry;
        iBoundsEntry = 0;
        bOutOfBoundsLeft = false;
    }
    
    // bounces out left side
    if (bOutOfBoundsLeft && e.clientX <= iBoundsEntry) {
        iBarLeft = 1;
    }
    
    
    // =====> right side....
    
    if (iBarLeft + iBarWidth > iBoxWidth - 3) {
        tooltip.innerHTML = "Hit upper!";
        if (!bOutOfBoundsRight && iBoundsEntry == 0) {
            iBoundsEntry = e.clientX;
            bOutOfBoundsRight = true;
        }
    }
    
    if (bOutOfBoundsRight && e.clientX >= iBoundsEntry) {
        iBarLeft = iBoxWidth - iBarWidth - 3;
    }
    
    if (bOutOfBoundsRight && e.clientX <= iBoundsEntry && iPageOffsetX > e.clientX) {
        iBarLeft -= e.clientX - iBoundsEntry;
        iBoundsEntry = 0;
        bOutOfBoundsRight = false;
    }
    
    //	window.status = iPageOffsetX + " " + e.clientX + " " + iBarLeft + " " + iNewOffset + " " + iBoundsOffset + " " + iBoundsEntry + " " + bOutOfBoundsRight;
    if (iBarLeft > 0 & (iBarLeft + iBarWidth) < iBoxWidth) {
        if (mover.style.setAttribute && bar.style.setAttribute) {
            mover.style.setAttribute("left", iBarLeft + "px");
            bar.style.setAttribute("left", iBarLeft + "px");
            //			mover.style["left"] = iBarLeft + "px";
        }
        else {
            mover.style.left = iBarLeft + "px";
            bar.style.left = iBarLeft + "px";
        }
        iPageOffsetX = e.clientX;
    }
    iCallBackOffset = iBarLeft;
    fnMoveCallback(iBarLeft, tooltip);
    //positionateTooltip(e);
}

function releaseSlider(e){
    if (!bSliderActive) {
        return;
    }
    bSliderActive = false;
    
    if (typeof(e) != "undefined") {
        if (e.cancelBubble) {
            e.cancelBubble = true;
        }
        
        if (e.stopPropagation) {
            e.stopPropagation();
        }
    }
    
    var body = document.getElementsByTagName("body")[0];
    if (body.attachEvent) {
        body.detachEvent("ondrag", markPrevention);
        body.detachEvent("onselectstart", markPrevention);
    }
    removeEvent(mover, "mousemove", moveSlider);
    removeEvent(body, "mousemove", moveSlider);
    
    /* Remove Styles */
    if (bar) {
        if (bar.style.setAttribute && tooltip.style.setAttribute) {
            bar.style.setAttribute("backgroundColor", "#EFEFEF");
            tooltip.style.setAttribute("display", "none");
        }
        else {
            bar.style.backgroundColor = "#EFEFEF";
            tooltip.style.display = "none";
        }
        
        fnReleaseCallback(iCallBackOffset);
    }
    
    /* Reset Variables */
    bOutOfBoundsLeft = false;
    bOutOfBoundsRight = false;
    iBoundsEntry = 0;
}

function positionateTooltip(e){
    var iTTpW = getStyle(tooltip, "width", "width");
    if (iTTpW == "auto") {
        iTTpW = getStyle(tooltip, "minWidth", "min-width");
    }
    iTooltipWidth = parseInt(iTTpW);
    iBarWidth = parseInt(getStyle(bar, "width", "width"));
    
    iLeft = (iBarWidth / 2) - (iTooltipWidth / 2) - 3;
    tooltip.style.left = iLeft + "px";
}

function markPrevention(){
    return false;
}

function addEvent(obj, type, fn){
    try {
        if (obj.addEventListener) {
            try {
                obj.addEventListener(type, fn, false);
            } 
            catch (e) {
            }
            return true;
        }
        else 
            if (obj.attachEvent) {
                var r = obj.attachEvent("on" + type, fn);
                return r;
            }
        return false;
    } 
    catch (e1) {
        //		alert("couldn't attach event " + fn);
    }
}

function removeEvent(obj, type, fn){
    if (obj.removeEventListener) {
        try {
            obj.removeEventListener(type, fn, false);
        } 
        catch (e) {
        }
        return true;
    }
    else 
        if (obj.detachEvent) {
            var r = obj.detachEvent("on" + type, fn);
            return r;
        }
    return false;
}


function getStyle(elem, IEStyleProp, CSSStyleProp){
    if (window.getComputedStyle) {
        try {
            var compStyle = window.getComputedStyle(elem, "");
            return compStyle.getPropertyValue(CSSStyleProp);
        } 
        catch (e) {
            return "";
        }
    }
    else 
        if (elem.currentStyle) {
            return elem.currentStyle[IEStyleProp];
        }
    return "";
}