//<![CDATA[

// Preloading the images used for the slider handle
var imgList = ["slider-disabled.png", "slider-disabled-1.png", "slider.png", "slider-1.png"];
var preloadImg = []
for(var i = 0, imgSrc; imgSrc = imgList[i]; i++) {
        preloadImg[i] = new Image();
        preloadImg[i].src = "../site/Images/" + imgSrc;
};

// Remember folks, none of this JavaScript is actually necessary, it's just there to show you
// how to extend the slider functionality with callback functions/Object.methods

// Callback functions for the two selectlist sliders
function updateSelect1() {
        var sel = document.getElementById("selectTest1");
        document.getElementById("selectTest1Label").innerHTML = 'Range "lowest" to "highest", current value: ' + sel.options[sel.selectedIndex].value;
};

function updateSelect2() {
        var sel = document.getElementById("selectTest2");
        document.getElementById("selectTest2Label").innerHTML = "Range -10 to 10, current value: " + sel.options[sel.selectedIndex].value;
};

// Convert and rgb value to hex
function toHex(N) {
        if (N==null) return "00";
        N=parseInt(N);
        if (N==0 || isNaN(N)) return "00";
        N=Math.max(0,N); N=Math.min(N,255);
        N=Math.round(N);
        return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
}

// Create the demo callback function shared between the first three sliders
function updateColor() {
        var r = parseInt(document.getElementById('slider-r').value, 10) || 0;
        var g = parseInt(document.getElementById('slider-g').value, 10) || 0;
        var b = parseInt(document.getElementById('slider-b').value, 10) || 0;

        var cbox = document.getElementById("colorBox");
        if(cbox) cbox.style.backgroundColor = "rgb("+r+ ","+g+","+b+")";
        var res = document.getElementById("hexValue");
        if(res) res.innerHTML = "#" + toHex(r) + toHex(g) + toHex(b);
}

// Create the div used to show the dynamically generated color
function createColorBox() {
        var dl = document.getElementsByTagName('dl')[0];
        var box  = document.createElement('div');
        box.setAttribute('id','colorBox');

        var res  = document.createElement('div');
        res.setAttribute('id','hexValue');

        dl.parentNode.insertBefore(res, dl.nextSibling);
        dl.parentNode.insertBefore(box, res);
        updateColor();
        
        // Clean up for poor old IE
        res = box = null;
}

// Testing the use of an object method as a callback for the vertical slider
var myObject = function() {
        this.callback = function() {
                var v = parseInt(document.getElementById('slider-v').value) || 0;
                var p = document.getElementById("verticalWrapper").getElementsByTagName("p")[0];
                p.innerHTML = "Hidden input value: <em>" + v + "</em>";
        }
        return this;
}()

function setUpVerticalSliderOutput() {
        // Dynamically create the paragraph that will be updated within the callback
        var p = document.createElement("p");
        // Append it to the div
        document.getElementById("verticalWrapper").appendChild(p);
        // Stop IE memory leaks
        p = null;

        // Call the callback immediately in order to update the paragraph info
        myObject.callback();
}

//]]>