/*
 * jQuery toggleIt plugin
 *
 * version 0.1 (02/17/2009)
 * Copyright (c) 2009 Becky Resler
 * 
 * @description Add the ability to toggle (show/hide) an element.
 * 
 * For more details see: 
 * For a full demo see:  
 * 
 * @example $("#toggleme").toggleIt();
 * @desc    Provide a link/button to toggle the element.
 * 
 * @option String defaultState (optional)   A string indicating if the element should be opened or closed on page load.
 *                                          Default value: "open"
 * 
 * @option String animationSpeed (optional) A string indicating the animation speed. OPTIONS: slow | normal | fast | # of milliseconds | blank
 *                                          Default value: ""
 * 
 * @option String toggleLocation (optional) A string indication where the toggle action item should be placed, either before or after the element to be toggled.
 *                                          Default value: "before"
 * 
 * @option String toggleType (optional)     A string indicating what the toggle action item should be, either link or button. 
 *                                          Default value: "link"
 * 
 * @option String textShow (optional)       A string indicating what text should be displayed to indicate that the element can be shown.
 *                                          Default value: "Show"
 * 
 * @option String textHide (optional)       A string indicating what text should be displayed to indicate that the element can be hidden. 
 *                                          Default value: "Hide"
 * 
 * @option Array toggleWrapper (optional)   An array containing the html to wrap the element in.
 *                                          Default value: { before: '<div style="margin-top: 4px; margin-bottom: 4px;">', after: '</div>' }
 * 
 * @option Array animationType (optional)   An array containing the animation to be used to show and hide the element. OPTIONS (show): show | slideDown | fadeIn || OPTIONS (hide): hide | slideUp | fadeOut
 *                                          Default value: { show: "show", hide: "hide" }
 * 
 * @name toggleIt
 * @type jQuery
 * @cat Plugins/toggleIt
 * @return jQuery 
 * @author Becky Resler (becky.resler@gmail.com)
 */
jQuery.fn.toggleIt = function(opt) {
    // set up the default options for the plugin
    var defaults = {
        defaultState:   "open",     // OPTIONS: open | closed
        animationSpeed: "",         // OPTIONS: slow | normal | fast | # of milliseconds | blank
        toggleLocation: "before",   // OPTIONS: before | after
        toggleType:     "link",     // OPTIONS: link | button
        textShow:       "Show",
        textHide:       "Hide",
        toggleWrapper:  { before: '<div style="margin-top: 4px; margin-bottom: 4px;">', after: '</div>' },
        animationType:  { 
                            show: "show",   // OPTIONS: show | slideDown | fadeIn 
                            hide: "hide"    // OPTIONS: hide | slideUp | fadeOut
                        }
    };
 
    // extend the default options for this plugin
    options = jQuery.extend(defaults, opt);
 
    // iterate through things
    return this.each(function(){
        var $targetElement  = jQuery(this);
        var targetElementID = $targetElement.attr("id");
        var toggleElementID = targetElementID + "toggle";
        var textShow        = options.textShow;
        var textHide        = options.textHide;
        var animationShow   = options.animationType.show;
        var animationHide   = options.animationType.hide;
        var elementHTML     = '';
 
        /*** initialize things for the defaultState ***/
        // set up the toggle link/button
        if(options.toggleType == "button")
            elementHTML = (options.defaultState == "open") ? '<button id="'+toggleElementID+'" class="toggle">'+textHide+'</button>' : '<button id="'+toggleElementID+'" class="toggle">'+textShow+'</button>';
        else
            elementHTML = (options.defaultState == "open") ? '<a href="#" id="'+toggleElementID+'" class="toggle">'+textHide+'</a>' : '<a href="#" id="'+toggleElementID+'" class="toggle">'+textShow+'</a>';
 
        // put the wrapper around the button/link html
        var toggleHTML = options.toggleWrapper.before + elementHTML + options.toggleWrapper.after;
 
        // add the toggle link
        if(options.toggleLocation == "before")
            $targetElement.before(toggleHTML);
        else
            $targetElement.after(toggleHTML);
 
        // if defaultState is closed, then hide the element
        if(options.defaultState != "open")
            $targetElement.hide();
 
        /*** bind the toggle action ***/
        // need to take into account the defaultState when setting up the toggle action so get the first one right
        if(options.defaultState == "open")
        {
            jQuery("#"+toggleElementID).toggle(function(){
                hideElement(jQuery(this), $targetElement, textShow, animationHide);
                return false;            
            }, function(){
                showElement(jQuery(this), $targetElement, textHide, animationShow);
                return false;
            });
        }
        else
        {
            jQuery("#"+toggleElementID).toggle(function(){
                showElement(jQuery(this), $targetElement, textHide, animationShow);
                return false;            
            }, function(){
                hideElement(jQuery(this), $targetElement, textShow, animationHide);
                return false;
            });
        }
    });
 
 
    // this function will show the target element
    function showElement($toggleElement, $targetElement, newText, animationType)
    {
        $targetElement[animationType](options.animationSpeed);
        $toggleElement.html(newText);
        $toggleElement.blur();  // get rid of the outline on the link/button
    }
 
    // this function will hide the target element
    function hideElement($toggleElement, $targetElement, newText, animationType)
    {
        $targetElement[animationType](options.animationSpeed);
        $toggleElement.html(newText);
        $toggleElement.blur();  // get rid of the outline on the link/button
    }
};