/*
    widgets.js container class for widgets configuration page
    Dependencies : Prototype JavaScript framework 1.6
                   utilities.js
*/

var SOSCuisine = SOSCuisine || {};

SOSCuisine.widgets =  
{
    config : {},
    script : null,
    iFrameTarget : null,
    snippetTarget : null,
    colorPickers : [],
    colorPickerMenus : [],
    url : "",
    
    initialize : function()
    {
        this.url = "http://" + document.domain + SOSCuisine.config.urlRoot + SOSCuisine.widgets.config.url;
        this.iFrameTarget = $('widget_preview');
        this.snippetTarget = $('widget_snippet');    
        this.initializeColorPicker();
        this.update();
    },
    
    update : function()
    {
        var queryParams = this.getUrlHash();
        this.updateIFrame(queryParams);
        this.updateLink(queryParams.get('widget_language'));
        this.updateSnippet(queryParams);
    },
        
    getUrlHash : function()
    {
       var queryParams  = new Hash();
       
       queryParams.set("widget_language", $("widget_language").value);
       queryParams.set("widget_layout", $("widget_layout").value);
       queryParams.set("widget_style", $("widget_style").value);

       if (queryParams.get("widget_layout") == "custom")
       {
           queryParams.set("widget_width", $("widget_width").value);
           queryParams.set("widget_height", $("widget_height").value);       
       }

       if (queryParams.get("widget_style") == "custom")
       {
           queryParams.set("widget_border_color", $("widget_border_color_hidden").value);
           queryParams.set("widget_head_fg_color", $("widget_head_fg_color_hidden").value);
           queryParams.set("widget_head_bg_color", $("widget_head_bg_color_hidden").value);
           queryParams.set("widget_content_fg_color", $("widget_content_fg_color_hidden").value);              
       }
       
       queryParams.set("widget_display_mode", $("widget_display_mode").value);             
                          
       return queryParams; 
    },
    
    updateLink : function(widgetLanguage)
    {
       var widgetLink = $('widget_link');
       widgetLink.innerHTML = SOSCuisine.widgets.config["caption_" + widgetLanguage];
       widgetLink.href = "http://" + document.domain + SOSCuisine.widgets.config["caption_url_" + widgetLanguage];
    },
    
    updateIFrame : function(queryParams)
    {       
       queryParams.set("widget_wrapper_type", "ajax");
       this.iFrameTarget.innerHTML = "";
       this.iFrameTarget.style.height = this.iFrameTarget.offsetHeight;
       new Ajax.Request(this.url + "?" + queryParams.toQueryString(), 
       {
           method : "get",
           encoding: 'iso-8859-1',
           onSuccess : function(transport) 
           {
              var response = transport.responseText || "";        
              this.iFrameTarget.innerHTML = response;
              this.iFrameTarget.style.height = "auto";
           }.bind(this)
       });       
    },
    
    numericOnly : function(evt)
    {
       var key = evt.which || evt.keyCode;
       if ((key < 48 || key > 57) && (key < 96 || key > 105) && key != Event.KEY_TAB && key != Event.KEY_BACKSPACE)
       {
           return false;
       }
       return true;
    },
       
    validateSize : function(obj, defaultValue)
    {
       if (obj.value.length == 0 || obj.value == 0)
       {
           obj.value = defaultValue;
       }
    },       
    
    updateSnippet : function(queryParams)
    {
       var language = queryParams.get("widget_language");
       queryParams.set("widget_wrapper_type", $("widget_wrapper_type").value);
       
       var snippetCode = '<!-- Begin SOSCuisine Widget -->\n';
       snippetCode += '<div class="soscuisine_widget">\n';
           snippetCode += '<div class="soscuisine_widget_script">\n';
              snippetCode += '<script type="text/javascript" src="' + this.url + "?" + queryParams.toQueryString() + '"></script>\n';       
           snippetCode += '</div>\n';
           snippetCode += '<div class="soscuisine_widget_link"><a style="font-size: x-small" href="' + "http://" + document.domain + SOSCuisine.widgets.config["caption_url_" + language] + '">' + SOSCuisine.widgets.config["caption_" + language] + '</a></div>\n';
       snippetCode += '</div>\n';
       snippetCode += '<!-- End SOSCuisine Widget -->';              
       this.snippetTarget.value = snippetCode;
    },
    
    widget_layout_onclick : function(obj)
    {
        if (obj.options[obj.selectedIndex].value == "custom")
        {
            $('custom_layout').show();
        }
        else
        {
            $('custom_layout').hide();        
        }
    },
    
    widget_style_onclick : function(obj)
    {
        if (obj.options[obj.selectedIndex].value == "custom")
        {
            $('custom_style').show();
        }
        else
        {
            $('custom_style').hide();      
        }
    },
    
    widget_display_mode_onclick : function(obj)
    {
       var widgetLayout = $('widget_layout');
       var customLayoutOption = widgetLayout.options[widgetLayout.options.length - 1];
       widgetLayout.options.length = 0;
       SOSCuisine.widgets.config.display_mode[obj.value].each(function(mode, i)
       {
           widgetLayout.options[i] = (new Option(mode, mode));
       });
       widgetLayout.options[widgetLayout.options.length] = customLayoutOption;
       
    },
    
    initializeColorPicker : function()
    {
       var colorPickers = $$('.color-picker');
       colorPickers.each(function(colorPicker){
           YAHOO.util.Event.onContentReady(colorPicker.id, function()
           {
                var defaultValue = $(colorPicker.id + "_hidden").value;
                $(colorPicker.id + "_hidden").value = "#" + defaultValue;
                new this.colorPicker(colorPicker.id, defaultValue);
           }.bind(this));
       }.bind(this));
    },
    
    selectCodeSnippet : function()
    {
        var codeSnippet = $('widget_snippet');
        codeSnippet.focus();
        codeSnippet.select()
    }
};

