/*

 * 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); 

  }

}