/**
 * @projectDescription  Components - Common components to be reused throughout the site
 * @namespace           II
 * @author              Joaquin J. Garrido
 * @copyright           2011 Interval International
 */

var II = {
    
    dropdown: function($element) {
        
        //-- determine the currently selected value, based on the element passed into the function --//
        var selectedVal = $element.find(':selected').text();
        
        //-- convert the selected item to a SPAN --//
        var $trigger = $('<span class="ii_dd-trigger ui-corner-all">' + selectedVal + '</span>');
        
        //-- iterate through the list of OPTIONs and create an LI for each one --//
        var $options = "";
        $element.find('option').each( function(index, option) {
            $option = $(option);
            //-- unless this is the currently selected option, then we leave and come back later --//
            if( $option.text() === selectedVal ) return;
            $options += '<li class="ii_dd-panel_item"><a href="' + $option.val() + '">' + $option.text() + '</a></li>';
        });
        
        //-- convert the full list of OPTIONs to a panel with a UL --//
        var $triggerClone = $trigger.clone().addClass('ii_dd-trigger_clone ui-corner-top').removeClass('ui-corner-all');
        
        //-- any other panels? let's find out, so we can assign a unique id to ours --//
        var panelId = "ii_dd-panel_" + ($('.ii_dd-panel').length + 1);
        var $panel = $(
            '<div id="' + panelId + '" class="ii_dd-panel ui-corner-all">' +
                '<ul class="ii_dd-panel_content">' + $options + '</ul>' +
            '</div>'
        );
        
        //-- assign click event handler to activate dropdown --//
        $trigger.click( function(event) {
            event.stopPropagation();
            $('#' + panelId).slideDown('fast');
            $trigger.css('visibility', 'hidden');
        });
        
        //-- and to de-activate it --//
        $triggerClone
            .prependTo($panel)
            .click( function(event) {
                event.stopPropagation();
                $(this).closest('.ii_dd-panel').slideUp('fast');
                $trigger.css('visibility', 'visible');
            })
        ;
        
        //-- let's also add a handler to close the dropdown if there is a click detected outside of the panel --//
        $(document).click( function(event) {
            if($(event.target).closest('.ii_dd-panel').length === 0) {
                $('.ii_dd-panel').slideUp('fast');
                $trigger.css('visibility', 'visible');
            }
        });
        
        //-- insert everything into the DOM, and display --//
        // TODO: Make the method of display an option passed in as a parameter
        $element.after($trigger, $panel).remove();
        $trigger.parent().css({visibility: 'visible'});
        
    },   // end dropdown
    dropdown_login: function($element) {
        
        selectedVal = $element.find('label').text();
        $trigger = $element;

        //-- this lays over top --//
        var $triggerClone = $trigger.clone().addClass('ii_dd-trigger_clone ui-corner-top').removeClass('ui-corner-all');
        
        //-- any other panels? let's find out, so we can assign a unique id to ours --//
        var panelId = "ii_dd-panel_" + ($('.ii_dd-panel').length + 1);
        /* var $panel = $(
            '<div id="' + panelId + '" class="ii_dd-panel ui-corner-all">' +
                '<ul>' + $options + '</ul>' +
            '</div>'
        ); */
        var $panel = $('#login_box-main')
            .clone(true, true)
            .attr('id', panelId)
            .addClass('ii_dd-panel ui-corner-all')
            .find('input[type=submit]')
                .val('Log In')
            .end()
            .find('form')
                .prepend('<div class="stack-col"><em class="error_wrapper"><span class="errorMessage"></span></em></div>')
            .end()
        ;
        
        //-- assign click event handler to activate dropdown --//
        $trigger.click( function(event) {
            event.stopPropagation();
            $('#' + panelId)
                .find('.stack-col, .stack-col_bottom')
                    .css({ opacity: 0 })
                .end()
                .slideDown('fast', function() {
                    $(this)
                        // .css('width', "100%")
                        .find('.stack-col, .stack-col_bottom')
                            .animate({ opacity: 1 })
                        .end()
                    ;
                })
            ;
             $trigger.css('visibility', 'hidden');
        });
        
        //-- and to de-activate it --//
        $triggerClone
            .prependTo($panel)
            .click( function(event) {
                event.stopPropagation();
                $(this).closest('.ii_dd-panel').slideUp('fast');
                $trigger.css('visibility', 'visible');
            })
        ;
        
        //-- let's also add a handler to close the dropdown if there is a click detected outside of the panel --//
        $(document).click( function(event) {
            if($(event.target).closest('.ii_dd-panel').length === 0) {
                $('.ii_dd-panel').slideUp('fast');
                $trigger.css('visibility', 'visible');
            }
        });
        
        
        //-- insert everything into the DOM, and display --//
        // TODO: Make the method of display an option passed in as a parameter
        $element.after($panel);
        
    }   // end dropdown_login
    
    
};