if (!window.Idiom) {
    var Idiom = {};
}

Idiom.Home = Class.create();
Idiom.Home.instances = [];

Idiom.Home._ = {
    CASE_INACTIVE_OPACITY:0.2,


    mainStrips:{
        yellow:{
            color:'#FFC216',
            defaultOpacity:0.8,
            defaultFade:true,
            path:[
                {
                    length:150,
                    direction:'right'
                },
                {
                    length:40,
                    direction:'down'
                },
                {
                    length:50,
                    direction:'right'
                },
                {
                    length:170,
                    direction:'down'
                },
                {
                    length:180,
                    direction:'right'
                },
                {
                    length:130,
                    direction:'down'
                }
            ]
        },
        indigo:{
            color:'#D83F96',
            defaultOpacity:0.8,
            defaultFade:true,
            path:[
                {
                    length:320,
                    direction:'right',
                    x:0,
                    y:120
                },
                {
                    length:250,
                    direction:'down'
                },
                {
                    length:80,
                    direction:'right'
                }
            ]
        },
        green:{
            color:'#75C044',
            defaultOpacity:0.8,
            defaultFade:true,
            path:[
                {
                    length:100,
                    direction:'right',
                    x:0,
                    y:60
                },
                {
                    length:120,
                    direction:'down'
                },
                {
                    length:140,
                    direction:'right'
                },
                {
                    length:80,
                    direction:'down'
                },
                {
                    length:190,
                    direction:'right'
                }
            ]
        },
        blue:{
            color:'#4EA6DC',
            defaultOpacity:0.8,
            defaultFade:true,
            path:[
                {
                    length:150,
                    direction:'right',
                    x:0,
                    y:150
                },
                {
                    length:170,
                    direction:'down'
                },
                {
                    length:320,
                    direction:'right'
                },
                {
                    length:80,
                    direction:'down'
                }
            ]
        },
        pink:{
            color:'#EC1D58',
            defaultFade:true,
            defaultOpacity:0.8,
            path:[
                {
                    length:30,
                    direction:'right',
                    x:0,
                    y:30
                },
                {
                    length:60,
                    direction:'down'
                },
                {
                    length:250,
                    direction:'right'
                },
                {
                    length:200,
                    direction:'down'
                },
                {
                    length:360,
                    direction:'right'
                },
                {
                    length:148,
                    fade:true,
                    fadeDelay:1,
                    direction:'right',
                    height:4,
                    shift:{x:0,y:20},
                    content:'<div class="designDelivers">BY <span class="everything">DESIGN</span></div>'
                }
            ]
        }
    }

};

