// Disable the mouseWheel operations for all sliders...
//fdSliderController.disableMouseWheel();

// 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 = "/style/gfx/slider/" + 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

// The tooltip object
var TT = {
        tooltip:null,
        tooltipInner:null,
        handle:null,
        init:function(e) {    
                           
                // Grab a reference to the slider handle
                var handle = document.getElementById("fd-slider-handle-range");

                // If something has gone wrong then bail out...
                if(!handle) { return; };

                // Create the tooltip...
                var tt = document.createElement("div");
                tt.id = "tooltip";
                        
                var TTinner1 = document.createElement("div");
                TTinner1.id = "tooltipInner1";

                var TTinner2 = document.createElement("div");
                TTinner2.id = "tooltipInner2";

                TTinner1.appendChild(TTinner2);
                tt.appendChild(TTinner1);
                        
                document.getElementsByTagName('body')[0].appendChild(tt);

                // Cache a reference to the tooltip, tooltip inner & slider handle
                TT.tooltip      = tt;
                TT.tooltipInner = TTinner2;
                TT.handle       = handle;
                
                // Add the required events...
                
                // Show the tooltip when the slider is focused
                fdSliderController.addEvent(handle, "focus", TT.show);
                
                // Hide the tooltip when the slider is blurred
                fdSliderController.addEvent(handle, "blur",  TT.hide);
               
                // Internet Explorer fills the input's value attribute after the
                // onload event fires so we need to set a timeout of 200ms in order
                // to be able to read this "delayed" value and correctly reset 
                // the toolTip position.
                TT.tooltip.style.display = "block";
                TT.tooltip.style.visibility = "hidden";                
                /*@cc_on
                /*@if(@_win32)
                setTimeout(function() { TT.update(); TT.tooltip.style.display = "none"; TT.tooltip.style.visibility = "hidden"; }, 800);
                @else @*/
                TT.update();                          
                TT.tooltip.style.display = "none";
                TT.tooltip.style.visibility = "hidden";
                /*@end
                @*/                 
                
        },
        // A function that positions the tooltip and updates it's value
        // This is also used as the callback function for the slider
        update:function(e) {                                                                 
                var curleft = 0,
                    curtop  = 0,
                    obj     = TT.handle,
                    osw     = obj.offsetWidth;
                
                // Try catch for IE's benefit
                try {
                        while (obj.offsetParent) {
                                curleft += obj.offsetLeft;
                                curtop  += obj.offsetTop;
                                obj      = obj.offsetParent;
                        };
                } catch(err) { };

                TT.tooltip.style.left = Math.round((curleft - ((TT.tooltip.offsetWidth - osw) / 2))) + "px";
                TT.tooltip.style.top = (curtop - 30)  + "px";

                while(TT.tooltipInner.firstChild) { TT.tooltipInner.removeChild(TT.tooltipInner.firstChild); };

                var txt = document.getElementById("range");
                txt = txt.options[txt.selectedIndex].text;

                TT.tooltipInner.appendChild(document.createTextNode(txt));                
        },
        show:function(e) {
                e = e || window.event;                 
                if(e && e.type && e.type != "focus") return;
                TT.tooltip.style.display = "block";
                TT.tooltip.style.visibility = "visible";
                TT.update();                  
        },
        hide:function(e) {
                e = e || window.event;
                if(e && e.type && e.type != "blur") return;
                TT.tooltip.style.display = "none";
                TT.tooltip.style.visibility = "hidden";
        }
};