LBP.Navigation = new Class({
    Implements: [Events, Options],
    options: {
        itemMode: 'click',
        itemCss: '',
        cntCss: '',
        subItemCss: '',
        folderClick: false,
        subCntCss: '',
        subCntBack: '',
        subWrCss:'',
        overlayCss: '',
        cntMargin: { left: 0 , right: 0, bottom: 0, top:0},
        cntPadding: { left: 0 , right: 0, bottom: 0, top:0},
        dfltIdx: 10,
        opacity: 0.9,
        backOpacity: 0.4,
        backContent: '',
        injectToItem: false,
        arrowDirPrefix: 'arrow',
        injectPos: { x: 'top', y: 'bottom'},
        cntPos: {x: 'leftover', y: 'downbelow' },
        direction: { x: 'left', y: 'down'},
        orientation: 'horizontal',
        hoverCss: 'hover',
        adjustBy: 0
    },
    initialize: function(container, options) {
        if(!this.container)this.container = (container)?container: $(document.body);
        this.setOptions(options);
        this.isActive = (this.options.itemMode == 'click') ? false : true;
        this.setUp();
    },
    onHover: function(item) {
        if(!item.hasClass(this.options.hoverCss)) item.addClass(this.options.hoverCss)
    },
    onOut: function(item) {
        if(item.hasClass(this.options.hoverCss)) item.removeClass(this.options.hoverCss)
    },
    onShow: function(item) {
        var cnt = item.retrieve('subContent');
        if(!cnt) return;
        cnt.set('styles', {'display': 'block'});
    },
    onHide: function(item) {
        var cnt = item.retrieve('subContent');
        if(!cnt) return;
        cnt.set('styles', {'display': 'none'});
    },
    toggleOverlay: function(state) {
    },
    setUp: function() {
        if(!this.overlay) { this.overlay = new Element("div", { 'class': this.options.overlayCss, 'id': this.options.overlayCss}); }
        this.container.getElements("."+this.options.itemCss).each(function(item){
            if(!item.retrieve('processNavigate')) {
                var content = item.getNext();
                if(content && (content.nodeName == 'DIV' || content.nodeName == 'UL') && content.hasClass(this.options.cntCss)) {
                    content.set('styles', { opacity: 0, visibility: 'hidden', position: 'absolute', zIndex: this.options.dfltIdx, display:'block' });
                    this.dfltIdx = this.options.dfltIdx;
                    this.setUpSub(content, this.options.dfltIdx);
                    if(this.options.injectToItem){ new Element("div",{ 'class': 'menu-'+this.options.arrowDirPrefix}).inject(item, this.options.injectPos.y)};
                    this.setDimension(item, content, this.options.dfltIdx+2, this.options.cntPos);
                    item.store('subContent', content);
                    if(!this.options.folderClick || this.options.itemMode == 'click') {
                    	item.set('href', 'javascript:void(0);');
					}
                    item.addEvents({
                        'mouseenter' : function(event) {
                            this.onHoverChange(item);
                            this.onSubOver(item);
                            }.bind(this),
                        'click': function(event) { this.onItemClick(item, event); }.bind(this),
                        'mouseleave' : function(event){
                            if(!this.isActive) {
                                this.onOut(item);
                            }
                        }.bind(this)
                    });
                }
                else {
                    item.addEvents({
                        'mouseenter': function(event){ this.onHoverChange(item); this.onHover(item); }.bind(this),
                        'mouseleave': function(event){ this.onOut(item); }.bind(this)
                    });
                }
            }
        }.bind(this));
        this.container.addEvents({
            'mouseleave': function(event){ this.onHoverChange(null); }.bind(this) });
    },

    onHoverChange: function(item) {
        if(this.currentItem && this.currentItem != item) {
            this.onHide(this.currentItem);
            this.onOut(this.currentItem);
        }
        this.currentItem = item;
    },
    setUpSub: function(content, dfltIdx) {
        dfltIdx+=2;
        content.getChildren('.'+this.options.subWrCss).each(function(subWrapper){
            var subItem = subWrapper.getChildren('.'+this.options.subItemCss)[0];
            subItem.set('styles', { zIndex: dfltIdx });
            subItem.store('subWrapper', subWrapper);
            var subCnt = subItem.getNext();
            if(subCnt && (subCnt.nodeName=='DIV' || subCnt.nodeName=='UL') && subCnt.hasClass(this.options.subCntCss)) {
                subCnt.set('styles', { opacity: 0, visibility: 'hidden', position: 'absolute', zIndex: dfltIdx+1, display:'block'});
                this.setUpSub(subCnt, dfltIdx);
                new Element("div",{ 'class': 'menu-'+this.options.arrowDirPrefix + ' menu-'+this.options.arrowDirPrefix+'-'+this.options.direction.x}).inject(subItem, this.options.injectPos.x);
                this.setDimension(subItem, subCnt, dfltIdx, this.options.direction);
                subItem.store('subContent', subCnt);
                subItem.set('href', 'javascript:void(0);');
                subItem.addEvents({
                    'mouseenter' : function(event) { this.onSubOver(subItem); }.bind(this),
                    'click': function(event) { event.stop(); this.onSubClick(subItem); }.bind(this)
                });
                subCnt.addEvent('mouseleave', function(event) { this.onHide(subItem);}.bind(this) );
                subWrapper.addEvent('mouseleave', function(event) { this.onHide(subItem); this.onOut(subItem); }.bind(this) );
            } else {
                //new Element("div",{ 'class': 'menu-'+this.options.arrowDirPrefix}).inject(subItem, this.options.injectPos.x);
                subItem.addEvents({
                    'mouseenter' : function(event) { this.onHover(subItem); }.bind(this),
                    'mouseleave': function(event) { this.onOut(subItem); }.bind(this)
                });
            }

        }.bind(this));
    },
    onSubOver: function(item) {
        this.onHover(item);
        if(this.isActive) {
            this.onShow(item);
        }
    },
    onItemClick: function(item, event) {
    	if(!this.options.folderClick) {
    		try { event.stop() } catch(e){}
        	if(this.isActive) return;
        	else {
            	this.isActive = true;
            	this.onShow(item);
        	}
		}
    },
    onSubClick: function(item) {

        if(this.isActive) return;
        else {
            this.isActive = true;
            this.onShow(item);
        }
    },
    setDirection: function(item, content, direction) {
        var position = item.getCoordinates(item.retrieve('subWrapper')|| document);
        var dir = direction.x;

        if(dir == 'right') {
            position.left = position.left + position.width + this.options.cntMargin.left + this.options.cntPadding.left;
        } else if( dir == 'center') {
            position.left = position.left + position.width/2 - content.retrieve('width')/2;
        } else if ( dir == 'left'){
            position.left = position.left - content.retrieve('width') - this.options.cntMargin.right - this.options.cntPadding.right;
        } else if ( dir == 'leftEdge') {
        	position.left = position.left + this.options.cntMargin.left;
        } else {
            position.left = position.left + position.width - content.retrieve('width');
        }
        position.top = (position.top == 0)? item.offsetTop : position.top;
        if(direction.y == 'down') {
            position.top = Math.max(item.offsetTop, position.top);
        } else if( direction.y == 'downbelow') {
            position.top = position.top+position.height+this.options.cntMargin.top;
        } else {
        }
        content.set('styles', { top: position.top+'px', left: position.left+'px'});
    },
    setDimension: function(sItem, sCnt, dfltIdx, dir) {
        var cntSize = sCnt.getCoordinates();
        cntSize.width = cntSize.width+this.options.cntPadding.left+this.options.cntPadding.right+this.options.adjustBy;
        cntSize.height = cntSize.height+this.options.cntPadding.top+this.options.cntPadding.bottom;
        sCnt.store('width', cntSize.width);
        sCnt.store('height', cntSize.height);
        /*
        var subCntBack = new Element('div',{ 'class': this.options.subCntBack, 'html': this.options.backContent });

        subCntBack.inject(sCnt, 'top');
        subCntBack.getElements('div').each(function(bgCnt){ bgCnt.set('styles', { height: cntSize.height+'px'});}.bind(this));
        subCntBack.set('styles', {position:'absolute', top:'0px', left:'0px', width: cntSize.width+'px', height: cntSize.height+'px', opacity : this.options.backOpacity, zIndex: dfltIdx-1});
        */
        this.setDirection(sItem, sCnt, dir);
        sCnt.set('styles',{ display:'none', width: cntSize.width+'px', height: cntSize.height+'px', opacity: 1, visibility: 'visible'});
    }
})