s1JS.WidgetLayout = Base.extend({

    has_changed: false,

    /*
     *  OPTIONS
     */
    sortable_options: 
    {
        cursor: 'move',
        revert: false
       //, placeholder: 'widget-hover'
    },
    widget_options:
    { 
        content: '.widget-content',
        display_button: '.widget-minimise', 
        edit_button: '.widget-edit-button',
        edit_panel: '.widget-edit-panel',
        handle: 'h3'
    },    
    /* 
     * @param containers   The "droppable" container ids
     * @param items        The "draggable" widget class
     *
     * @param options      
     *      - sortable_options    Manually override any of the default sortable options for this widget layout
     */
    constructor: function(containers, items, options)
    {
        this.containers = containers;
        this.sortable_options.items = items;    
        this.sortable_options.handle = this.widget_options.handle;
        
        
        // set up the change function to record callbacks
        var layout = this;
        this.sortable_options.change = function() {
            layout.changed();
        };
 
        // set up jQuery UI Sortable columns
        for(var i=0; i<containers.length; i++)
        {  
            // Remove the current container from the array, use the rest as connected
            var connectors = containers.slice(0,i).concat( containers.slice(i+1) );            
            if(connectors.length > 0)
            {
                this.sortable_options.connectWith = connectors;
            }         
            var cont_cache = $(containers[i]);
            cont_cache.sortable(this.sortable_options);
            this.addEvents(cont_cache);             
        }      
    },
    addEvents: function($container)
    {
        var layout = this;      //  set up closures
        var $cont = $container; //  for below events
        
        $(this.widget_options.display_button + ', ' + this.widget_options.edit_button, $container).mouseover(function(e){ 
            $cont.sortable("disable"); 
        });
        $(this.widget_options.display_button + ', ' + this.widget_options.edit_button, $container).mouseout(function(e){ 
            $cont.sortable("enable"); 
        });        
        
        $(this.widget_options.display_button, $cont).click(function(e) {
            $(layout.widget_options.content, $(this).parent().parent()).slideToggle();
            layout.changed();
            return false;
        });  

        $(this.widget_options.edit_button, $cont).click(function(e) {
            $(layout.widget_options.edit_panel, $(this).parent().parent().parent()).slideToggle();
            return false;
        });  
  
    },
    /*
     *   We have a "serialize" option in sortable but it's rubbish and designed for PHP
     *   so lets create a version ourselves. Returns a generic structure for flexibility; 
     *   this is pretty much essential for widgets with individual options that we need
     *   to remember the next time they load the page..        
     *
     *   structure :
     *           layout = [ 
     *                      [
     *                       [ { id: 'ja', mode: '+' ],
     *                       [ { id: 'am', mode: '-' ]
     *                      ],                               
     *                      [
     *                       [ { id: 'jn', mode: '+' ],
     *                       [ { id: 'fe', mode: '-' ]
     *                      ]
     *                    ]
     *                    
     *   usage:
     *           var widget = layout[column_number][widget_position];
     */  
    serialize: function()
    {          
        var layout = [];
        
        for(var i = 0; i < this.containers.length; i++)
        {
            var $items = $(this.sortable_options.items, this.containers[i]).not('.ui-sortable-helper');
            
            var widgets = [];
            var content = this.widget_options.content;
            $items.each(function() {
                var display = ($(content, this).css("display") == 'none') ? '-' : '+';                
                widgets.push({mode: display, id: $(this).attr("id")}); 
            });
            
            layout.push(widgets);
        }
        return layout;
    },
    // record change functions    
    changed: function()
    {
        this.has_changed = true;
    },    
    saved: function()
    {
        this.has_changed = false;
    },
    hasChanged: function() 
    {
        return this.has_changed;
    }
});