/* 
 * JavaScript to provide the user with a button which is rendered / styled
 * Parameters:
 * title: The text to be written on the button
 * height: Display height before scrolling
 * width: Display width before scrolling
 * onclick: The JavaScript function when the button is clicked
 * onhover: The JavaScript function when the button is hovered
 * userparams: A JavaScript object that the user supplies to be supplied back to the above call back functions
 * 
 */


WebstoreJavaScriptContext.prototype.button = function(args)
{
    if (args == "destroy")
    {
        destroy(this.elements);
        return;
    }
    
    // Always supply arguements to avoid null problems
    if (args == null) args = {};
    args.refWindow = parent;
    

    for (var i=0; i<this.elements.length; i++)
    {
        // Save the args onto the elements context
        this.elements[i].decoratedButtonArgs = jQuery.extend(true, {}, args);
        this.elements[i].decoratedButtonArgs.button = $(this.elements[i]);
        
        // If no title is set then create one
        if (this.elements[i].decoratedButtonArgs.title == null) 
            this.elements[i].decoratedButtonArgs.title = $(this.elements[i]).attr("value");
        
        // Get classes and styles of element
        var extraCssClasses = $(this.elements[i]).attr("class");
        if (extraCssClasses == null) extraCssClasses = "";
        
        var extraCssStyle = $(this.elements[i]).attr("style");
        if (extraCssStyle == null) extraCssStyle = "";
        
        // First hide the current select
        $(this.elements[i]).hide();
        
        var icon = "";
        if ($(this.elements[i]).attr("icon") != null && $(this.elements[i]) != "")
        {
            icon = "<span class='ws-decorated-button-icon'><img src='" + $(this.elements[i]).attr("icon") + "' /></span>";
        }

        // Add the decorated button HTML
        if (this.elements[i].decoratedButtonArgs.external == true)  {
            $(this.elements[i]).after("<div class='ws-decorated-button ws-decorated-external ui-corner-all " + extraCssClasses + "' style='" + extraCssStyle + "'><div class='ui-corner-all' style=\"padding-right: 2px;\">" + 
                                    icon + this.elements[i].decoratedButtonArgs.title + "</div></div>");
        } else {
            $(this.elements[i]).after("<div class='ws-decorated-button ws-decorated-normal ui-corner-all " + extraCssClasses + "' style='" + extraCssStyle + "'><div class='ui-corner-all'>" + 
                                    icon + this.elements[i].decoratedButtonArgs.title + "</div></div>");
        }

        var element = $(this.elements[i]).next();
        $(element)[0].decoratedButtonArgs = this.elements[i].decoratedButtonArgs;
        
        // Set the width if one is specified
        if (this.elements[i].decoratedButtonArgs.width != null)
            $(element).css("width", this.elements[i].decoratedButtonArgs.width);
        
        $(element).unbind("click");
        $(element).bind('click', function()
        {
                // if a click event has been registered then use it. Otherwise trigger the original element's one
            if ($(this)[0].decoratedButtonArgs.onclick != null && jQuery.isFunction($(this)[0].decoratedButtonArgs.onclick))
                this.decoratedButtonArgs.onclick.call(this, $(this)[0].decoratedButtonArgs.userParams, $(this)[0].decoratedButtonArgs);
                else
                $($(this)[0].decoratedButtonArgs.button).trigger("click");
            });
    }

    // Functions declared within this JS plugins scope
    function destroy(elements)
    {
        if (elements == null) return;
        
        for (var i=0; i<elements.length; i++)
        {
            // Destroy the args and click components for this element
            if (elements[i].decoratedButtonArgs != null)
            {
                $(elements[i]).unbind("click");
                elements[i].decoratedButtonArgs = null;
            }
        }
    }
}