/*
 * Object for controlling page content
 */
var page = {

  maxLinks: 100,           // the maximum number of any type of link
  frame: 346,              // width of a content frame
  frameClassName: "frame", // class name of a frame div
  left : 0,                // current left position of frame
  section : null,          // current section
  isScrollable : true,     // should the prev/next links be active?
  
  // Called on page load
  init : function(){

    var imgAbout = $('aboutImg');    
    var imgWork = $('workImg');
    var imgContact = $('contactImg');
    
    var frmAbout = $('aboutFrame');
    var frmWork = $('workFrame');
    var frmContact = $('contactFrame');
    

    // Manually set the opacity of elements
    imgAbout.effect('opacity').set(0);    
    imgWork.effect('opacity').set(0);
    imgContact.effect('opacity').set(0);
    
    frmAbout.effect('opacity').set(0);
    frmWork.effect('opacity').set(0);
    frmContact.effect('opacity').set(0);


    // Set the width of each section's frame.  Will be equal to (# frames in its scroller * page.frame)
    frmAbout.effect('width').set(page.getFrameWidth($('aboutScroll')));
    frmWork.effect('width').set(page.getFrameWidth($('workScroll')));
    frmContact.effect('width').set(page.getFrameWidth($('contactScroll')));
    

    // Create the opacity effects
    var opAbout = imgAbout.effect('opacity', {transition: Fx.Transitions.Cubic.easeOut});        
    var opWork = imgWork.effect('opacity', {transition: Fx.Transitions.Cubic.easeOut});
    var opContact = imgContact.effect('opacity', {transition: Fx.Transitions.Cubic.easeOut});
    
    var opFrmAbout = frmAbout.effect('opacity', {transition: Fx.Transitions.Cubic.easeIn});
    var opFrmWork = frmWork.effect('opacity', {transition: Fx.Transitions.Cubic.easeIn});
    var opFrmContact = frmContact.effect('opacity', {transition: Fx.Transitions.Cubic.easeIn});


    // Create the verical content slider
    var slider = new Fx.Styles('slider', {transition: Fx.Transitions.Circ.easeOut});    
    
    
    // Create the paging sliders
    // About
    if(frmAbout.offsetWidth > page.frame) {
      var slideAbout = new Fx.Style('aboutScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('aboutNext').addEvent('click', this.scroll.bindAsEventListener(slideAbout, {section: "about", coef: -1}));    
      $('aboutPrev').addEvent('click', this.scroll.bindAsEventListener(slideAbout, {section: "about", coef: 1}));  
      $('aboutPagingBox').style.display = "block";
    }    
    // Work
    if(frmWork.offsetWidth > page.frame) {      
      var slideWork = new Fx.Style('workScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('workNext').addEvent('click', this.scroll.bindAsEventListener(slideWork, {section: "work", coef: -1}));    
      $('workPrev').addEvent('click', this.scroll.bindAsEventListener(slideWork, {section: "work", coef: 1}));     
      $('workPagingBox').style.display = "block";
    }
    // Contact
    if(frmContact.offsetWidth > page.frame) {
      var slideContact = new Fx.Style('contactScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('contactNext').addEvent('click', this.scroll.bindAsEventListener(slideContact, {section: "contact", coef: -1}));    
      $('contactPrev').addEvent('click', this.scroll.bindAsEventListener(slideContact, {section: "contact", coef: 1}));    
      $('contactPagingBox').style.display = "block";
    }    
       
    
    
    // Work thumbnail scrollers and back button links
    for(var i = 2; i < this.maxLinks; i++){
      var jump = $('lnkWorkPg' + i);
      var back = $('lnkBackPg' + i);
      if(jump != null && back != null) {
        jump.addEvent('click', this.scroll.bindAsEventListener(slideWork, {section: "work", coef: -1, skip: i-2}));
        back.addEvent('click', this.scroll.bindAsEventListener(slideWork, {section: "work", coef: 1, skip: i-2}));
      } else {
        break;
      }  
    }
    
    // Bind event listeners to the relevant site links
    var linkAbout = $('about');
    linkAbout.addEvent('mouseover', hover.over.bindAsEventListener(opAbout, "about"));
    linkAbout.addEvent('mouseout', hover.out.bindAsEventListener(opAbout, "about"));
    linkAbout.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmAbout, section: "about"}));    

    var linkWork = $('work');
    linkWork.addEvent('mouseover', hover.over.bindAsEventListener(opWork, "work"));
    linkWork.addEvent('mouseout', hover.out.bindAsEventListener(opWork, "work"));
    linkWork.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmWork, section: "work"}));
    
    // Work body text links
    for(var i = 1; i < this.maxLinks; i++){
      var link = $('lnkWork' + i);
      if(link != null) link.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmWork, section: "work"}));
      else break;      
    }

    var linkContact = $('contact');
    linkContact.addEvent('mouseover', hover.over.bindAsEventListener(opContact, "contact"));
    linkContact.addEvent('mouseout', hover.out.bindAsEventListener(opContact, "contact"));      
    linkContact.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmContact, section: "contact"}));
    
    // Contact body text links
    for(var i = 1; i < this.maxLinks; i++){
      var link = $('lnkContact' + i);
      if(link != null) link.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmContact, section: "contact"}));
      else break;      
    }    

  },
  
  
  
  // Causes content area to popup
  display : function(event, args){
   
    // Check to see if a previously clicked item needs hovering out first
    if(page.section != null && page.section != args.section) {
      $(page.section+'Img').effect('opacity', {transition: Fx.Transitions.Cubic.easeOut}).start(0);
      $(page.section+'Frame').effect('opacity', {transition: Fx.Transitions.Cubic.easeIn}).addEvent('onComplete', 
          function(){
            args.opacity.start(1);
            $(page.section+'Scroll').effect('left').set(0);
          }
        ).start(0);
       
      
      // Check if a new item needs to be hovered in
      $(args.section+'Img').effect('opacity', {transition: Fx.Transitions.Cubic.easeOut}).start(1);
    
    // First time into a new section
    } else if(page.section != args.section) {
      this.start({'height': 304, 'top': -180});
      args.opacity.start(1);    
      
    // Clicking on the currently loaded section
    } else {
      return false;
    }
    
    // Set the current page being displayed and update paging
    page.section = args.section;
    page.left = 0;
    page.updatePaging(page.section, 0);
    
    return false;
  },
  
  
  
  // Scrolls through the frames in a content area
  scroll : function(event, args){  

    // Make sure don't get concurrent scroll requests
    if(!page.isScrollable) return;

    // Check if a scroll can be completed in the direction requested
    var count = $(args.section+'Frame').offsetWidth/page.frame;
    if((args.coef == 1 && page.left == 0) ||
       (args.coef == -1 && (page.left - page.frame) == (count * page.frame * -1))) return;

    page.isScrollable = false;     
    var skip = args.skip == null ? 0 : args.skip;
    page.left += (page.frame + (page.frame * skip)) * args.coef;

    this.start(page.left);  
    
    // Update page "1 of x" count and apply disabled styles as required
    page.updatePaging(page.section, page.left);
  },
  
  
  
  
  // Updates the paging controls up a section
  updatePaging : function(section, left, count) {
  
    // Nothing to do if no paging in this section
    if(!$(section+'Paging')) return;
  
    if(count == null) count = $(section+'Frame').offsetWidth/page.frame;
  
    var currPage = ((left/page.frame) * -1) + 1;
    $(section+'Paging').innerHTML =  currPage + " of " + count;
    $(section+'Prev').className = (currPage == 1) ? "prev disabled" : "prev";
    $(section+'Next').className = (currPage == count) ? "next disabled" : "next";
  },
  
  
  // Calculates a section's frame's width based on number frames in the scroller
  getFrameWidth : function(scroller){
  
    if(scroller == null) page.frame;
  
    var count = 0;
    for(var i = 0; i < scroller.childNodes.length; i++){
      var child = scroller.childNodes[i];
      if(child.className == page.frameClassName)
        count++;
    }  
    return count * page.frame;
  }  
  

}


/*
 * Object for handling opacity menu hovers
 */
var hover = {

  over : function(event, section){
  
    if(page.section == section) return;
  
    this.stop();
    this.clearTimer();
    this.start(1);     
  }, 
  
  out : function(event, section){
  
    if(page.section == section) return;
  
    this.stop();
    this.clearTimer();
    this.start(0); 
  }
}