Idiom.Home.prototype = {
    initialize:function(config) {


        this.config = Object.extend({
            containerEle:document.body
        }, config || {});

        var home = this;


        if (navigator.userAgent.indexOf('Macintosh') < 0) {
            Element.addClassName(document.body, 'win');
        }

        Object.extend(this, {
            workData:Idiom.workData || {},
            events:[],
            cases:[],
            transMutex:false,
            auxTransMutex:false,
            activePanel:null,
            activeTag:null,
            activeProj:null,
            activeSslt:null,
            //            panels:Element.select('center', '.panel'),
            tagCloudEle:$('tagCloud'),
            sidebarEle:$('sidebar'),
            headerEle:$('mainHeader'),
            sectionSelector:$('sectionSelector'),
            sslts:{},
            tagObjs:{all:{name:'all',cases:[]}}

        });

        this.panels = {};
        this.panelNames = ['work','about',  'careers','contact', 'news'];
        this.panelNames.each(function(panelName) {
            home.panels[panelName] = {name:panelName, ele:$(panelName + 'Panel')};
        });


        this.tagObjs = {
            all:{
                name:'all',
                cases:[],
                caseEls:[],
                captionEls:[]
            }
        };
        this.tags = ['all'];

        this.specialTags = ['brand', 'experience', 'product', 'social', 'thought'];

        this.caseTpl = new Template('<div class="caseThumb"><img class="caseThumbImg" src="#{thumbSrc}" alt=""/></div><div class="caseName" style="display:none">#{name}</div>');

        for (var _proj in this.workData) {
            (function(proj) {


                var caseEl = document.createElement('div');
                Element.addClassName(caseEl, 'case');

                caseEl.innerHTML = home.caseTpl.evaluate({thumbSrc:proj.imgSrc, name:proj.name});
                Element.setOpacity(caseEl, Idiom.Home._.CASE_INACTIVE_OPACITY);
                Event.observe(caseEl, 'mouseover', function() {
                    home.highlightCase(caseEl);
                });
                Event.observe(caseEl, 'mouseout', function() {
                    home.normalizeCase(caseEl);
                });

                var caseCaptionEl = Element.select(caseEl, '.caseName')[0];

                Event.observe(caseEl, 'click', function() {
                    Idiom.PageHandler.showPage('_loading');
                    Idiom.PageHandler.show(proj.pageID, {type:'caseStudy'});
                });


                var tags = proj.tags;
                tags.each(function(tag) {

                    if (home.specialTags.indexOf(tag) >= 0) {
                        Element.addClassName(caseEl, tag);
                    }

                    if (!home.tagObjs[tag]) {
                        home.tagObjs[tag] = {name:tag};
                        home.tagObjs[tag].cases = [proj.pageID];
                        home.tagObjs[tag].caseEls = [caseEl];
                        home.tagObjs[tag].captionEls = [caseCaptionEl];
                    }
                    else {
                        home.tagObjs[tag].cases.push(proj.pageID);
                        home.tagObjs[tag].caseEls.push(caseEl);
                        home.tagObjs[tag].captionEls.push(caseCaptionEl);
                    }

                    if (home.tags.indexOf(tag) < 0) {
                        home.tags.push(tag);
                    }
                });

                //add to 'all' tag too
                home.tagObjs['all'].cases.push(proj.pageID);
                home.tagObjs['all'].caseEls.push(caseEl);
                home.tagObjs['all'].captionEls.push(caseCaptionEl);

                //todo - fix this logic to be cleaner
                $('mainWorkPanel').appendChild(caseEl);


            })(this.workData[_proj]);


        }


        home.activePanel = home.panels['work'];

        Idiom.PageHandler.init({
            containerEle:$('workPanel')
        });

        ///////////////start tagcloud

        var tagArr = $H(home.tagObjs).collect(function(tagObj) {
            return{
                tagName:tagObj[1].name,
                tagCount:tagObj[1].cases.length,
                spl:(home.specialTags.indexOf(tagObj[1].name) >= 0 || tagObj[1].name == 'all') ? function(ele) {
                    Element.hide(ele);
                    return ele;

                } : null
            };
        }).sort(function(a, b) {
            if (a.tagName > b.tagName) {
                return 1;
            }
            else {
                if (a == b) {
                    return 0;
                }
                return -1;
            }
        });

        this.tagCloud = new Idiom.TagCloud({
            ele:$('tagCloud'),
            tagArr:tagArr
        });

        this.tagCloud.addListener('tagHover', function(tag) {
            home.onTagHover(tag);
        });

        this.tagCloud.addListener('tagHoverOut', function(tag) {
            home.onTagHoverOut(tag);
        });

        this.tagCloud.addListener('tagClick', function(tagName, tagEle) {
            if (home.activeTag != tagName) {
                home.setActiveTag(tagName);
                $('sectionSelector').style.height = '18px';
                new Effect.Move(home.sectionSelector, {x:0, y:tagEle.offsetTop, mode:'absolute', duration:0.3});

            }
        });

        var workLabel = false;

        Element.select($('sidebar'), '.sidebarLabel').each(function(label) {
            var panel = label.getAttribute('panel');
            var tag = label.getAttribute('tag');

            if (panel == 'work') {
                //mouseover
                Event.observe(label, 'mouseover', function() {
                    home.onTagHover(tag);
                });

                //mouseout

                Event.observe(label, 'mouseout', function() {
                    home.onTagHoverOut(tag);
                });
                Event.observe(label, 'click', function() {
                    //                    if (tag != home.activeTag) {
                    new Effect.Move(home.sectionSelector, {x:0, y:label.offsetTop - 3, mode:'absolute', duration:0.3});
                    $('sectionSelector').style.height = '30px';

                    home.setActiveTag(tag);
                    //                    }
                });


            }

            else {
                Event.observe(label, 'click', function() {
                    //                    console.log(label, panel, home.activePanel);
                    if (panel != home.activePanel.name) {
                        home.setActivePanel(panel);
                        new Effect.Move(home.sectionSelector, {x:0, y:label.offsetTop - 3, mode:'absolute', duration:0.3});
                        $('sectionSelector').style.height = '30px';

                    }

                });

            }

            //            Event.observe(label, 'click', function(){
            //                new Effect.Move(home.sectionSelector, {x:0, y:label.offsetTop-3, mode:'absolute', duration:0.3});
            //            });


        });

        Event.observe(window, 'resize', function() {
            home.onResize();
        });

        home.onResize();
        Event.observe($('logo'), 'click', function() {
            if (home.activePanel.name != 'work') {
                home.setActivePanel('work');

            }
            if(pageHandler.isVisible){
                pageHandler.hide();
            }
            home.normalizeCases(function() {
                home.activeTag = null;
            });

            new Effect.Move(home.sectionSelector, {x:0, y:-200, mode:'absolute', duration:0.3});

        });

        var pageHandler = Idiom.PageHandler;

        Event.observe(document, 'keydown', function(k) {
            var possibleSslt = Idiom.Slideshowlet._.get(pageHandler.currentCase);

            if (k && k.charCode == 0) {
                if (pageHandler.isVisible) {
                    switch (k.keyCode) {
                        case 27:pageHandler.hide();break;
                        case 37:if (possibleSslt && !possibleSslt.transMutex)possibleSslt.moveLeft();break;
                        case 39:if (possibleSslt && !possibleSslt.transMutex)possibleSslt.moveRight();break;
                        default:break;
                    }
                }
                

            }

        }
                )
                ;

        Idiom.Home.instances.push(this);


    },
    highlightCase:function(_case, index) {
        _case.hover = true;
        Element.setOpacity(_case, 1);
        Element.show(Element.select(_case, '.caseName')[0]);
        //        var imgEl = Element.select(_case, '.caseThumbImg')[0];
        //        imgEl.src = 'thumbsx/' + imgEl.src.split('/').last();

    }
    ,
    normalizeCase:function(_case, index) {
        _case.hover = false;
        Element.setOpacity(_case, Idiom.Home._.CASE_INACTIVE_OPACITY);
        Element.hide(Element.select(_case, '.caseName')[0]);
        //        var imgEl = Element.select(_case, '.caseThumbImg')[0];
        //        imgEl.src = 'thumbs/' + imgEl.src.split('/').last();

    }
    ,
    onTagHover:function(tag) {

        var home = this;
        var tagObj = home.tagObjs[tag];
        tagObj.caseEls.each(function(_case, index) {
            home.highlightCase(_case, index);
        });

    }
    ,
    onTagHoverOut:function(tag) {
        var home = this;
        var tagObj = home.tagObjs[tag];
        tagObj.caseEls.each(function(_case, index) {
            home.normalizeCase(_case, index);

        });
    }
    ,

    normalizeCases:function(cb) {
        var home = this;
        var at = this.activeTag;

        if (at && home.auxTransMutex == false) {
            home.auxTransMutex = true;
            var targetEls = home.tagObjs[at].caseEls;
            var clones = targetEls.collect(function(el) {
                var oldPos = Position.positionedOffset(el);

                var cloneEl = document.createElement('div');
                cloneEl.className = el.className;
                cloneEl.innerHTML = el.innerHTML;
                cloneEl.style.position = 'absolute';
                cloneEl.style.left = oldPos[0] + 'px';
                cloneEl.style.top = oldPos[1] + 'px';
                cloneEl.style.cssFloat = cloneEl.style.styleFloat = 'none';

                Element.setOpacity(cloneEl, Idiom.Home._.CASE_INACTIVE_OPACITY);
                el.parentNode.appendChild(cloneEl);

                return cloneEl;
            });

            var showOtherFxArr = [];
            var allCases = home.tagObjs['all'];
            allCases.cases.each(function(_case, index) {
                Element.setOpacity(allCases.caseEls[index], 0);

                if (home.workData[_case].tags.indexOf(at) < 0) {
                    Element.show(allCases.caseEls[index]);
                    showOtherFxArr.push(new Effect.Opacity(allCases.caseEls[index], {from:0, to:Idiom.Home._.CASE_INACTIVE_OPACITY,sync:true}));
                }
            });

            new Effect.Parallel(showOtherFxArr, {duration:0.5,afterFinish:function() {
                var moveFxArr = [];
                clones.each(function(clone, index) {
                    moveFxArr.push(new Effect.Move(clone, {sync:true,x:targetEls[index].offsetLeft,y:targetEls[index].offsetTop,mode:'absolute'}));
                });
                new Effect.Parallel(moveFxArr, {duration:0.5,afterFinish:function() {
                    targetEls.each(function(el) {
                        Element.setOpacity(el, Idiom.Home._.CASE_INACTIVE_OPACITY);
                    });
                    clones.each(function(cl) {
                        try {
                            Element.remove(cl);
                        } catch(err) {
                        }
                    });

                    home.auxTransMutex = false;
                    if (cb) {
                        cb();
                    }
                }});
            }});


        }
        else {
            if (cb) {
                cb();
            }
        }
    }
    ,
    setActiveCases:function(tag, cb) {
        var home = this;
        if (tag && home.activeTag != tag && home.auxTransMutex == false) {
            home.auxTransMutex = true;
            var targetEls = home.tagObjs[tag].caseEls;
            var clones = targetEls.collect(function(el) {

                var oldPos = Position.positionedOffset(el);

                var cloneEl = document.createElement('div');
                cloneEl.className = el.className;
                cloneEl.innerHTML = el.innerHTML;
                cloneEl.style.position = 'absolute';
                cloneEl.style.left = oldPos[0] + 'px';
                cloneEl.style.top = oldPos[1] + 'px';
                cloneEl.style.cssFloat = cloneEl.style.styleFloat = 'none';


                el.parentNode.appendChild(cloneEl);
                Element.setOpacity(el, 0);

                return cloneEl;
            });

            var hideFxArr = [];
            var allCases = home.tagObjs['all'];
            allCases.cases.each(function(_case, index) {
                if (home.workData[_case].tags.indexOf(tag) < 0) {

                    hideFxArr.push(new Effect.Opacity(allCases.caseEls[index], {sync:true,from:Element.getOpacity(allCases.caseEls[index]),to:0,afterFinish:function() {
                        Element.hide(allCases.caseEls[index]);
                    }}));

                }

            });

            new Effect.Parallel(hideFxArr, {duration:0.5,afterFinish:function() {
                var moveFxArr = [];
                clones.each(function(cl, index) {
                    moveFxArr.push(new Effect.Move(cl, {sync:true,x:targetEls[index].offsetLeft,y:targetEls[index].offsetTop,mode:'absolute'}));
                });
                new Effect.Parallel(moveFxArr, {duration:0.5,afterFinish:function() {
                    targetEls.each(function(el) {
                        Element.setOpacity(el, 1);
                    });
                    clones.each(function(cl) {
                        try {
                            Element.remove(cl);
                        }
                        catch(err) {
                        }
                    });
                    home.activeTag = tag;
                    home.auxTransMutex = false;
                    if (cb) {
                        cb();
                    }
                }});
            }});
        }
        else {
            if (cb) {
                cb();
            }
        }

    }
    ,
    setActivePanel:function(name) {

        //        window.location.hash = name + (name == 'work' ? ('&tag=' + this.activeTag) : '');


        var home = this;


        //        console.log(name);

        //        console.log('active- ' + home.activePanel.name);
        //        console.log('transMutex ', home.transMutex);


        if (name != home.activePanel.name && home.transMutex === false) {
            if (name != 'work') {
                this.setHeader();
            }

            //            console.log('got in - ', name);

            //            home.setHeader(name);
            home.transMutex = true;

            var panelObj = home.panels[name];
            //            var activeLabObj = activePanel;

            //new Effect.Move(home.sectionSelector, {x:0, y:Position.cumulativeOffset(labObj.labelEle)[1], mode:'absolute', duration:0.4});
            //todo


            Element.setOpacity(panelObj.ele, 0);
            Element.show(panelObj.ele);
            if (home.panelNames.indexOf(panelObj.name) > home.panelNames.indexOf(home.activePanel.name)) {
                panelObj.ele.style.top = home.activePanel.ele.offsetHeight + 'px';

                new Effect.Parallel([
                    new Effect.Move(home.activePanel.ele, {x:0, y:(-1) * home.activePanel.ele.offsetHeight, mode:'absolute', sync:true}),
                    new Effect.Opacity(home.activePanel.ele, {from:1, to:0, sync:true}),
                    new Effect.Move(panelObj.ele, {x:0, y:0, mode:'absolute', sync:true}),
                    new Effect.Opacity(panelObj.ele, {from:0, to:1, sync:true})

                ], {
                    duration:0.4,
                    afterFinish:function() {
                        Element.hide(home.activePanel.ele);
                        home.activePanel = panelObj;
                        home.transMutex = false;
                    }
                });
            }
            else {
                panelObj.ele.style.top = (home.activePanel.ele.offsetTop - panelObj.ele.offsetHeight ) + 'px';

                new Effect.Parallel([
                    new Effect.Move(home.activePanel.ele, {x:0, y:panelObj.ele.offsetHeight, mode:'absolute', sync:true}),
                    new Effect.Opacity(home.activePanel.ele, {from:1, to:0, sync:true}),
                    new Effect.Move(panelObj.ele, {x:0, y:0, mode:'absolute', sync:true}),
                    new Effect.Opacity(panelObj.ele, {from:0, to:1, sync:true})
                ], {
                    duration:0.4,

                    afterFinish:function() {
                        Element.hide(home.activePanel.ele);
                        home.activePanel = panelObj;
                        home.transMutex = false;
                    }
                });
            }

        }

    }
    ,
    setActiveTag:function(tag) {

        if (Idiom.PageHandler.isVisible) {
            Idiom.PageHandler.hide();
        }


        if (this.specialTags.indexOf(tag) >= 0) {
            this.setHeader(tag);

        }
        else {
            this.setHeader('default');
        }


        var home = this;


        if (home.activePanel.name != 'work') {

            home.setActivePanel('work');
        }

        if (tag != home.activeTag) {
            if (home.activeTag) {
                home.normalizeCases(function() {
                    home.setActiveCases(tag);
                });
            }
            else {
                home.setActiveCases(tag);
            }
        }


    }
    ,
    setActiveProj:function(proj) {
    }
    ,
    setHeader:function(type) {
        ['thought', 'social', 'experience', 'brand', 'product', 'default'].each(function(tag) {
            Element.hide($(tag + 'PanelHeader'));
        });

        Element.show((type || 'default') + 'PanelHeader');
        //
        //        var home = this;
        //        console.log('header switch ' + type);
        //        var activeHeader = (home.activePanel.name + '')||'default';
        //        if($(activeHeader+ 'PanelHeader') ){
        //            Element.hide(activeHeader + 'PanelHeader');
        //        }
        //        Element.show(type + 'PanelHeader');

    }
    ,
    onResize:function() {


        var home = this;
        var newWidth = document.body.offsetWidth - $('sidebar').offsetWidth;

        this.panelNames.each(function(panelName) {
            home.panels[panelName].ele.style.width = newWidth + 'px';

        });
        Idiom.PageHandler.pageHolder.style.width = (newWidth - 40 ) + 'px';
    }
    ,


    addEvents: function(events) {
        this.events = this.events || {};
        Object.extend(this.events, events);
    }
    ,

    addListener: function(eventName, handler, scope) {
        var listeners = this.events[eventName];
        if (!listeners) {
            this.events[eventName] = [];
            listeners = this.events[eventName];
        }
        else {
            if (typeof listeners == "boolean") {
                listeners = [];
            }
        }
        listeners.push({fn: handler, scope: scope});
        this.events[eventName] = listeners;

    }
    ,

    removeListener: function(eventName, fn) {

    }
    ,

    fireEvent: function(eventName) {

        var listeners = this.events[eventName];
        if (listeners && listeners.length && listeners.length > 0) {
            var args = Array.prototype.slice.call(arguments, 1);
            for (var i = 0; i < listeners.length; i++) {
                listeners[i].fn.apply(listeners[i].scope, args);
            }
        }

    }
}
        ;