/**
 * Sprites2: animated CSS Sprites based navigation bars.
 * 
 * Based on original A List Apart article by Dave Shea - http://www.alistapart.com/articles/sprites2
 * 
 * version:	1.0.1
 * released: February 26, 2009
 * author: gonchuki
 * url: http://blog.gonchuki.com
 * git: http://github.com/gonchuki/sprites2-moo
 * 
 * This work is licensed under a Creative Commons Attribution-Share Alike 3.0 License.
 *   http://creativecommons.org/licenses/by-sa/3.0/
 */

var AniMenu = new Class({
    //implements
    Implements: [Options],

    //options
    options:{
        item_selector: 'ul.nav a',
        parent_selector: 'li',
        mode: 'fade',
        item_submenu: '',
        disappeardelay : 550,
        showit: false,
        duration: 400
    },

    initialize: function(options) {
	    this.setOptions(options);
        var self = this;
        document.getElements(self.options.item_selector).each(function(item) {
            var parent_element = item.getParent(self.options.parent_selector);

            var fx_element = new Element('div', {
                'class': 'effect',
                'tween': { duration: self.options.duration }
            }).inject(parent_element, 'top');

            self.effects[self.options.mode].call(self, fx_element);
            parent_element.addEvents({
                mouseover: function(e) { 
                    e.stop();
					if (!parent_element.hasClass('current')) self.show_fn(fx_element)
                    if (parent_element.get('id')==this.options.item_submenu) {
 					    if($defined(this.timer)) $clear(this.timer);
                        //this.clearhidemenu()
                        $('navbar').setStyle('opacity',1)
                    }
                }.bind(this),
                mouseout: function(e) {
                    e.stop();
                    if (!parent_element.hasClass('current')) {
                        self.hide_fn(fx_element); 
                        fx_element.removeClass('mousedown');
                    }; 
                    this.timer = (this.hidemenu).delay(250); 
                    //if($('navbar').getStyle('opacity')>0) this.delayhidemenu();
                }.bind(this)
            });

            if (!parent_element.hasClass('current')) item.setStyle('background', 'none');
            
            $('navbar').addEvents({
                mouseenter: function(){if($defined(this.timer)) $clear(this.timer);}.bind(this),
                mouseleave: function(){this.hidemenu();}.bind(this)
            });
            
        }.bind(this));
    },

    effects: {
        fade: function(fx_element) {
            fx_element.fade('hide');

            this.show_fn = function(fx_element) { fx_element.fade('in'); };
            this.hide_fn = function(fx_element) { fx_element.fade('out'); };
        },

        slide: function(fx_element) {
            fx_element.store('height', fx_element.getSize().y).setStyle('height', 0);

            this.show_fn = function(fx_element) { fx_element.tween('height', fx_element.retrieve('height')); };
            this.hide_fn = function(fx_element) { fx_element.tween('height', 0); };
        },

        animate: function(fx_element) {
            fx_element.setStyles({'height': 0, 'top': fx_element.retrieve('height', fx_element.getSize().y), 'opacity': 0})
            .set('morph', {
                'duration': this.options.duration / 2,
                'onComplete': function() { 
                    if (fx_element.getSize().y == 0) fx_element.setStyles({'top': fx_element.retrieve('height'), 'opacity': 0}); 
                }.bind(this)
            });

            this.show_fn = function(fx_element) { fx_element.morph({'height': fx_element.retrieve('height'), 'top': 0, 'opacity': 1}); };
            this.hide_fn = function(fx_element) { fx_element.morph({'height': 0, 'opacity': 0.5}); };
        }
    },
    
    hidemenu: function(){
        $("navbar").setStyle('opacity', '0');
    },

    showmenu: function(){
        $("navbar").setStyle('opacity', '1');
    },

    clearhide:function(){
	    if (this.delayhide!="undefined") clearTimeout(this.delayhide);
    }

});


window.addEvent('domready', function() {
    new AniMenu({mode: 'animate', item_selector: '#nav_animate a', item_submenu: 'nav_services'});

    //$('navbar').setPosition({'x': 10, 'y': 100});
    $("navbar").setStyles({
        "opacity": 0,
        "display": "block",
        "top": ($("nav_services").getPosition().y + 45),
        "left": ($("nav_services").getPosition().x)/**/
    });
    /*alert($('nav_services').getPosition().y)
    $('nav_services').adopt($('navbar'))
    $('navbar').inject($('nav_services'))
    AniMenu.implement({
        effects: {
            slide_x: function(fx_element) {
                fx_element.store('width', fx_element.getSize().x).setStyles({'width': 0});

                this.show_fn = function(fx_element) { fx_element.tween('width', fx_element.retrieve('width')); };
                this.hide_fn = function(fx_element) { fx_element.tween('width', 0); };
            }
        }
    });*/
    
    /*$(document.body).addEvent('mouseover', function(e) {
	    $("navbar").setStyle('opacity', '0');
    }.bind(this));*/
});