Event.observe(document,"dom:loaded",function(event){
   $$('.portfolio').each(function(pf){
       new ajaxPortfolio(pf);
   });
});

var ajaxPortfolio = Class.create({
   
   initialize:function(element){
       
       this.portfolio = element;
       this.scroller = new Element('div').addClassName("portfolio-scroller");
       this.project = this.portfolio.select('.portfolio-project')[0];
       var pos = this.project.cumulativeOffset();
       this.screenWidth = document.viewport.getWidth();
       
       
       this.project.wrap(this.scroller);
       this.scroller.clonePosition(this.project);
       
       this.loader = new Element('div',{id:"portfolio-loader"});
       this.scroller.insert(this.loader);
      
       var cl = new CanvasLoader("portfolio-loader");
       cl.setColor('#ffffff'); // default is '#000000'
       cl.setShape('square'); // default is 'oval'
       cl.setDiameter(160); // default is 40
       cl.setDensity(133); // default is 40
       cl.setRange(0.8); // default is 1.33
       cl.setSpeed(3); // default is 2
       cl.setFPS(33); // default is 24
       this.canvasloader = cl;
       
       this.project.setStyle({"position":"absolute","left":"0px","top":"0px"});
       this.scroller.setStyle({"width":this.screenWidth + "px", "left": -pos.left + "px"});
       Event.observe(window,"resize",this.resizeScroller.bind(this));
       this.project.setStyle({"left": pos.left + "px"});
       this.loading = 0;
       this.xpos = pos.left;
       var self = this;
       var n = this.portfolio.select('.portfolio-navigation');
       if(n.length){
           this.navigation = n[0];
           
           this.currentnum = this.navigation.select('.currentnum')[0];
           this.nextlink = this.navigation.select('.nextlink')[0];
           this.prevlink = this.navigation.select('.prevlink')[0];
           this.menu = this.navigation.select('.portfolio-menu')[0];  
           this.menu.observe("mouseenter",function(event){
              this.addClassName("hover"); 
           });
           this.menu.observe("mouseleave",function(event){               
              this.removeClassName("hover"); 
           });
           this.navigation.select('a').each(function(a){              
              a.observe("click",self.loadProject.bind(self)); 
           });
       }
       
   },
   
   loadProject:function(event){
       Event.stop(event);
       var link = Event.element(event);
       if(!this.loading){
           this.loading = 1;
           this.canvasloader.show();
           //this.scroller.addClassName("loading");
           var self = this;
           new Effect.Move(this.project, { x: -this.project.offsetWidth, y: 0, mode: 'absolute', duration: 0.5, afterFinish:function(){
               self.project.remove();
           }});
           var url = link.href;
           
           new Ajax.Request(url,{onSuccess:function(r){
               
                //self.scroller.removeClassName("loading");
                var newhtml = r.responseText;
                self.scroller.insert(newhtml);
                var p = self.scroller.childElements();
                self.newproject = p[p.length-1];
                
                self.showProject();                
                var num = r.getHeader("num");
                var next = r.getHeader("nexturl");      
                var prev = r.getHeader("prevurl");
                self.currentnum.update(num);
                self.nextlink.href = next;
                self.prevlink.href = prev;                
                self.updateMenu(url);
           }});
       }
   },
   
   showProject:function(){
       this.canvasloader.hide();
       this.newproject.setStyle({"position":"absolute","left":this.screenWidth + "px","top":"0px"});
       var pi = this.newproject.select('.portfolio-images')[0];
       new Glider(pi,{'autoGlide':true,'controls':true,'duration':0.6, 'arrows':true});
       var self = this;
       new Effect.Move(this.newproject, { x: this.xpos, y: 0, mode: 'absolute', duration: 0.5, afterFinish:function(){
          self.project = self.newproject;
          self.loading = 0;
          
       }});
   },
   
   updateMenu:function(url){
        this.menu.select('a').each(function(a){
            a.removeClassName("active");
            if(a.href==url)a.addClassName("active");
        });
   },
   
   resizeScroller:function(){
       
       this.screenWidth = document.viewport.getWidth();
       var pos = this.portfolio.cumulativeOffset();       
       this.project.style.left = pos.left + "px";
       
       this.scroller.setStyle({"width":this.screenWidth + "px", "left": -pos.left + "px"});
   }
   
});