(function () {
    YAHOO.namespace('example');

    var Dom = YAHOO.util.Dom;

    // Slider has a range of 600 pixels
    var range = 600;

    // No ticks for this example
    var tickSize = 0;

    // We'll set a minimum distance the thumbs can be from one another
    var minThumbDistance = 0;

    // Initial values for the thumbs
    var initValues = [0,26];

    // Conversion factor from 0-600 pixels to 1-100
    // Note 20 pixels are subtracted from the range to account for the
    // thumb values calculated from their center point (10 pixels from
    // the center of the left thumb + 10 pixels from the center of the
    // right thumb)
    var cf = 99/(range-20);

    // Set up a function to convert the min and max values into something useful
    var convert = function (val) {
        return Math.round(val * cf + 1);
    };

    // Slider set up is done when the DOM is ready
    YAHOO.util.Event.onDOMReady(function () {
        var demo_bg = Dom.get("demo_bg"),
            numColors = Dom.get("numColorsDiv"),
            curColor = Dom.get("currentColorDiv");

        // Create the DualSlider
        var slider = YAHOO.widget.Slider.getHorizDualSlider(demo_bg,
            "demo_min_thumb", "demo_max_thumb",
            range, tickSize, initValues);

        slider.minRange = minThumbDistance;
        
        topDual = slider;
        
        // Custom function to update the text fields, the converted value
        // report and the slider's title attribute
        var updateUI = function () {

            // Update the converted values and the slider's title.
            // Account for the thumb width offsetting the value range by
            // subtracting the thumb width from the max value.
            var min = convert(slider.minVal),
                max = convert(slider.maxVal - 20);

            curColor.innerHTML = "Editing Color " + min + " of " + max;
            numColors.innerHTML = "Number of Colors to Use in Fade: " + max;
            demo_bg.title  = "";//"Editing Color " + min + " of " + max;
            
            SelectedColor = min;
            NumberOfColors = max;
            
            updateCodePreviewBars();
        };

        // Subscribe to the dual thumb slider's change and ready events to
        // report the state.
        slider.subscribe('ready', updateUI);
        slider.subscribe('change', updateUI);

        // Attach the slider to the YAHOO.example namespace for public probing
        YAHOO.example.slider = slider;
    });
})();

//create a namespace object in the example namespace:
YAHOO.namespace("example.colorpicker")

