/**
 *  simplePopup v1.0
 *  Karthik Raajkumar
 *  Last Updated: 2009-02-19
 */

(function($) {

	/**
	* simplePopup - jquery plugin to show a popup with existing items. 
	* 	- does not create the any popup markup, instead must be provided with 
	*   the id/class of the tag that contains the menu to be shown as a popup
	* 	- provides the functionality to display the menu on hover and hide 
	* 	the popup after a delay or click on anywhere in the document other 
	* 	than the menu itself
	* 	- displays the popup to the side of the menu tag
	* 	
	* TODO: 
	* 	- accept the position of the popup as an option - below, right, left, top and 
	* 	default to the right
	* 
	* NOTE: lots of things like animation/shadow could be done; but there are quite a 
	* few plugins that do that very well; we might be better off using those instead
	* of reinventing the whole thing; Created this plugin to have as minimum extra 
	* markup as possible to avoid getting into alignment issues etc with IE and FF
	* 
	* Usage: for the markup below typical usage would be
	* 
	*        $(document).ready(function() {
	*           $('div#myMenuButton').simplePopup({menuSelector: ".myPopup" });
	*        });
	*    
	*   <div id="myMenuButton">
	*        <a href="#" onclick="return false;">clickhere</a>
	*        <div class="myPopup">
	*            <ul>
	*                <li><a href="...">item1</a></li>
	*                <li><a href="...">item2</a></li>
	*                ...
	*            </ul>
	*        </div>
	*   </div>
	*   
	* @param - options (key-value pairs) 
	* 	- timeOut (is the timeOut for the popup)
	* 	- menuSelector (is the selector expression to find the popup; note that
	* 	this is the full selector if it is a class it should be ".mypopup" if it 
	* 	is an id it should be "#mypopup"; The menu markup must be child of the menu
	* 	activator
	* 	- menuActiveClass (class to be applied to the menu selector when the menu is active)
	*
	* @author Karthik Raajkumar (karthik@chiku.net)
	*/
	$.fn.simplePopup = function(options) {
        var popupTimer = null;
        var popupMenu = null;
        var defaults = {
            timeOut: '500',
            menuSelector: 'menuId', 
            menuActiveClass: ''
        };
        var opts = $.extend({}, defaults, options);

        $(document).click(function() {
            closePopup(popupMenu, popupTimer, menuParent, opts.menuActiveClass);
        });

        return this.each(function() {
            menuParent = $(this);
            menuParent.bind('mouseover', function(event) {
                closePopup(popupMenu, popupTimer, menuParent, opts.menuActiveClass);
                menutags = menuParent.find(opts.menuSelector);
                if (menutags.length) {
                    popupMenu = menutags.eq(0);
                    popupMenu.css('left', $(this).offset().left + $(this).width());
                    popupMenu.css('top', $(this).offset().top - 1);
                    popupMenu.css('visibility', 'visible');
                    event.stopPropagation();
                    if( opts.menuActiveClass != '' ) menuParent.addClass(opts.menuActiveClass);
                }
            });

            menuParent.mouseout(function(event) {
                if (popupMenu != null) {
                    //the setTimeOut callback specified as an anonymous function is required for this 
                    //to work in IE
                    popupTimer = window.setTimeout(function() { closePopup(popupMenu, popupTimer, menuParent, opts.menuActiveClass) }, opts.timeOut);
                }
            });

            menuParent.click(function(event) {
                /* this is to stop the menu from closing on clicking on More 
                if we dont this then it will continue up to the document.click 
                that will close the menu
                */
                event.stopPropagation();
            });
        });
    };

    function startPopupTimer(timeOut, popupTimer) {
        return window.setTimeout(closePopup, timeOut);
    };

    function stopPopupTimer(popupTimer) {
        if (popupTimer != null) {
            window.clearTimeout(popupTimer);
            popupTimer = null;
        }
    };

    function closePopup(popupMenu, popupTimer, menuParent, menuActiveClass) {
        stopPopupTimer(popupTimer);
        if (popupMenu) $(popupMenu).css('visibility', 'hidden');
        if( menuActiveClass != '' ) $(menuParent).removeClass(menuActiveClass);
    };

    // private function for debugging
    function debug(msg) {
        if (window.console && window.console.log)
            window.console.log(msg);
    };

    //  ...
    // end of closure
})(jQuery);
