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

  maxLinks: 100,           // the maximum number of any type of link
  frame: 630,              // 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 imgTarifas = $('tarifasImg');
    var imgCurriculum = $('curriculumImg');
    var imgDiseno = $('disenoImg');
    var imgContactenos = $('contactenosImg');
    
    var frmAbout = $('aboutFrame');
    var frmWork = $('workFrame');
    var frmContact = $('contactFrame');
    var frmTarifas = $('tarifasFrame');
    var frmCurriculum = $('curriculumFrame');
    var frmDiseno = $('disenoFrame');
    var frmContactenos = $('contactenosFrame');
    

    // Manually set the opacity of elements
    imgAbout.effect('opacity').set(0);    
    imgWork.effect('opacity').set(0);
    imgContact.effect('opacity').set(0);
    imgTarifas.effect('opacity').set(0);
    imgCurriculum.effect('opacity').set(0);
    imgDiseno.effect('opacity').set(0);
    imgContactenos.effect('opacity').set(0);
    
    frmAbout.effect('opacity').set(0);
    frmWork.effect('opacity').set(0);
    frmContact.effect('opacity').set(0);
    frmTarifas.effect('opacity').set(0);
    frmCurriculum.effect('opacity').set(0);
    frmDiseno.effect('opacity').set(0);
    frmContactenos.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')));
    frmTarifas.effect('width').set(page.getFrameWidth($('tarifasScroll')));
    frmCurriculum.effect('width').set(page.getFrameWidth($('curriculumScroll')));
    frmDiseno.effect('width').set(page.getFrameWidth($('disenoScroll')));
    frmContactenos.effect('width').set(page.getFrameWidth($('contactenosScroll')));
    

    // 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 opTarifas = imgTarifas.effect('opacity', {transition: Fx.Transitions.Cubic.easeOut});
    var opCurriculum = imgCurriculum.effect('opacity', {transition: Fx.Transitions.Cubic.easeOut});
    var opDiseno = imgDiseno.effect('opacity', {transition: Fx.Transitions.Cubic.easeOut});
    var opContactenos = imgContactenos.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});
    var opFrmTarifas = frmTarifas.effect('opacity', {transition: Fx.Transitions.Cubic.easeIn});
    var opFrmCurriculum = frmCurriculum.effect('opacity', {transition: Fx.Transitions.Cubic.easeIn});
    var opFrmDiseno = frmDiseno.effect('opacity', {transition: Fx.Transitions.Cubic.easeIn});
    var opFrmContactenos = frmContactenos.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";
    }  
    // Tarifas
    if(frmTarifas.offsetWidth > page.frame) {
      var slideTarifas = new Fx.Style('tarifasScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('tarifasNext').addEvent('click', this.scroll.bindAsEventListener(slideTarifas, {section: "tarifas", coef: -1}));    
      $('tarifasPrev').addEvent('click', this.scroll.bindAsEventListener(slideTarifas, {section: "tarifas", coef: 1}));    
      $('tarifasPagingBox').style.display = "block";
    }  
    
    // Curriculum
    if(frmCurriculum.offsetWidth > page.frame) {
      var slideCurriculum = new Fx.Style('curriculumScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('curriculumNext').addEvent('click', this.scroll.bindAsEventListener(slideCurriculum, {section: "curriculum", coef: -1}));    
      $('curriculumPrev').addEvent('click', this.scroll.bindAsEventListener(slideCurriculum, {section: "curriculum", coef: 1}));    
      $('curriculumPagingBox').style.display = "block";
    }  
    // Diseno
    if(frmDiseno.offsetWidth > page.frame) {
      var slideDiseno = new Fx.Style('disenoScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('disenoNext').addEvent('click', this.scroll.bindAsEventListener(slideDiseno, {section: "diseno", coef: -1}));    
      $('disenoPrev').addEvent('click', this.scroll.bindAsEventListener(slideDiseno, {section: "diseno", coef: 1}));    
      $('disenoPagingBox').style.display = "block";
    }  
    // Contáctenos
    if(frmContactenos.offsetWidth > page.frame) {
      var slideContactenos = new Fx.Style('contactenosScroll', 'left').addEvent('onComplete', function(){page.isScrollable = true;});    
      $('contactenosNext').addEvent('click', this.scroll.bindAsEventListener(slideContactenos, {section: "contactenos", coef: -1}));    
      $('contactenosPrev').addEvent('click', this.scroll.bindAsEventListener(slideContactenos, {section: "contactenos", coef: 1}));    
      $('contactenosPagingBox').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;      
    }    
    
    
   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;      
    }  
    
    // Contact body text links
    for(var i = 1; i < this.maxLinks; i++){
      var link = $('lnkTarifas' + i);
      if(link != null) link.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmTarifas, section: "tarifas"}));
      else break;      
    }  
    
    var linkTarifas = $('tarifas');
    linkTarifas.addEvent('mouseover', hover.over.bindAsEventListener(opTarifas, "tarifas"));
    linkTarifas.addEvent('mouseout', hover.out.bindAsEventListener(opTarifas, "tarifas"));      
    linkTarifas.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmTarifas, section: "tarifas"}));
   
    // Curriculum body text links
    for(var i = 1; i < this.maxLinks; i++){
      var link = $('lnkCurriculum' + i);
      if(link != null) link.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmCurriculum, section: "curriculum"}));
      else break;      
    } 
    
    var linkCurriculum = $('curriculum');
    linkCurriculum.addEvent('mouseover', hover.over.bindAsEventListener(opCurriculum, "curriculum"));
    linkCurriculum.addEvent('mouseout', hover.out.bindAsEventListener(opCurriculum, "curriculum"));      
    linkCurriculum.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmCurriculum, section: "curriculum"}));
    
    // Diseno body text links
    for(var i = 1; i < this.maxLinks; i++){
      var link = $('lnkDiseno' + i);
      if(link != null) link.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmDiseno, section: "diseno"}));
      else break;      
    } 
    
    var linkDiseno = $('diseno');
    linkDiseno.addEvent('mouseover', hover.over.bindAsEventListener(opDiseno, "diseno"));
    linkDiseno.addEvent('mouseout', hover.out.bindAsEventListener(opDiseno, "diseno"));      
    linkDiseno.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmDiseno, section: "diseno"}));
    
    // Contactenos body text links
    for(var i = 1; i < this.maxLinks; i++){
      var link = $('lnkContactenos' + i);
      if(link != null) link.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmContactenos, section: "contactenos"}));
      else break;      
    }  
    var linkContactenos = $('contactenos');
    linkContactenos.addEvent('mouseover', hover.over.bindAsEventListener(opDiseno, "contactenos"));
    linkContactenos.addEvent('mouseout', hover.out.bindAsEventListener(opDiseno, "contactenos"));      
    linkContactenos.addEvent('click', this.display.bindAsEventListener(slider, {opacity: opFrmContactenos, section: "contactenos"}));  

  },
  
  
  
  // 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 && document.getElementById("slider").style.visibility=="visible") {
      $(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 || document.getElementById("slider").style.visibility=="hidden") {
        //Evita que la paginacion se quede dañada
      if(page.section == args.section && document.getElementById("slider").style.visibility=="hidden"){
          $(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
      }
      var content=document.getElementById("slider");
      content.style.visibility="visible";
      content.style.height="0";
      this.start({'height': 304, 'top': 0});
      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 + " de " + 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); 
  }
}