//create a new object for this module:
YAHOO.example.colorpicker.inDialog = function() {

    //Some shortcuts to use in our example:
    var Event=YAHOO.util.Event,
        Dom=YAHOO.util.Dom,
        lang=YAHOO.lang;

    return {
    
        //In our initialization function, we'll create the dialog;
        //in its render event, we'll create our Color Picker instance.
        init: function() {

            // Instantiate the Dialog
            this.dialog = new YAHOO.widget.Dialog("yui-picker-panel", { 
                width : "500px",
                close: true,
                fixedcenter : true,
                visible : false, 
                constraintoviewport : true,
                buttons : [ { text:"Submit", handler:this.handleSubmit, isDefault:true },
                            { text:"Cancel", handler:this.handleCancel } ]
             });
 
            // Once the Dialog renders, we want to create our Color Picker
            // instance.
            this.dialog.renderEvent.subscribe(function() {
                if (!this.picker) { //make sure that we haven't already created our Color Picker
                    YAHOO.log("Instantiating the color picker", "info", "example");
                    this.picker = new YAHOO.widget.ColorPicker("yui-picker", {
                        container: this.dialog,
                        images: {
                            PICKER_THUMB: "./colorpicker_assets/picker_thumb.png",
                            HUE_THUMB: "./colorpicker_assets/hue_thumb.png"
                        },
                        showhexcontrols: true,
                        showhsvcontrols: true
                        //Here are some other configurations we could use for our Picker:
                        //showcontrols: false,  // default is true, false hides the entire set of controls
                        //showhexcontrols: true, // default is false
                        //showhsvcontrols: true  // default is false
                    });

                    //listen to rgbChange to be notified about new values
                    this.picker.on("rgbChange", function(o) {
                        YAHOO.log(lang.dump(o), "info", "example");
                    });
                }
            });    
            
            // If we wanted to do form validation on our Dialog, this
            // is where we'd do it.  Remember to return true if validation
            // passes; otherwise, your Dialog's submit method won't submit.
            this.dialog.validate = function() {
                return true;
            };

            // Wire up the success and failure handlers
            this.dialog.callback = { success: this.handleSuccess, thisfailure: this.handleFailure };
            
            // We're all set up with our Dialog's configurations;
            // now, render the Dialog
            this.dialog.render();
            
            pickerObj = this;
            
            // We can wrap up initialization by wiring all of the buttons in our
            // button dashboard to selectively show and hide parts of the
            // Color Picker interface.  Remember that "Event" here is an
            // alias for YAHOO.util.Event and "Event.on" is therfor a shortcut
            // for YAHOO.util.Event.onAvailable -- the standard Dom event attachment
            // method:
            Event.on("show", "click", this.dialog.show, this.dialog, true);
            Event.on("showBgColorPicker", "click", function(e, obj) {
                        changingOutputBg = true;
                        obj.show();
                    }, this.dialog, true);
            Event.on("hide", "click", this.dialog.hide, this.dialog, true);
            Event.on("btnhsv", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_HSV_CONTROLS, !p.get(p.OPT.SHOW_HSV_CONTROLS));
                    }, this.dialog, true);

            Event.on("btnhex", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_HEX_CONTROLS, !p.get(p.OPT.SHOW_HEX_CONTROLS));
                    }, this.dialog, true);
            Event.on("btnrgb", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_RGB_CONTROLS, !p.get(p.OPT.SHOW_RGB_CONTROLS));
                    }, this.dialog, true);
            Event.on("btnhexsummary", "click", function(e) {
                        var p = this.picker;
                        p.set(p.OPT.SHOW_HEX_SUMMARY, !p.get(p.OPT.SHOW_HEX_SUMMARY));
                    }, this.dialog, true);
            
            //initialization complete:
            YAHOO.log("Example initialization complete.", "info", "example");

        },
        
        //We'll wire this to our Dialog's submit button:
        handleSubmit: function() {
            //submit the Dialog:
            this.submit();
            //log this step to logger:
            YAHOO.log("Dialog was submitted.", "info", "example");
        },
 
         //If the Dialog's cancel button is clicked,
        //this function fires
        handleCancel: function() {
            //the cancel method automatically hides the Dialog:
            this.cancel();
            //log this step to logger:
            YAHOO.log("Dialog was submitted.", "info", "example");
        },
        
        //We'll use Connection Manager to post our form data to the
        //server; here, we set up our "success" handler.
        handleSuccess: function(o) {
            YAHOO.log("Connection Manager returned results to the handleSuccess method.", "info", "example");
            var response = o.responseText;
            //On Yahoo servers, we may get some page stamping;
            //we can trim off the trailing comment:
            response = response.split("<!")[0];
            //write the response to the page:
            //response = "<strong>The data received by the server was the following:</strong> " + response;
            
            var responseArray = response.split(" ");
            
            var theHexCode = responseArray[responseArray.length-1];
            theHexCode = theHexCode.substring(0,6);
            
            //alert(theHexCode);
            
            if (changingOutputBg == false)
            {
              document.getElementById("txt-color-code").value = theHexCode;
              updateColorFromTxt(document.getElementById("txt-color-code").value);  
            } 
            else
            {
              document.getElementById("borderOfTextDivBG").style.backgroundColor = "#" + theHexCode;
              //document.getElementById("textDivBG").style.backgroundColor = "#" + theHexCode;
            }
            
            changingOutputBg = false;
            //document.getElementById("resp").innerHTML = response;
        },
        
        handleFailure: function(o) {
            YAHOO.log("Connection Manager returned results to the handleFailure method.", "error", "example");
            YAHOO.log("Response object:" + lang.dump(o), "error", "example");
        }
   
    }


}();

//The earliest safe moment to instantiate a Dialog (or any
//Container element is onDOMReady; we'll initialize then:
YAHOO.util.Event.onDOMReady(YAHOO.example.colorpicker.inDialog.init, YAHOO.example.colorpicker.inDialog, true);