/*globals svgEditor, svgCanvas, $*/
/*jslint vars: true, eqeq: true*/
/*
 * ext-helloworld.js
 *
 * Licensed under the MIT License
 *
 * Copyright(c) 2010 Alexis Deveria
 *
 */
var advancedClicked = false;

svgEditor.addExtension("Advanced", function() {'use strict';                                     
                                               
		return {
			name: "Advanced",
			// The icon for 'advanced features'
			svgicons: svgEditor.curConfig.extPath + "advanced-icon.xml",
			
			// Multiple buttons can be added in this array
			buttons: [{
				// Must match the icon ID in advanced-icon.xml
				id: "advanced", 
				
				// This indicates that the button will be added independently to the buttons in the button
				// panel on the left side (it will not be unselected when one of the other buttons is selected)
				type: "context",
                panel: "tools_left",
				
				// Tooltip text
				title: "Show/Hide Advanced Features", 
				
				// Events
				events: {
					'click': function() {
                        // Toggle the advanced button
                        if (advancedClicked == true)
                        {
                            advancedClicked = false;
                            // Hide advanced features
                            advancedButton(advancedClicked);
                        }
                        else
                        {
                            advancedClicked = true; 
                            // Hide advanced features
                            advancedButton(advancedClicked);
                        }
					}
				}
			}],
			// This is triggered when the main mouse button is pressed down 
			// on the editor canvas (not the tool panels)
			mouseDown: function() {
                advancedButton(advancedClicked);

                // The returned object must include "started" with 
                // a value of true in order for mouseUp to be triggered
                return {started: true};
			},
			
			// This is triggered from anywhere, but "started" must have been set
			// to true (see above). Note that "opts" is an object with event info
			mouseUp: function(opts) {
                //advancedButton(advancedClicked);
			},
            
            elementChanged: function(opts)
            {
                advancedButton(advancedClicked);
            },
            
            callback: function(opts) {
                advancedClicked = false;
                advancedButton(advancedClicked);
            }
		};
});

// Function: advancedButton
// Unless advanced button is selected, advanced features will be hidden
this.advancedButton = function() {
    
    // 'Advanced feature' elements
    var elements = ['sidepanels', 'editor_panel', 'tool_move_top', 'tool_move_bottom', 'tool_topath', 'tool_reorient', 'tool_make_link', 'idLabel', 'tool_angle', 'tool_blur', 'tool_position', 'xy_panel', 'rect_width_tool', 'rect_height_tool', 'cornerRadiusLabel'];

    // Toggle the display attributes of the selected advanced elements
    for (var i = 0; i < elements.length; i++) {
        if (advancedClicked == false) {
            document.getElementById(elements[i]).style.display = 'none';
        }
        else {
            document.getElementById(elements[i]).style.display = 'block';
        }
    }
    
    // Remove strange extra 'tool_seps' when advanced features is not selected
    if (advancedClicked == false)
    {
        $("#selected_panel :first-child").find(".tool_sep").css("display", "none")
    }
}




function setSVGEditorColourPalette(flagCanvasSettings) {
    
    var num_active_colours = flagCanvasSettings.colourPots.length;
    console.log("*** num active colours = " + num_active_colours);

    $('.palette_item').each( function (index) {
	// Skip the first palette_item, so transparent fill is still an option
	if (index==0) { return true; } // jquery equivalent of continue

	var colour_index = index-1;

	if (colour_index<num_active_colours) {
	    $(this).show();
	    $(this).css("background-color",flagCanvasSettings.colourPots[colour_index]);
	    $(this).attr("data-rgb",flagCanvasSettings.colourPots[colour_index]);

	    if (index==1) {
		$(this).trigger("mousedown");
	    }
	}
	else {
	    $(this).hide();
	}
    });



    //$('#palette').empty();
    $('#palette').width(150);
    
    return;

    var str = '<div class="palette_item" data-rgb="none"></div>';
    $.each(flagCanvasSettings.colourPots, function(i, item) {
	str += '<div class="palette_item" style="background-color: ' + item + ';" data-rgb="' + item + '"></div>';
    });
    $('#palette').append(str);


			// Prevent selection of elements when shift-clicking
			$('#palette').mouseover(function() {
				var inp = $('<input type="hidden">');
				$(this).append(inp);
				inp.focus().remove();
			});

			$('.palette_item').mousedown(function(evt) {
				// shift key or right click for stroke
				var picker = evt.shiftKey || evt.button === 2 ? 'stroke' : 'fill';
				var color = $(this).data('rgb');
				var paint;

				// Webkit-based browsers returned 'initial' here for no stroke
				if (color === 'none' || color === 'transparent' || color === 'initial') {
					color = 'none';
					paint = new $.jGraduate.Paint();
				} else {
					paint = new $.jGraduate.Paint({alpha: 100, solidColor: color.substr(1)});
				}

				//paintBox[picker].setPaint(paint);
				svgCanvas.setColor(picker, color);

				if (color !== 'none' && svgCanvas.getPaintOpacity(picker) !== 1) {
					svgCanvas.setPaintOpacity(picker, 1.0);
				}
				//updateToolButtonState();
			}).bind('contextmenu', function(e) {e.preventDefault();});


}