YAHOO.namespace('LBC');

YAHOO.LBC.Menu = (function() {
  
  return {
    init: function() {
      // grab some starting points..
      var oDomGalleryMenu = document.getElementById('gallery-menu');
      var aDomGalleryUL = oDomGalleryMenu.getElementsByTagName('ul');
      var oDomMainImg = document.getElementById('gallery-main-img');
      var oDomMainImgWrapper = document.getElementById('gallery-main-img-wrapper');
      
      // grab all the lis to find the total number of thumbs
      var aDomGalleryLis = oDomGalleryMenu.getElementsByTagName('li');
      var iGalleryMenuLength = aDomGalleryLis.length;

      // find the active class number
      var iActiveLi = 0;
      for(var i = 0; i < iGalleryMenuLength; i++) {
        if(YAHOO.util.Dom.hasClass(aDomGalleryLis[i], 'active')) {
          iActiveLi = i;
          break;
        }
      }
      var oDomTmpLi = aDomGalleryLis[iActiveLi+1];
      if(oDomTmpLi) {
          var oDomNextImgThumb = oDomTmpLi.getElementsByTagName('img')[0];
          var imgCache = new Image();
          imgCache.src = oDomNextImgThumb.src.replace('thumbs','');
      }
      
      
      // initial move list if we start on page 2 etc...
      var iStartRemove = Math.floor(iActiveLi/10)*10;
      
      for(var i = iStartRemove - 1; i >= 0; i--) {
        YAHOO.util.Dom.setStyle(aDomGalleryLis[i].parentNode, 'display', 'none');
      }      
      
      // we have more than 10 items => gt 2 lists
      if(aDomGalleryUL.length > 1) {      
        
        // back
        var oDomBack = document.createElement('a');
        var oDomBackImg = document.createElement('img');
        oDomBackImg.src = 'assets/carousel/back_on.jpg';
        YAHOO.util.Event.addListener(oDomBackImg, 'mouseover', function(e, o) {
          this.src = 'assets/carousel/back.jpg';
        });
        YAHOO.util.Event.addListener(oDomBackImg, 'mouseout', function(e, o) {
          this.src = 'assets/carousel/back_on.jpg';
        });
        
        oDomBack.appendChild(oDomBackImg);
        // find the next image
        var oDomGalleryMenuNav = document.createElement('div');
        oDomGalleryMenuNav.id = 'gallery-menu-nav';
        
        oDomGalleryMenuNav.appendChild(oDomBack);
        
        var funcBackTen = function(e) {
          var oDomCurrLi = aDomGalleryLis[iActiveLi];
          if(iActiveLi < 10) {
            return;
          }
          iActiveLi = Math.floor((iActiveLi-10)/10)*10;
                    
          // check if we need to move the list
          var iStartShow = Math.floor(iActiveLi/10)*10;
          for(var i = iStartShow; i <= iStartShow + 10; i++) {
            YAHOO.util.Dom.setStyle(aDomGalleryLis[i].parentNode, 'display', 'inline');
          }

          // find the next LI
          var oDomNextLi = aDomGalleryLis[iActiveLi];

          // grab the image from the next thumbnail
          var oDomNextThumb = oDomNextLi.getElementsByTagName('img')[0];

          oDomMainImg.src = oDomNextThumb.src.replace('thumbs/','');
          oDomMainImg.alt = oDomNextThumb.alt;

          var oDomOverlay = oDomCurrLi.getElementsByTagName('div')[0];
          var oDomOverlayClone = oDomOverlay.cloneNode(false);

          // remove and re-add in correct place
          oDomNextLi.appendChild(oDomOverlayClone);
          oDomOverlay.parentNode.removeChild(oDomOverlay);
        };
        YAHOO.util.Event.addListener(oDomBack, 'click', funcBackTen);
        
        // forward
        var oDomForward = document.createElement('a');
        var oDomForwardImg = document.createElement('img');
        oDomForwardImg.src = 'assets/carousel/forward_on.jpg';
        YAHOO.util.Event.addListener(oDomForwardImg, 'mouseover', function(e, o) {
          this.src = 'assets/carousel/forward.jpg';
        });
        YAHOO.util.Event.addListener(oDomForwardImg, 'mouseout', function(e, o) {
          this.src = 'assets/carousel/forward_on.jpg';
        });
        oDomForward.appendChild(oDomForwardImg);        
        oDomGalleryMenuNav.appendChild(oDomForward);
        
        var funcFwdTen = function(e) {
          var oDomCurrLi = aDomGalleryLis[iActiveLi];
          iActiveLi = Math.floor((iActiveLi+10)/10)*10;
          
          if(!aDomGalleryLis[iActiveLi]) {
            iActiveLi -= 10;
            return;
          }
          
          // initial move list if we start on page 2 etc...
          var iStartRemove = Math.floor(iActiveLi/10)*10;
          for(var i = iStartRemove - 1; i >= 0; i--) {
            YAHOO.util.Dom.setStyle(aDomGalleryLis[i].parentNode, 'display', 'none');
          } 

          // find the next LI
          var oDomNextLi = aDomGalleryLis[iActiveLi];

          // grab the image from the next thumbnail
          var oDomNextThumb = oDomNextLi.getElementsByTagName('img')[0];

          oDomMainImg.src = oDomNextThumb.src.replace('thumbs','');
          oDomMainImg.alt = oDomNextThumb.alt;

          var oDomOverlay = oDomCurrLi.getElementsByTagName('div')[0];
          var oDomOverlayClone = oDomOverlay.cloneNode(false);

          // remove and re-add in correct place
          oDomNextLi.appendChild(oDomOverlayClone);
          oDomOverlay.parentNode.removeChild(oDomOverlay);
        };
        YAHOO.util.Event.addListener(oDomForward, 'click', funcFwdTen);
        
        oDomGalleryMenu.parentNode.appendChild(oDomGalleryMenuNav);
      }
      
      // container for left right arrows...
      var oDomNavigation = document.createElement('div');
      oDomNavigation.id = 'gallery-nav';
      
      /*
      // play!
      var oDomPlay = document.createElement('a');
      var oDomPlayImg = document.createElement('img');
      oDomPlayImg.src = 'assets/carousel/pause_on.jpg';
      YAHOO.util.Event.addListener(oDomPlayImg, 'mouseover', function(e, o) {
        this.src = 'assets/carousel/play.jpg';
      });
      YAHOO.util.Event.addListener(oDomPlayImg, 'mouseout', function(e, o) {
        this.src = 'assets/carousel/play_on.jpg';
      });
      
      oDomPlay.appendChild(oDomPlayImg);
      
      var playTimeout;
      // we always start off playing :-(
      var bInPlay = false;
      var funcGalleryPlay = function(e) {
        // move forward; we are at the end if this is false
        
        var result = funcGalleryFwd(e);
        if(result == false) {
          bInPlay = false;
        }
        
        if(result == 'inAnim') {
          console.log('IN ANIM');
          window.clearTimeout(playTimeout);
          playTimeout = window.setTimeout(funcGalleryPlay, 1000);
          return;
        }        
        if(e) {
          YAHOO.util.Event.removeListener(oDomPlayImg, 'mouseover');
          YAHOO.util.Event.removeListener(oDomPlayImg, 'mouseout');
          oDomPlayImg.src = 'assets/carousel/pause_on.jpg';
          YAHOO.util.Event.addListener(oDomPlayImg, 'mouseover', function(e, o) {
            this.src = 'assets/carousel/pause.jpg';
          });
          YAHOO.util.Event.addListener(oDomPlayImg, 'mouseout', function(e, o) {
            this.src = 'assets/carousel/pause_on.jpg';
          });
          bInPlay = !bInPlay;
        }
        if(!bInPlay) {
          oDomPlayImg.src = 'assets/carousel/play_on.jpg';
          YAHOO.util.Event.addListener(oDomPlayImg, 'mouseover', function(e, o) {
            this.src = 'assets/carousel/play.jpg';
          });
          YAHOO.util.Event.addListener(oDomPlayImg, 'mouseout', function(e, o) {
            this.src = 'assets/carousel/play_on.jpg';
          });          
          window.clearTimeout(playTimeout);
          return true;
        }
        window.clearTimeout(playTimeout);
        playTimeout = window.setTimeout(funcGalleryPlay, 4000);
      };*/
      
      // forward
      var oDomForward = document.createElement('a');
      var oDomForwardImg = document.createElement('img');
      oDomForwardImg.src = 'assets/carousel/forward_on.jpg';
      YAHOO.util.Event.addListener(oDomForwardImg, 'mouseover', function(e, o) {
        this.src = 'assets/carousel/forward.jpg';
      });
      YAHOO.util.Event.addListener(oDomForwardImg, 'mouseout', function(e, o) {
        this.src = 'assets/carousel/forward_on.jpg';
      });
            
      var inAnim = false;
      // on click handler      
      var funcGalleryFwd = function(e) {
        YAHOO.util.Event.stopEvent(e);
        // find the next image
        var oDomCurrLi = aDomGalleryLis[iActiveLi];
        var oDomTmpLi = aDomGalleryLis[iActiveLi+1];
        if(oDomTmpLi) {
            var oDomNextImgThumb = oDomTmpLi.getElementsByTagName('img')[0];
            var imgCache = new Image();
            imgCache.src = oDomNextImgThumb.src.replace('thumbs','');
        }
        // make sure we can access this element.
        if(iActiveLi+1 >= iGalleryMenuLength || iActiveLi+1 < 0) {
          return false;
        }
        
        if(inAnim){
          return 'inAnim';
        }
        // go forward one place
        iActiveLi++;
        inAnim = true;
        
        // initial move list if we start on page 2 etc...
        var iStartRemove = Math.floor(iActiveLi/10)*10;        
        for(var i = iStartRemove - 1; i >= 0; i--) {
          YAHOO.util.Dom.setStyle(aDomGalleryLis[i].parentNode, 'display', 'none');
        }
        
        // find the next LI
        var oDomNextLi = aDomGalleryLis[iActiveLi];
        
        // grab the image from the next thumbnail
        var oDomNextThumb = oDomNextLi.getElementsByTagName('img')[0];
        
        var funcSlideInImg = function(sSrc) {
          var oDomTmpLi = aDomGalleryLis[iActiveLi+1];
          if(oDomTmpLi) {
              var oDomNextImgThumb = oDomTmpLi.getElementsByTagName('img')[0];
              var imgCache = new Image();
              imgCache.src = oDomNextImgThumb.src.replace('thumbs','');
          }
            
          
          var oDomNextImg = document.getElementById('gallery-img-next');
          if(!oDomNextImg) {
            oDomNextImg = oDomMainImg.cloneNode(false);
            oDomNextImg.id = 'gallery-img-next';
            oDomMainImg.parentNode.appendChild(oDomNextImg);
          }

          YAHOO.util.Dom.setStyle(oDomNextImg, 'position', 'absolute');
          YAHOO.util.Dom.setStyle(oDomNextImg, 'left', '552px');

          oDomNextImg.src = sSrc;

          var oAnimNext = new YAHOO.util.Anim(oDomNextImg.parentNode, { left: {to:-551} });
          
          oAnimNext.onComplete.subscribe(function() {
            oDomNextImg = document.getElementById('gallery-img-next');
            oDomMainImg.parentNode.removeChild(oDomMainImg);
            oDomMainImg = oDomNextImg;
            oDomMainImg.id = 'gallery-img';
            oDomMainImg.focus();
            YAHOO.util.Dom.setStyle(oDomMainImg, 'left', '0px');
            YAHOO.util.Dom.setStyle(oDomMainImg.parentNode, 'left', '0px');
            inAnim = false;
          });
          oAnimNext.animate();
        };
        funcSlideInImg(oDomNextThumb.src.replace('thumbs',''));
        
        oDomMainImg.alt = oDomNextThumb.alt;
        
        var oDomOverlay = oDomCurrLi.getElementsByTagName('div')[0];
        var oDomOverlayClone = oDomOverlay.cloneNode(false);

        // remove and re-add in correct place
        oDomNextLi.appendChild(oDomOverlayClone);
        oDomOverlay.parentNode.removeChild(oDomOverlay);
      };        
      oDomForward.appendChild(oDomForwardImg);
      oDomNavigation.appendChild(oDomForward);      
      oDomMainImgWrapper.appendChild(oDomNavigation);
      YAHOO.util.Event.addListener(oDomForward, 'click', funcGalleryFwd);
      // END: Forward
      
      // back
      var oDomBack = document.createElement('a');
      var oDomBackImg = document.createElement('img');
      oDomBackImg.src = 'assets/carousel/back_on.jpg';
      YAHOO.util.Event.addListener(oDomBackImg, 'mouseover', function(e, o) {
        this.src = 'assets/carousel/back.jpg';
      });
      YAHOO.util.Event.addListener(oDomBackImg, 'mouseout', function(e, o) {
        this.src = 'assets/carousel/back_on.jpg';
      });
      
      var funcGalleryBack = function(e) {
        YAHOO.util.Event.stopEvent(e);        
        // find the next image
        var oDomCurrLi = aDomGalleryLis[iActiveLi];
                
        // make sure we can access this element.
        if(iActiveLi-1 >= iGalleryMenuLength || iActiveLi-1 < 0 || inAnim) {
          return;
        } 
        // go back one place
        iActiveLi--;
        inAnim = true;
        
        // check if we need to move the list
        var iStartShow = Math.floor(iActiveLi/10)*10;
        for(var i = iStartShow; i <= iStartShow + 10; i++) {
          if(aDomGalleryLis[i]) {
            YAHOO.util.Dom.setStyle(aDomGalleryLis[i].parentNode, 'display', 'inline');
          }
        }
        
        // find the next LI
        var oDomNextLi = aDomGalleryLis[iActiveLi];
        
        // grab the image from the next thumbnail
        var oDomNextThumb = oDomNextLi.getElementsByTagName('img')[0];
        
        /*
        oDomMainImg.src = oDomNextThumb.src.replace('thumbs','');*/
        var funcSlideInImg = function(sSrc) {
          var oDomNextImg = document.getElementById('gallery-img-next');
          if(!oDomNextImg) {
            oDomNextImg = oDomMainImg.cloneNode(false);
            oDomNextImg.id = 'gallery-img-next';
            oDomMainImg.parentNode.appendChild(oDomNextImg);
          }

          YAHOO.util.Dom.setStyle(oDomNextImg, 'position', 'absolute');
          YAHOO.util.Dom.setStyle(oDomNextImg, 'left', '-552px');

          oDomNextImg.src = sSrc;

          var oAnimNext = new YAHOO.util.Anim(oDomNextImg.parentNode, { left: {to:551} });
          
          oAnimNext.onComplete.subscribe(function() {
            oDomNextImg = document.getElementById('gallery-img-next');
            oDomMainImg.parentNode.removeChild(oDomMainImg);
            oDomMainImg = oDomNextImg;
            oDomMainImg.id = 'gallery-img';
            oDomMainImg.focus();
            YAHOO.util.Dom.setStyle(oDomMainImg, 'left', '0px');
            YAHOO.util.Dom.setStyle(oDomMainImg.parentNode, 'left', '0px');
            inAnim = false;
          });
          oAnimNext.animate();
        };
        funcSlideInImg(oDomNextThumb.src.replace('thumbs',''));
        
        oDomMainImg.alt = oDomNextThumb.alt;
        var oDomOverlay = oDomCurrLi.getElementsByTagName('div')[0];
        var oDomOverlayClone = oDomOverlay.cloneNode(false);

        // remove and re-add in correct place
        oDomNextLi.appendChild(oDomOverlayClone);
        oDomOverlay.parentNode.removeChild(oDomOverlay);
      };        
      oDomBack.appendChild(oDomBackImg);
      oDomNavigation.insertBefore(oDomBack, oDomForward);
      YAHOO.util.Event.addListener(oDomBack, 'click', funcGalleryBack);
      
      // add in play button
      oDomNavigation.insertBefore(oDomPlay, oDomForward);
      YAHOO.util.Event.addListener(oDomPlay, 'click', funcGalleryPlay);
      
      window.setTimeout(function() { funcGalleryPlay(true); }, 4000);
    } // end init func
  }; 
})();

YAHOO.util.Event.onDOMReady(YAHOO.LBC.Menu.init);