jQuery(document).ready(function() {
  BagBrowser.init();
  Heros.init();
});

var BagBrowser = {
  totalWidth: 0,
  observeEl: '#bag_browser .slider',
  padding: 15,
  tipTimeout: null,
  init: function() {
    jQuery('#bag_browser').mouseenter(function(evt) {
      jQuery('.tooltip').show();
      jQuery('#tooltip_overlay').show();
    });
    jQuery('#bag_browser').mouseleave(function(evt) {
      jQuery('#tooltip_overlay').hide();
      jQuery('.tooltip').hide();
    });
    jQuery('#bag_browser .slider li').each(function(){
      //get total width
      BagBrowser.totalWidth = BagBrowser.totalWidth + jQuery(this).outerWidth(true); 
    });

    jQuery('#bag_browser .slider').width(BagBrowser.totalWidth);
    
    jQuery(window).resize(BagBrowser.onResize);
    BagBrowser.setupSize();
    
    jQuery("#bag_browser .slider li").mouseenter(function() {
      var self = jQuery(this);
      
      var tip = jQuery('#bag_browser .tooltip');
      tip.queue([]).stop();
      
      tip.find('.image img').attr('src', '/' + self.attr('image_filename'));
      
      var title = tip.find('.name');
      title.text(self.attr('bag_name').toUpperCase());
      var bagUrl = self.attr('bag_url');
      title.attr('href', bagUrl);
      
      tip.find('.type').text(self.attr('bag_type'));
      
      tip.find('.features').html(self.attr('bag_features'));
      
      var moreBags = tip.find('a.more_bags');
      var bagStyle = self.attr('bag_style');
      moreBags.text('see more ' + bagStyle + ' bags');
      //moreBags.attr('href', 'http://google.com').css({'z-index': '5000'});
      moreBags.attr('href', '/sublist.asp?MidCode=' + bagStyle).css({'position': 'relative'});
      tip.find('.reviews').attr('href', bagUrl);
      
      tip.find('.buy_now').attr('href', bagUrl);
      
      tip.animate({ opacity: 1, left: (self.position().left + self.parent('ul').position().left) - 150}, "fast", "linear");
    });

    jQuery('.tooltip').mouseleave(function() {
      jQuery('.tooltip:visible').animate({opacity: 0}, 200);
    });

    jQuery(BagBrowser.observeEl).mouseover(BagBrowser.observeMove);
  },
  onResize: function() {
    BagBrowser.setupSize();
  },
  setupSize: function() {
    BagBrowser.slide(jQuery('#bag_browser .mask').outerWidth() / 2);
  },
  observeMove: function() {
    jQuery(BagBrowser.observeEl).mousemove(BagBrowser.onMove);
  },
  stopObservingMove: function() {
    jQuery(BagBrowser.observeEl).unbind('mousemove', BagBrowser.onMove);
  },
  onMove: function(e) {
    BagBrowser.slide(e.pageX);
  },
  slide: function(position) {
    var bag_browser = jQuery('#bag_browser');
    if(!bag_browser.length) {
      return;
    }
    var slider = bag_browser.find('.slider');
    var viewportWidth = bag_browser.find('.mask').outerWidth() - 20;
    var perc = position / viewportWidth;
    var newPos = (0 - (BagBrowser.totalWidth - viewportWidth) * perc);
    var maximumDuration = 2000;
    var duration = Math.abs( (newPos - slider.position().left) ) / BagBrowser.totalWidth * maximumDuration;
    if( duration > maximumDuration ) { duration = maximumDuration; }
    slider.stop().animate({ left: newPos }, duration);
  }
};

var Heros = {
  els: null,
  imgsLoaded: 0,
  activeIndex: 0,
  animating: false,
  fadeSpeed: 450,
  slideSpeed: 6000,
  slideTimeout: null,
  init: function() {
    Heros.els = jQuery('#hero_wrapper .hero');
    var index = 0;
    Heros.els.each(function() {
      //preload images and setup onload handler to start slideshow after all have loaded
      var imgPath = jQuery(this).css('background-image');
      if(imgPath != null) {
        imgPath = imgPath.substring(4,(imgPath.length - 1));
        var img = new Image();
        img.onload = Heros.onImgLoad;
        img.src = imgPath;
      }
      //hide all all but first
      if(index == 0) {
        jQuery(this).css('display','block');
      } else {
        jQuery(this).css('display','none');
      }
      
      //create nav
      jQuery('#hero_wrapper #slide_nav .inner').append('<a onclick="Heros.onNavClick('+index+'); return false;" href="#">'+(index+1)+'</a>');
      index++;
    });
    jQuery(jQuery('#hero_wrapper #slide_nav .inner a').get(0)).addClass('active');
  },
  onImgLoad: function() {
    Heros.imgsLoaded++;
    if(Heros.imgsLoaded == Heros.els.length) {
      Heros.startAutochange();
    }
  },
  onNavClick: function(index) {
    if(!Heros.animating) {
      Heros.stopAutochange();
      Heros.show(index);
    }
  },
  onSlideChange: function() {
    if(!Heros.animating) {
      var index = 0;
      if(Heros.activeIndex + 1 < Heros.els.length) {
        index = Heros.activeIndex + 1;
      }
      Heros.show(index);
    }
    //reset timer
    Heros.slideTimeout = setTimeout(Heros.onSlideChange, (Heros.slideSpeed + Heros.fadeSpeed * 2));
  },
  show: function(index) {
    if(index != Heros.activeIndex) {
      Heros.animating = true;
      jQuery(Heros.els.get(Heros.activeIndex)).fadeOut(Heros.fadeSpeed, Heros.showSecondStep);
      jQuery(jQuery('#hero_wrapper #slide_nav .inner a').get(Heros.activeIndex)).removeClass('active');
      
      Heros.activeIndex = index;
      jQuery(jQuery('#hero_wrapper #slide_nav .inner a').get(Heros.activeIndex)).addClass('active');
    }
  },
  showSecondStep: function() {
    jQuery(Heros.els.get(Heros.activeIndex)).fadeIn(Heros.fadeSpeed, Heros.onShowFinish);
  },
  onShowFinish: function() {
    //redraw sifr
    // sIFR.replace(helvetica, heroContentParams);
    
    Heros.animating = false;
  },
  startAutochange: function() {
    //go go slideshow!
    Heros.slideTimeout = setTimeout(Heros.onSlideChange, Heros.slideSpeed);
  },
  stopAutochange: function() {
    if(Heros.slideTimeout != null) {
      clearTimeout(Heros.slideTimeout);
    }
  }
};