function addEvent(event, elm, handler, bubble) {
    if (elm.addEventListener)
        elm.addEventListener(event, handler, bubble);
    else if (elm.attachEvent)
        elm.attachEvent("on" + event, handler);
}

function delEvent(event, elm, handler, bubble) {
    if (elm.removeEventListener)
        elm.removeEventListener(event, handler, bubble);
    else if (elm.detachEvent)
        elm.detachEvent("on" + event, handler);
}

function getObjectMethodClosure(object, method) {
    return function(arg) {
        return object[method](arg);
    }
}
var element = getObjectMethodClosure(document, "createElement");
var txtNode = getObjectMethodClosure(document, "createTextNode");

/*
* Slider
*/
function Slider(id, resolution) {
    this.setSize = function(width, height) {
        this.width = width;
        this.height = height;
    }

    this.drag = function(event) {
        if (!event) var event = window.event;
        var deltaX = event.clientX - parseInt(sl.s.style.left);


        addEvent("mousemove", document.getElementById("pagesettings"), moveHandler, true);
        addEvent("mouseup", document.getElementById("pagesettings"), upHandler, true);

        function moveHandler(e) {
            var x; var y; var newvalue;
            if (!e) e = window.event;

            var l = sl.width - 10;

            x = e.clientX - deltaX;
            if (x < 0)
                x = 0;
            else if (x > l)
                x = l;
            else
                x = x - 0;
            sl.s.style.left = (x) + "px";
            newvalue = parseInt((x + 0) * sl.resolution / l);

            if (newvalue != sl.value) {
                sl.value = newvalue;
                sl.onChange(newvalue);
            }
        }

        function upHandler(e) {
            if (!e) e = window.event;
            delEvent("mouseup", document.getElementById("pagesettings"), upHandler, true);
            delEvent("mousemove", document.getElementById("pagesettings"), moveHandler, true);
        }
    }

    this.onChange = function(value) {
        alert(value);
    }

    this.setStart = function(value) {
        // Use only AFTER you defined onChange
        this.value = value;
        this.onChange(value);
        this.moveSlide(value);
    }

    this.moveSlide = function(value) {

        var l;
        var length = this.width - 10;
        l = parseInt(length * value / this.resolution);
        this.s.style.left = (l) + "px";

    }

    this.createSlider = function() {
        var rel = element("div");
        rel.style.display = "none";
        rel.style.position = "relative";
        rel.setAttribute("id", this.id + "_slider");

        var bar = element("div");
        bar.style.position = "absolute";
        bar.style.backgroundColor = "#000";

        bar.style.left = "0px";
        bar.style.top = (parseInt(this.height / 2) - 1) + "px";
        bar.style.width = (this.width) + "px";
        bar.style.height = "2px";
        rel.style.height = "2px";

        rel.appendChild(bar);

        // Set slider image as background element to fix IE quirk
        var img = element("div");
        img.style.backgroundImage = 'url("/img/button.png")';
        img.style.backgroundRepeat = "no-repeat";
        img.style.width = "11px";
        img.style.height = "10px";
        img.style.padding = "0px";
        img.style.position = "absolute";
        img.style.left = "0px";
        img.style.top = "0px";

        img.onmousedown = this.drag;
        this.s = img;

        rel.appendChild(img);
        document.getElementById(this.id).appendChild(rel);
    }

    this.show = function() {
        this.s.parentNode.style.display = "block";
    }

    // Initialize class
    this.id = id;
    this.resolution = 10;
    this.height = 10;
    this.width = 100;
    this.s = null;
    this.value = 0;
    var sl = this;

    if (resolution != undefined)
        this.resolution = resolution;

    this.createSlider();
}