(function($) {
  $(function() {
    $('.hero[data-href!=""]').live('click', function() {
      location.href = $(this).attr('data-href');
    }).livequery(function() {
      $(this).css('cursor', 'pointer');
    });
    
    BagBrowser.init();
    Heros.init();
  });
}(jQuery));

var BagBrowser = {
  totalWidth: 0,
  observeEl: '#bag_browser .slider',
  padding: 15,
  tipTimeout: null,
  init: function() {
    var browser = jQuery('#bag_browser');
    var tip = browser.find('.tooltip');

    browser.mouseenter(function() {
      jQuery('.tooltip, #tooltip_overlay').show();
    }).mouseleave(function() {
      jQuery('.tooltip, #tooltip_overlay').hide();
    });

    browser.find('.slider li').each(function(){
        //get total width
        BagBrowser.totalWidth = BagBrowser.totalWidth + jQuery(this).outerWidth(true);
      }).mouseenter(function() {
        var self = jQuery(this);

        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("Type: " + 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', 'http://shop.ful.com/productdisplay.cfm?line=' + 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");
      });

    browser.find('.slider').width(BagBrowser.totalWidth);
    
    jQuery(window).resize(BagBrowser.onResize);
    BagBrowser.setupSize();
    
    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) {
    var browser = jQuery('#bag_browser');

    var slider = browser.find('.slider');
    var mask = browser.find('.mask');

    if(slider.width() > mask.width()) {
      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: 4500,
  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++;
    });
    Heros.startAutochange();
    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);
    }
  }
};