///<reference path="mootools-1.2.js" />
var projectSlider = new Class({
    Implements: Events,
    initialize: function(infosObj, menuObj,l){
        $$("#middle div.center","#middle div.right" ,"#middle div.left").each(function(el) {el.destroy();});
        $$("form").set("styles",{"position" : "absolute","z-index":"1","width":"100%","top" : 0, "left": 0});
        this.l = l;
        this.centeredContainer = new Element("div").inject(document.body).set("styles",{"position" : "absolute","z-index":"5","min-width":"950px", "top":159,"left" : 0, "width" : "100%", "height" : 450, "overflow" : "hidden"})
        this.sepStr = " | ";
        this.locked = false;
        this.mainDataObj = new Hash();
        this.currentPrj = infosObj.project;
        this.nextPrj = infosObj.next.project;
        this.previousPrj = infosObj.previous.project;
        this.includeProject(infosObj);
        this.menuObj = menuObj;
        
        this.setProjects(infosObj.project);
        window.addEvent("resize", this.placeProjects.bind(this));
        window.fireEvent("resize");
        window.addEvent('keydown', function(event){if (event.key == 'left') this.movePage(this.previousPrj);else if (event.key == 'right') this.movePage(this.nextPrj); else if (event.key == 'space') this.getProject(this.currentPrj).pageElt.activeImg.fireEvent("click");}.bind(this));
        
    },
    createPage : function(obj) {
        if(!$chk(obj.pageElt)) {
            var pageElt = new page(obj,this);
            obj.pageElt = pageElt;
        }
        var projLabel = obj.project;
            obj.pageElt.container.addEvent("click", function(ev) {
                    if(this.currentPrj != projLabel) this.movePage(projLabel);
                    }.bind(this));
        if(this.currentPrj == obj.project) {
            obj.pageElt.fx.set('left',150);
            obj.pageElt.container.setStyle("display", "block");
        } else if(this.nextPrj == obj.project) {
            obj.pageElt.fx.set('left',this.miniWidth()-100);
            obj.pageElt.container.setStyle("display", "block");
        } else if(this.previousPrj == obj.project) {
            obj.pageElt.fx.set('left',100-obj.pageElt.width);
            obj.pageElt.container.setStyle("display", "block");
        } else {
            obj.pageElt.container.setStyle("display", "none");
        }
    },
    setProjects : function (curProjLabel) {
        var curProj = this.getProject(curProjLabel);
        curProj.pageElt.updateNumberLinks();
        this.setMenu(curProj.menu, curProjLabel);
        
        this.nextPrj = curProj.next.project;
        this.previousPrj = curProj.previous.project;
    },
    placeProjects : function() {
        if($chk(this.getProject(this.nextPrj))) this.getProject(this.nextPrj).pageElt.fx.set('left',this.miniWidth() - 100);
        if(window.getWidth() < this.miniWidth()) $$("form").set("styles" , {"width" :  this.miniWidth()});
        else $$("form").set("styles" , {"width" :  "100%"});
    },
    setMenu : function(menuLabel, curProjLabel) {
        this.curMenu = menuLabel;
        this.currentPrj = curProjLabel;
        var projectsCatStrF = "";
        var projectsCatStrL = "";
        var menufound = false;
        var projectsProjStrF = "";
        var projectsProjStrL = "";
        var submenufound = false;
        var tableMenuF = [];
        var tableMenuL = [];
        var tableProjectsF = [];
        var tableProjectsL = [];
        this.menuObj.each(function(menuElt,menuIt) {
                var isMenu = (menuElt.label == this.curMenu);
                menufound = menufound || isMenu;
                var label = menuElt.projects[0].label;
                if(menufound) tableMenuF.push([menuElt.title, label])
                else tableMenuL.push([menuElt.title, label])
                if(isMenu) {
                    $("ContentH").addClass("C"+menuElt.label);
                    $("logo").setStyle("background-color",menuElt.backColor);
                    $(document.body).setStyle("background-color",menuElt.backColor);
                    document.bgColor = menuElt.backColor;
                    menuElt.projects.each(function(submenuElt, submenuIt) {
                        var isSubMenu = (submenuElt.label == this.currentPrj);
                        submenufound = submenufound || isSubMenu;
                        if(submenufound) tableProjectsF.push([submenuElt.title, submenuElt.label]);
                        else tableProjectsL.push([submenuElt.title, submenuElt.label]);
                        
                        },this);
                } else {
                    $("ContentH").removeClass("C"+menuElt.label);
                }
            },this);
            
        this.trimMenus(tableMenuF.concat(tableMenuL),$("projectsCat"));
        this.trimMenus(tableProjectsF.concat(tableProjectsL),$("projectsProj"));
    },
    trimMenus : function (theTable, container) {
        container.empty();
        var counter = 0;
        var i = 0;
        var finalStr = "";        
        while(counter <= 70 && i < theTable.length) {
            new Element("a").set('text',theTable[i][0].trim()).addClass(i == 0 ? "active":"link").addEvent("click",this.movePage.pass(theTable[i][1],this)).inject(container);
            counter  += theTable[i][0].length;
            if(i != theTable.length - 1 && counter <= 70) new Element("span").addClass("separator").set('text',this.sepStr).inject(container);
            i ++;
        }
        if(counter > 70) new Element("span").set("text","…").inject(container);
        return finalStr;
    },
    getPage : function (pos) {
        if(this.locked) return;
        if(pos == this.currentPage) return;
        this.currentPage = pos % this.pages.length;
        this.showImage();
    },
    movePage : function(newCurrentLabel) {
        var infObj = this.getProject(newCurrentLabel);
        if(!$chk(infObj)) window.location = "?pr=" +  newCurrentLabel + ($chk(this.l.get('id'))? "&l="+this.l.get('id') : "");
        switch(infObj.project) {
         case this.nextPrj : 
            var prevPrj = this.getProject(this.previousPrj)
            prevPrj.pageElt.fx.start(-1000)
            
            var nextProj = this.getProject(this.nextPrj)
            nextProj.pageElt.fx.start(150);
            
            var curPrj = this.getProject(this.currentPrj)
            curPrj.pageElt.fx.start(100-curPrj.pageElt.width);
            
            var nextnextPrj = this.getProject(nextProj.next.project)
            nextnextPrj.pageElt.fx.set('left',window.getWidth() + 500);
            
            //nextnextPrj.pageElt.container.setStyle("width",nextnextPrj.pageElt.width);
            nextnextPrj.pageElt.container.setStyle("display","block");
            nextnextPrj.pageElt.fx.start(this.miniWidth() - 100);
         break;
         case this.previousPrj :
            var nextProj = this.getProject(this.nextPrj);
            nextProj.pageElt.fx.start(window.getWidth() + 500);
            
            var prevPrj = this.getProject(this.previousPrj)
            prevPrj.pageElt.fx.start(150);
            
            var curPrj = this.getProject(this.currentPrj)
            curPrj.pageElt.fx.start(this.miniWidth() - 100);
            
            var preprevPrj = this.getProject(prevPrj.previous.project);
            preprevPrj.pageElt.fx.set('left',-1000);
            preprevPrj.pageElt.container.setStyle("display","block");
            preprevPrj.pageElt.fx.start(100-preprevPrj.pageElt.width);
            
            
         break;
         case this.currentPrj : 
            return;
         break;
         default:
            if(!$chk(infObj.previous)) window.location = "?pr=" +  newCurrentLabel + ($chk(this.l.get('id'))? "&l="+this.l.get('id') : "");
            this.getProject(this.previousPrj).pageElt.fx.start(-1000);
            if(this.nextPrj != infObj.previous.project) this.getProject(this.nextPrj).pageElt.fx.start(-1000);                
                
            
            this.getProject(this.currentPrj).pageElt.fx.start(-1000);
            
            var nextproj = this.getProject(infObj.next.project);
            nextproj.pageElt.fx.set('left',window.getWidth() + 500);
            nextproj.pageElt.container.setStyle("display","block");
            
            nextproj.pageElt.fx.start(this.miniWidth() - 100);
            
            
            var prevproj = this.getProject(infObj.previous.project);
            prevproj.pageElt.fx.set('left',window.getWidth() + 500);
            prevproj.pageElt.container.setStyle("display","block");
            prevproj.pageElt.fx.start(100 - prevproj.pageElt.width);
            
            infObj.pageElt.fx.set('left',window.getWidth() + 500);
            infObj.pageElt.container.setStyle("display","block");
            infObj.pageElt.fx.start(150);
            
            
         break;
        }
        this.setProjects(newCurrentLabel);
        this.fireEvent("onBeforeMove");    
        return false;
    },
    preloadProject : function(projectLabel) {
        var jSonRequest = new Request.JSON( 
            {url: "/ajax/getProject.aspx",
             onComplete: function(prj,prjT){
                
               
                this.includeProject(JSON.decode(prjT));
            }.bind(this)}).get({'project': projectLabel});
    },
    showProject : function (projectLabel) {
        this.locked = true;
        this.setProjects(projectLabel);
    },
    showImage : function() {
        var pgN = "";
        this.pages.each(function (curP, it) {
            var pageNum = it;
            curP.container.setStyle("display",pageNum == this.currentPage ? "block" : "none");
        }, this);
        
    },
    getProject : function (projectLabel){
        //checks if the projects already exists
        var project = this.mainDataObj.get(projectLabel);
        if($chk(project) && !project.loaded) this.preloadProject(projectLabel);
        return project;
    },
    includeProject : function(newProject){
        //includes the project in the main object if it does not exists of if it hasn't been loaded)
        if(!$chk(this.mainDataObj.get(newProject.project))) this.mainDataObj.set(newProject.project,newProject);
        else if(!this.mainDataObj.get(newProject.project).loaded) {
            // keep the pageElt :
            newProject.pageElt = this.mainDataObj.get(newProject.project).pageElt;
            // update the pageElt : 
            newProject.pageElt.updatePages(newProject.pages);
            
            this.mainDataObj.set(newProject.project,newProject);
        }
        var imgArr = [];
        newProject.pages.each(function (paeElt) {
            imgArr.push(paeElt.pageData.src);
        });
        
        //includes the previous and next if theses are not already loaded : 
        
        var preloadprev = function () {};
        
        if(!$chk(this.mainDataObj.get(newProject.previous.project))) {
            this.mainDataObj.set(newProject.previous.project,newProject.previous);
            this.createPage(this.mainDataObj.get(newProject.previous.project));
            preloadprev = this.preloadProject.pass(newProject.previous.project,this)
            //imgPreload.addEvent('onComplete',);
        }
        var preloadnext = function () {};
        if(!$chk(this.mainDataObj.get(newProject.next.project))) {
            this.mainDataObj.set(newProject.next.project,newProject.next);
            
            this.createPage(this.mainDataObj.get(newProject.next.project));
            preloadnext = this.preloadProject.pass(newProject.next.project,this)
            //this.preloadProject(newProject.next.project);
        }
        var imgPreload = new Asset.images(imgArr,{"onComplete" : function () {preloadprev();preloadnext(); }.bind(this)});
        this.createPage(this.mainDataObj.get(newProject.project));
    },
    miniWidth:function () {
           return Math.max(window.getWidth(), 950);
    }
    
});
var page = new Class({
    initialize: function(projObj, parentClass){
        this.container = new Element("div").inject(parentClass.centeredContainer).set('styles',this.styleObj);
        this.activeImg = new Element("img", {"src" : projObj.pages[projObj.curPage].pageData.src}).inject(this.container).setStyle('styles',{"height": 350});
        this.parentClass = parentClass;
        this.currentImage = projObj.curPage;
        this.legends = new Element("div", {"class" : "legends"}).inject(this.container);
        this.legendStr = "<div class='title'><b>" + projObj.title + "</b></div>"
        this.legendStr += "<div class='address'>" + projObj.address + "</div>"
        this.legendStr += "<div class='mo'>"+parentClass.l.get("mo")+" <b>" + projObj.mo + "</b></div>"
        this.legendStr += "<div class='surface'>"+parentClass.l.get("surface")+" <b>" + projObj.surface + " m²</b></div>"
        this.legendStr += "<div class='annee'>"+parentClass.l.get("annee")+" <b>" + projObj.annee + "</b></div>"
        this.legends.innerHTML = this.legendStr;
        this.arrow = new Element("div", {"class" : "arrow"}).inject(this.container);
        this.fx = new Fx.Tween(this.container, {property : 'left',duration:300,"onComplete" : this.showLegends.bind(this)})
        this.pages = projObj.pages;
        this.projLabel = projObj.project;
        
        this.parentClass.addEvent("onBeforeMove", this.switchClasses.bind(this));
        this.width = Math.min(projObj.pages[projObj.curPage].pageData.pageWidth, window.getWidth()-300);
        
        this.activeImg.addEvent("click",function () {
            if(this.parentClass.currentPrj != this.projLabel) return;
            if(this.pages[this.currentImage].layout == 1) this.getImage(this.currentImage+1);
            else this.getVideo(this.currentImage);
            }.bind(this));
        this.showLegends(false);
        this.switchClasses();
  },
  updatePages : function (pagesArray) {
        this.pages = pagesArray;
  },
  getImage : function (imageNum){
        this.cleanVideo();
        if(imageNum >= this.pages.length) imageNum = 0;
        this.activeImg.set("styles",{"display":"block"});
        this.activeImg.set("src", this.pages[imageNum].pageData.src);
        
        this.width = this.pages[imageNum].pageData.pageWidth;
        this.currentImage = imageNum;
        if(this.parentClass.currentPrj == this.projLabel) this.updateNumberLinks();
  },
  getVideo : function (imageNum) {
        this.cleanVideo();
        this.activeImg.set("styles",{"display":"none"});
        this.video = new Element("div",{"styles":{height : 350, width : 436, "background-color" : "rgb(0,0,0)"}}).inject(this.container,'top');
        if(Browser.Plugins.Flash.version >= 9)  new Swiff('/video.swf', {"width": "436px","height": "350px", vars : {'urlVideo' : this.pages[imageNum].pageData.videoURL},params : {'scale' : 'showall','allowFullScreen' : 'true','allowScriptAccess' :'sameDomain'}}).inject(this.video)//,, container : this.video});
        else new Element("a",{'text' : "veuillez télécharger la dernière version du lectuer flash en suivant ce lien pour lire cette vidéo","target" : "_blank","href" : "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=shockwaveFlash", "styles" : {"color" : "white", "font-size" : "10px", "display" : "block", "margin" : "5px"}}).inject(this.video);
  },
  cleanVideo : function() {
        if($chk(this.video)) this.video.dispose();
        this.activeImg.set("styles",{"display":"block"});
  },
  updateNumberLinks : function () {
        $("projectsImg").empty();
        this.pages.each(function (curP, it) {
            var pagenum = it;
            new Element("a").set('text',(it+1)).addClass(it==this.currentImage?"active":"inactive").inject($("projectsImg")).addEvent("click",this.getImage.pass(pagenum,this))
            if(it != this.pages.length - 1) new Element("span", {"class" : "separator"}).inject($("projectsImg")).set("text"," | ");
        }, this);
  },
  switchClasses : function () {
    this.cleanVideo();
    if(this.parentClass.nextPrj == this.projLabel) this.container.addClass("nextP");
    else this.container.removeClass("nextP");
    
    if(this.parentClass.previousPrj == this.projLabel) this.container.addClass("prevP");
    else this.container.removeClass("prevP");
    
    this.container.setStyle("width",((this.parentClass.currentPrj == this.projLabel)? 650 :this.width) + "px");
  },
  showLegends : function () {
    this.container.setStyle("width",this.parentClass.currentPrj == this.projLabel?650:this.width);
    this.container.setStyle("height",this.parentClass.currentPrj == this.projLabel?450:350);
    this.legends.fade(this.parentClass.currentPrj == this.projLabel?"in":"out");
    //this.legends.setStyle("display",this.parentClass.currentPrj == this.projLabel?"block":"none");
    if(this.parentClass.currentPrj == this.projLabel) {
        this.updateNumberLinks();
    } else {
        this.container.setStyle("width",this.width);
     if(this.parentClass.nextPrj != this.projLabel && this.parentClass.previousPrj != this.projLabel && this.currentImage != 0)
        this.getImage(0);
    }
  },
  styleObj : {
    "position" : "absolute",
    "text-align" : "left",
    "top" : 0,
    "display" : "none",
    "height" : "450px",
    "overflow" : "hidden"
  }
});