/*
 * simple sliding menu using jQuery and Interface - http://www.getintothis.com
 * 
 * note: this library depends on jquery (http://www.jquery.com) and
 * interface (http://interface.eyecon.ro)
 *
 * Copyright (c) 2006 Ramin Bozorgzadeh
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LECENSE.txt) linceses.
 */

$.fn.rb_menu = function(options) {
    var self = this;

    self.options = {
        // transitions: easein, easeout, easeboth, bouncein, bounceout,
        //              bounceboth, elasticin, elasticout, elasticboth
        transition:    'bounceout',
        // trigger events: mouseover, mousedown, mouseup, click, dblclick
        triggerEvent:  'mouseover',
        // number of ms to delay before hiding menu (on page load)
        loadHideDelay : 1000,
        // number of ms to delay before hiding menu (on mouseout)
        blurHideDelay:  350,
        // number of ms for transition effect
        effectDuration: 750,
        // hide the menu when the page loads
        hideOnLoad: true,
        // automatically hide menu when mouse leaves area
        autoHide: true
    }

    // make sure to check if options are given!
    if(options) {
        $.extend(self.options, options);
    }

    return this.each(function() {
        var menu = $(this).find('.rb_menu');
        var toggle = $(this).find('.rb_toggle');

        if(self.options.hideOnLoad) {
            // let's hide the menu when the page is loading
            // after {loadHideDelay} milliseconds
            setTimeout( function() {
                menu.hide();

                // add 'hover' class to trigger for css styling
                toggle.hover( function() {
                    $(this).addClass('hover');
                }, function() {
                    $(this).removeClass('hover');
                });
            }, self.options.loadHideDelay);
        }

        // bind event defined by {triggerEvent} to the trigger
        // to open and close the menu
        toggle.bind(self.options.triggerEvent, function() {
            // if the trigger event is click or dblclick, we want
            // to close the menu if its open
            if((self.options.triggerEvent == 'click' || self.options.triggerEvent == 'dblclick') && !self.closed) {
                menu.hide();
            } else {
                menu.show();
            }
        });

        menu.hide = function() {
			var img=$('img',toggle);
			var src=img.attr('src');
            if (src.indexOf('_on.gif')!=-1) src = src.replace('_on.gif','.gif');
			img.attr('src',src);

            if(this.css('display') == 'block' && !self.closed) {
           		

				/* classe hover */
				self.removeClass('selected');
                
				self.closed = true;
               
			   	this.SlideOutRight(
                    self.options.effectDuration,
                    function() {
                        self.unbind();
                    },
                    self.options.transition
                );
            }
        }

        menu.show = function() {
            if(this.css('display') == 'none' && self.closed) {
				/* image hover */
				var img=$('img',toggle);
				var src=img.attr('src');
          		if (src.indexOf('_on.gif')==-1) src = src.replace('.gif','_on.gif');
				img.attr('src',src);
            	
				self.addClass('selected');
                self.closed = false;
                if(self.options.autoHide) {
			
                  	self.hover(function() {

						clearTimeout(self.timeout);
                    }, function() {
						self.timeout = setTimeout( function() {
                            menu.hide();
                        }, self.options.blurHideDelay);
                    });
                }
                this.SlideInRight(
                    self.options.effectDuration,
                    function() {
					
					},
                    self.options.transition
                );
            }
        }
    });
};