Idiom.PageHandler = {

    //        pages:{},
    groups:{},

    init:function(config) {

        this.config = config || {};

        //        var controllerObj = config.controller;


        var pageHandler = this;

        this.transMutex = false;
        this.isVisible = false;


        this.currentCase = null;

        this.containerEle = this.config.containerEle || document.body;

        //        this.pageOverlay = document.createElement('div');
        //        Element.addClassName(this.pageOverlay, 'pageOverlay');
        this.pageHolder = document.createElement('div');
        Element.addClassName(this.pageHolder, 'pageHolder');

        this.closeBtn = document.createElement('div');
        this.closeBtn.innerHTML = 'BACK TO PORTFOLIO';
        Element.addClassName(this.closeBtn, 'closeBtn');
        this.pageHolder.appendChild(this.closeBtn);
        Event.observe(this.closeBtn, 'click', function() {
            pageHandler.hide();
        });
        Event.observe(this.closeBtn, 'mouseover', function() {
            Element.addClassName(pageHandler.closeBtn, 'hover');
        });
        Event.observe(this.closeBtn, 'mouseout', function() {
            Element.removeClassName(pageHandler.closeBtn, 'hover');
        });


        this.page = document.createElement('div');
        Element.addClassName(this.page, 'page');

        this.pageControlsEle = document.createElement('div');
        Element.addClassName(this.pageControlsEle, 'pageControls');
        this.pageControlsEle.innerHTML = '<span class="prev">previous project</span><span class="next">next project</span>';
        //        this.pageHolder.appendChild(this.pageControlsEle);


        this.pageHolder.appendChild(this.page);


        this.prevButton = Element.select(this.pageControlsEle, '.prev')[0];
        this.nextButton = Element.select(this.pageControlsEle, '.next')[0];

        Event.observe(this.prevButton, 'click', function() {
            pageHandler.prev();
        });
        Event.observe(this.nextButton, 'click', function() {
            pageHandler.next();
        });

        pageHandler.containerEle.appendChild(pageHandler.pageHolder);
Element.hide(pageHandler.pageHolder);




    },
    show:function(pageID, config) {




        this.currentCase = pageID;

        var pageHandler = this;

        if (!this.isVisible) {
            Element.setOpacity(pageHandler.pageHolder, 1);
//            if (!pageHandler.pageHolder.parentNode) {
//
//                pageHandler.containerEle.appendChild(pageHandler.pageHolder);
//            }
            //set position
            Element.show(pageHandler.pageHolder);
            pageHandler.pageHolder.style.left = $('workPanel').offsetWidth + 'px';
            new Effect.Parallel([
                new Effect.Move(pageHandler.pageHolder, {x:0, y:0, mode:'absolute', sync:true}),
                new Effect.Opacity($('mainWorkPanel'), {from:1, to:0, sync:true})

            ], {
                duration:0.6,
                transition:Effect.Transitions.linear,
                afterFinish:function() {
                    pageHandler.showPage(pageID, config);

                    Element.hide($('mainWorkPanel'));
                    pageHandler.isVisible = true;
                }
            });


        }
        else {
            pageHandler.showPage(pageID, config);
        }


    },

    showPage:function(pageID, config) { 

        var pageHandler = this;

        config = config||{};


        if (!Idiom.Page._.pages[pageID]) {  
            if (config.type == 'caseStudy') {
                new Idiom.Page({
                    pageID:pageID,
                    url:'pgs/' + pageID,
                    processData:pageHandler.makeCaseStudyEle,
                    cls:'caseStudy'
                });
            }
            else {
                new Idiom.Page(Object.extend({pageID:pageID}, config));
            }


        }
        Idiom.Page._.pages[pageID].getEle(function(page) {

            $A(pageHandler.page.childNodes).each(Element.remove);
            pageHandler.page.appendChild(page.ele);
            var possibleSslt = Idiom.Slideshowlet._.get(pageID);
            if (possibleSslt) {
                possibleSslt.setActiveImg(0);
            }
        });

    },

    makeCaseStudyEle:function(data, el, id) {  //processData for case study pages ; last argument is just hacky!

        var caseStudyTpl = '<div class="pageHeader"></div>' +
                           '<div class="pageContent">' +
                                '<div class="ssltHolder"></div>' +
                                '<div class="title"></div>' +
                                '<div class="textHolder">' +
                                '</div>' +
                           '</div>' +
                           '<div class="pageFooter"></div>';


        var pageJsonObj = Idiom.Util.xml2json(Idiom.Util.parseXml('<content>' + data + '</content>'), '').evalJSON();
        var targetObj = pageJsonObj.content;
        var title, text, imgArr;
        targetObj.div.each(function(obj) {
            switch (obj['@class']) {
                case 'title':title = obj['#text'] || '';break;
                case 'text':text = obj['#text'] || '';break;
                case 'imgs':imgArr = obj['img'] instanceof Array?obj['img'].pluck('@src'):[obj['img']['@src']];
            }
        });


        el.innerHTML = caseStudyTpl;
        var titleEle = Element.select(el, '.title')[0];
        var ssltCnt = Element.select(el, '.pageContent .ssltHolder')[0];
        var textCnt = Element.select(el, '.pageContent .textHolder')[0];

        titleEle.innerHTML = title;
        textCnt.innerHTML = '<div class="projTags">' + Idiom.workData[id].tags.collect(function(_tag){
                var tagTpl = new Template('<span class="tagBL #{tagCls}">#{tag}</span>');
                return tagTpl.evaluate({
                    tagCls:'tag' + _tag.capitalize(),
                    tag:_tag
                });
            }).join(', ') + '</div><div class="textContent">' + text + '</div>';


        var sslt = new Idiom.Slideshowlet({
            ele:ssltCnt,
            imgArr:imgArr,
            imgWidth:350,
            eleWidth:650,
            transDuration:0.25,
            id:id,
            inactiveOpacity:0.3
        });


        setTimeout(function(){
            sslt.getLeftPosition = function(ind) {
                return (((-1) * (sslt.imgWidth + 30) * (ind)) /*+ (ind == 0 ? (-15) : 30)*/+ ((ssltCnt.offsetWidth - sslt.imgWidth - 30) / 2) );
            };
            Event.observe(window, 'resize', function(){
                sslt.moveRightEle.style.width  = sslt.moveLeftEle.style.width = ((ssltCnt.offsetWidth - (sslt.imgWidth +30) )/2)+ 'px';
                sslt.resetSslt();
            });


            sslt.moveRightEle.style.width  = sslt.moveLeftEle.style.width = ((ssltCnt.offsetWidth - (sslt.imgWidth +30) )/2)+ 'px';
            sslt.resetSslt();

        },500);


        return el;


    },
    hide:function(cb) {

        var pageHandler = this;
        Element.show($('mainWorkPanel'));

        new Effect.Parallel([
            new Effect.Opacity(pageHandler.pageHolder, {from:1, to:0, sync:true}),
            new Effect.Opacity($('mainWorkPanel'), {from:0, to:1, sync:true}),
            new Effect.Move(pageHandler.pageHolder, {x:$('mainWorkPanel').offsetWidth,y:0, sync:true})
        ], {
            duration:0.8,
            afterFinish:function() {
                Element.hide(pageHandler.pageHolder);
                pageHandler.isVisible = false;
                pageHandler.currentCase = null;
                //hacky
//                window.location.hash = 'work&tag=' + Idiom.Home.instances[0].activeTag;
            }
        });





    },
    next:function() {
    },  //please override
    prev:function() {
    }


};