SOSCuisine.widgets.colorPicker = Class.create({
    id : "",
    oColorPickerMenu : null,
    oButton : null,
    oColorPicker : null,
    defaultValue : "",
    
    initialize : function(id, defaultValue)
    {  
        this.id = id;
        this.defaultValue = defaultValue;
        this.oColorPickerMenu = new YAHOO.widget.Menu(this.id + "_menu");
        this.oColorPickerMenu.subscribe("hide", this.onHide, this)
        
        this.oButton = new YAHOO.widget.Button({ 
                                                  type: "split", 
                                                  id: this.id  + "_button", 
                                                  label: "<em style=\"background-color:" + "#" + this.defaultValue + "\" id=\"" + this.id + "_color" + "\"> </em>", 
                                                  menu: this.oColorPickerMenu, 
                                                  container: this.id
                                              });       
                                                                
        this.oButton.on("appendTo", function (p_oEvent, obj) {
            obj.oColorPickerMenu.setBody("&#32;");	
            obj.oColorPickerMenu.body.id = obj.id + "_color_picker_container";
            obj.oColorPickerMenu.render(this.get("container"));
        }, this);
                                                       
        this.oButton.on("option", this.onButtonOption, this);    
    },
    
    onHide : function(p_sType, p_aArgs, obj) 
    {
       $(obj.id + "_hidden").value = obj.oButton.get("value");
       SOSCuisine.widgets.update();
    },
    
    onButtonOption : function (p_oEvent, obj) 
    {
        obj.oColorPicker = new YAHOO.widget.ColorPicker(obj.oColorPickerMenu.body.id, {
            showcontrols: true,
            showhexsummary : false,
            showrgbcontrols : false,
            showwebsafe : false,
            showhsvcontrols: false,
            showhexcontrols: true,
            images: {
                PICKER_THUMB: SOSCuisine.config.urlRoot + "scripts/yui/colorpicker/assets/picker_thumb.png",
                HUE_THUMB: SOSCuisine.config.urlRoot + "scripts/yui/colorpicker/assets/hue_thumb.png"
            }
        });
                        
        obj.oColorPicker.on("rgbChange", function (p_oEvent, obj) {
            var sColor = "#" + this.get("hex");
            obj.oButton.set("value", sColor);
            YAHOO.util.Dom.setStyle(obj.id + "_color" , "backgroundColor", sColor);
        }, obj);  
        
        obj.oColorPicker.setValue(YAHOO.util.Color.hex2rgb(obj.defaultValue), true);
                                  
        obj.oButton.unsubscribe("option", obj.onButtonOption);
    }
                    
});

SOSCuisine.common.addLoadEvent(SOSCuisine.widgets.initialize.bind(SOSCuisine.widgets));