var CubieNav = new Class({
    Implements: [Options,Events,Chain],
    options: {
        defaultHeaderSize:{x:265,y:265},
        animatedLines:[],
        bgFxDuration:500
    },
    initialize: function(options){
        /**
         * -----------------------------------------------------------------------------
         * Initial Setup
         * -----------------------------------------------------------------------------
         */
        this.setOptions(options);
        this.options.navLineRoot = $('nav_line_root');
        this.options.navLineRootFx = new Fx.Tween(this.options.navLineRoot);
        this.options.header = $('header');
        this.options.innerHeader = this.options.header.getElement('.limit');
        this.options.headerFx = new Fx.Tween($('header'));
        this.options.windowSize = window.getSize();
        this.options.imagesUrl = assets_url('fe/images/');
        this.options.busyLine = this.options.busyMenu = this.options.busyContent = false;
        this.options.bgFx = new Fx.Tween('bg_image_container',{duration:this.options.bgFxDuration,link:'chain'});
        this.options.projectFx = new Fx.Tween('project_image_container',{duration:this.options.bgFxDuration,link:'chain'});

        /**
         * -----------------------------------------------------------------------------
         * Add Events to Nav Links
         * -----------------------------------------------------------------------------
         */
        $('contact_form').addEvent('submit',function(ev){ev.preventDefault();this.sendForm('contact_form');}.bind(this));
        $('reveal_email').addEvent('click',function(){this.load('as/reveal.php');this.setStyle('cursor','default')});
        //Add actions to menu links
        $$('.nav.root a').each(function(e,ei){
            e.addEvent('click',function(){
                if(!this.isBusy()){
                    this.hideMenu('all');
                    if(e.title == 'home')
                        this.setBusy(false);
                    else
                        this.animateMenu(e,'nav_'+e.title);
                    if(e.title == 'contact'){
                        //use anonymous function for the delay
                        (function(){this.animateLine(this.getPosition('bl',$('nav_'+e.title),this.options.innerHeader),this.getPosition('tc',$('content_contact'),this.options.innerHeader),'vertical',function(){this.animateContent($('content_contact'));}.bind(this));}).bind(this).delay(1000);
                    }
                    if(e.title == 'home'){
                        this.unloadBgImage();
                    }
                }
            }.bind(this));
        }.bind(this));
        $$('.nav.about a').each(function(e,ei){
            e.addEvent('click',function(){
                if(!this.isBusy()){
                    this.hideContent();
                    var startPos = this.getPosition('bl',$('nav_about'),this.options.innerHeader);
                    var endPos = this.getPosition('tc',$('content_'+e.title),this.options.innerHeader);
                    if(e.title == 'about'){
                        //this.loadBgImage('bg_coffee.jpg');
                        this.animateLine(startPos,endPos,'vertical',function(){this.animateContent($('content_about'));}.bind(this));
                    }
                    if(e.title == 'websites'){
                        //this.unloadBgImage();
                        this.animateLine(startPos,endPos,'vertical',function(){this.animateContent($('content_websites'));}.bind(this));
                    }
                    if(e.title == 'graphic'){
                        this.animateLine(startPos,endPos,'vertical',function(){this.animateContent($('content_graphic'));}.bind(this));
                    }
                    if(e.title == 'coding'){
                        this.animateLine(startPos,endPos,'vertical',function(){this.animateContent($('content_coding'));}.bind(this));
                    }
                    if(e.title == 'guidance'){
                        this.animateLine(startPos,endPos,'vertical',function(){this.animateContent($('content_guidance'));}.bind(this));
                    }
                }
            }.bind(this));
        }.bind(this));
        $$('.nav.portfolio a').each(function(e,ei){
            e.addEvent('click',function(){
                if(!this.isBusy()){
                    this.hideContent();
                    this.hideMenu('projects');
                    this.animateMenu(e,'nav_'+e.title);
                }
            }.bind(this));
        }.bind(this));
        $$('.nav.projects a').each(function(e,ei){
            e.addEvent('click',function(){
                if(!this.isBusy()){
                    this.hideContent();
                    this.loadProject(e.rel);
                }
            }.bind(this));
        }.bind(this));
        //Add events for form error popups
        $$('form .error .close').each(function(e,ei){
            e.addEvent('click',function(){
                //"this" refers to the object being clicked.
                var label = this.getParent('label');
                if(label.hasClass('error'))
                    label.removeClass('error');
            });
        });
        //Add events for closing form errors on input focus
        $$('form input[type=text],form textarea').each(function(e,ei){
            e.addEvent('focus',function(){
                var label = e.getPrevious('label');
                if(label.hasClass('error'))
                    label.removeClass('error');
            });
        });
        $('contact_form_success').getElement('.close').addEvent('click',function(){
            //"this" refers to the clicked object
            this.getParent('.notification').setStyle('display','none');
            $('contact_form').setStyle('display','block');
        });

        /**
         * -----------------------------------------------------------------------------
         */
    },
    animateContent:function(contentOb){
        this.options.busyContent = true;
        contentOb.setStyles({'width':this.options.header.getSize().x+'px','opacity':0,'visibility':'visible'});
        var contentFx = new Fx.Tween(contentOb).start('opacity',1).chain(function(){this.options.busyContent = false;}.bind(this));
        var scroller = contentOb.getElement('.scroller');
        if(typeof(scroller) != 'undefined'){
            if(scroller.getScrollSize().y > scroller.getSize().y)
                this.setBodyHeight(scroller.getScrollSize().y+450);
            else
                this.resetBodyHeight();
        }
    },
    hideContent:function(){
        this.resetBodyHeight();
        $$('.content').each(function(e,ei){
            if(e.getStyle('visibility') == 'visible'){
                this.deleteLastAnimatedLine();
                e.setStyle('visibility','hidden');
            }
        }.bind(this));
    },
    setBodyHeight:function(height){
        $$('body')[0].setStyle('height',height+'px');
    },
    resetBodyHeight:function(){
        $$('body')[0].setStyle('height','100%');
    },
    loadBgImage:function(image,imageStyle){
        var imageStyle = (typeof(imageStyle) == 'undefined')?' repeat':' '+imageStyle;
        var imgArray = [this.options.imagesUrl+image];
        var progressBar = new ProgressBar({'boxId':'progress_bar_bg_image','title':'Loading Background...'});
        new Asset.images(imgArray,{
            onProgress:function(counter,index){progressBar.set((counter+1) * (100 / imgArray.length));},
            onComplete:function(){
                bgImageCont = $('bg_image_container');
                if(bgImageCont.getStyle('background-image') != 'url("'+imgArray[0]+'")'){
                    if(bgImageCont.getStyle('background-image') == 'none'){
                        bgImageCont.setStyles({'opacity':0,'display':'block','background':'url('+imgArray[0]+')'+imageStyle});
                        this.options.bgFx.start('opacity',1);
                    }else{
                        this.options.bgFx.start('opacity',0).chain(function(){
                            bgImageCont.setStyles({'background':'url('+imgArray[0]+')'+imageStyle});
                            this.options.bgFx.start('opacity',1);
                        }.bind(this));
                    }
                }
                progressBar.options.elements.destroy();
            }.bind(this)
        });
    },
    loadProjectImage:function(image,imageStyle){
        var imgArray = [this.options.imagesUrl+image];
        var progressBar = new ProgressBar({'boxId':'progress_bar_project_image','title':'Loading Image...'});
        new Asset.images(imgArray,{
            onProgress:function(counter,index){progressBar.set((counter+1) * (100 / imgArray.length));},
            onComplete:function(){
                projectImageCont = $('project_image_container');
                if(projectImageCont.getStyle('background-image') != 'url("'+imgArray[0]+'")'){
                    if(projectImageCont.getStyle('background-image') == 'none'){
                        projectImageCont.setStyles({'opacity':0,'display':'block','background':'url('+imgArray[0]+') '+imageStyle});
                        this.options.projectFx.start('opacity',1);
                    }else{
                        this.options.projectFx.start('opacity',0).chain(function(){
                            projectImageCont.setStyles({'background':'url('+imgArray[0]+') '+imageStyle});
                            this.options.projectFx.start('opacity',1);
                        }.bind(this));
                    }
                }
                progressBar.options.elements.destroy();
            }.bind(this)
        });
    },
    log:function(){
        //console.log('Log Method Executed');
    },
    unloadBgImage:function(){
        this.options.bgFx.start('opacity',0).chain(function(){
            $('bg_image_container').setStyle('background-image','none');
        });
    },
    unloadProjectImage:function(){
        this.options.projectFx.start('opacity',0).chain(function(){
            $('project_image_container').setStyle('background-image','none');
        });
    },
    deleteLastAnimatedLine:function(){
        var el = this.options.animatedLines.pop();
        if(typeof(el) == 'object')
            el.destroy();
    },
    animateLine:function(startPos,endPos,orientation,callBack){
        this.options.busyLine = true;
        var line = new Element('div',{'class':'nav_line','style':'top:'+startPos.y+'px;left:'+startPos.x+'px;'});
        line.tweenFx = new Fx.Tween(line);
        line.inject(this.options.innerHeader,'top');
        this.options.animatedLines.push(line);
        switch(orientation){
            case 'vertical':
                line.tweenFx.start('height',endPos.y-startPos.y).chain(function(){this.options.busyLine = false;callBack();}.bind(this));
                break;
            case 'horizontal':
            default:
                line.tweenFx.start('width',endPos.x-startPos.x).chain(function(){this.options.busyLine = false;callBack();}.bind(this));
                break;
        }
    },
    hideMenu:function(option){
        this.unloadProjectImage();
        this.resetBodyHeight();
        switch(option){
            case 'all':
                this.options.header.setStyle('width',this.options.defaultHeaderSize.x+'px');
                $$('.header .nav','.content','.nav_line').each(function(e,ei){
                    if(!e.hasClass('root'))
                        e.setStyles({'visibility':'hidden'});
                });
                this.options.animatedLines.each(function(e,ei){e.destroy();});
                break;
            case 'projects':
            case 'project':
                $$('.header .nav.projects').each(function(e,ei){
                    if(e.getStyle('visibility') == 'visible')
                        this.deleteLastAnimatedLine();
                    e.setStyles({'height':'auto','visibility':'hidden'});
                }.bind(this));
                break;
            default:break;
        }
    },
    animateMenu:function(startOb,menuId){
        this.options.busyMenu = true;
        var startPos = this.getPosition('tr',startOb,this.options.innerHeader);
        startPos.x += 7;
        startPos.y += startOb.getSize().y / 2;
        this.animateHeader(this.getPosition('tr',$(menuId),this.options.innerHeader).x+30);
        this.animateLine(startPos,this.getPosition('lc',$(menuId),this.options.innerHeader),'horizontal',function(){
            var menu = $(menuId);
            menu.setStyles({'opacity':0,'visibility':'visible'});
            if(startPos.y > menu.getSize().y)
                menu.setStyle('height',startPos.y+1+'px');
            var menuFx = new Fx.Tween(menu).start('opacity',1).chain(function(){this.options.busyMenu = false;}.bind(this));
        }.bind(this));
    },
    animateHeader:function(width){
        this.options.headerFx.start('width',width);
    },
    isBusy:function(){
        return (this.options.busyLine || this.options.busyMenu || this.options.busyContent);
    },
    setBusy:function(bool){
        this.options.busyLine = bool;
        this.options.busyContent = bool;
        this.options.busyMenu = bool;
        return this;
    },
    getPosition:function(position,elementId,relative){
        var relative = (typeof(relative) == 'undefined')?null:$(relative);
        var object = $(elementId);
        var obSize = object.getSize();
        var obPos = object.getPosition(relative);
        var ret = {};
        switch(position){
            case 'tl':
            case 'top-left':
                ret = {x:obPos.x,y:obPos.y};
                break;
            case 'tr':
            case 'top-right':
                ret = {x:obPos.x+obSize.x,y:obPos.y};
                break;
            case 'bl':
            case 'bottom-left':
                ret = {x:obPos.x,y:obPos.y+obSize.y};
                break;
            case 'br':
            case 'bottom-right':
                ret = {x:obPos.x+obSize.x,y:obPos.y+obSize.y};
                break;
            case 'tc':
            case 'top-center':
                ret = {x:obPos.x+(obSize.x / 2),y:obPos.y};
                break;
            case 'bc':
            case 'bottom-center':
                ret = {x:obPos.x+(obSize.x / 2),y:obPos.y+obSize.y};
                break;
            case 'lc':
            case 'left-center':
                ret = {x:obPos.x,y:obPos.y+(obSize.y / 2)};
                break;
            case 'rc':
            case 'right-center':
                ret = {x:obPos.x+obSize.x,y:obPos.y+(obSize / 2)};
                break;
            case 'center':
            case 'middle':
            case 'center-center':
            case 'cc':
            case 'middle-middle':
            case 'mm':
                ret = {x:obPos.x+(obSize.x / 2),y:obPos.y+(obSize.y / 2)};
                break;
            default:
                ret = false;
                break;
        }
        return ret;
    },
    sendForm:function(formId){
        var form = $(formId);
        var data = {
            'name':form.elements['name'].value,
            'email':form.elements['email'].value,
            'phone':form.elements['phone'].value,
            'enq':form.elements['enq'].value,
            'securimage':form.elements['securimage'].value,
            'submit_enq':1
        };
        var jsonReq = new Request.JSON({'url':'as/contact.php'});
        jsonReq.options.self = this;
        jsonReq.onSuccess = function(resp){
            if(resp.method == 'showFormSuccess'){
                form.setStyle('display','none');
                $('contact_form_success').setStyle('display','block').getElement('span').set('html',resp.data);
            }else{
                $('securimage').src = base_url('core/classes/other/securimage/')+'securimage_show.php?sid=' + Math.random();
                form.elements['securimage'].value = '';
                this.options.self[resp.method]('contact_form',resp.data);
            }
        };
        jsonReq.post(data);
    },
    showFormErrors:function(formId,errors){
        var form = $(formId);
        form.getElements('label').each(function(e,ei){e.removeClass('error');});
        errors.each(function(e,ei){
            var label = form.elements[e.name].getPrevious('label');
            if(!label.hasClass('error')){
                label.addClass('error');
                label.getElement('.error').getElement('span').set('html',e.error);
            }
        });
    },
    showRequestError:function(){
        alert('Invalid request');
    },
    showFormSuccess:function(message){
        alert(message);
    },
    loadProject:function(id){
        var jsonReq = new Request.JSON({'url':'as/project.php'});
        jsonReq.options.self = this;
        jsonReq.onSuccess = function(resp){
            //console.log(resp);
            if(resp.method == 'showProject')
                this.options.self[resp.method](resp.data);
        };
        jsonReq.post({'id':id});
    },
    showProject:function(project){
        var content_project = $('content_project');
        content_project.getElement('.data_title').set('html',project.title);
        content_project.getElement('.data_description').set('html',project.description);
        if(project.url.length){
            content_project.getElement('.data_url').setStyle('display','block').empty();
            new Element('a',{'href':project.url,'target':'_blank'}).inject(content_project.getElement('.data_url'));
        }else{
            content_project.getElement('.data_url').setStyle('display','none');
        }
        if(project.bg_image.length)
            this.loadBgImage(project.bg_image,project.bg_style);
        else
            this.unloadBgImage();
        if(project.image.length){
            this.loadProjectImage(project.image,project.image_style);
            content_project.getElement('.data_mediabox').setStyle('display','block').empty();
            content_project.getElement('.data_mediabox').removeEvents().addEvent('click',function(){
                Mediabox.open(assets_url('fe/images/'+project.image),'','');
            });
        }else{
            content_project.getElement('.data_mediabox').setStyle('display','none');
            this.unloadProjectImage();
        }


        var projectNav = this.getVisibleProjectNav();
        var startPos = this.getPosition('bl',projectNav,this.options.innerHeader);
        var endPos = this.getPosition('tc',content_project,this.options.innerHeader);
        this.animateLine(startPos,endPos,'vertical',function(){this.animateContent(content_project);}.bind(this));
    },
    getVisibleProjectNav:function(){
        var ret = false;
        $$('.nav.projects').each(function(e,ei){
            if(e.getStyle('visibility') == 'visible')
                ret = e;
        });
        return ret;
    }
});