document.observe('dom:loaded', init);

function init() {
  if ($('flash')) $('flash').observe('click', function(e){
    $('flash').fade();
  });
  if ($('browseContainer')) {
    var myToolTip = new JSONToolTip(product_rollovers, $('browseContainer'));
    $('browseContainer').observe('mouseover', displayToolTip.curry(myToolTip)).observe('mouseout', hideToolTip.curry(myToolTip));
  }  
  
  if ($('horizontal_carousel')) {
    var myToolTip = new JSONToolTip(product_rollovers, $('horizontal_carousel'));
    var carousel = new UI.Carousel('horizontal_carousel');
    $('horizontal_carousel').observe('mouseover', displayToolTip.curry(myToolTip)).observe('mouseout', hideToolTip.curry(myToolTip));
    
    new CarouselFilter(product_rollovers);
    document.observe('CarouselFilter:filtered', function(e){
      carousel.scrollTo(0);
    });
    
    $$('.container ul')[0].observe('click', preserve_state);
    
    $('product_alt_views').observe('click', image_swap);
    
    // insert other product images after page is loaded
    if ($('productDetailImage')) {
      document.observe('window:loaded', function(){
        var imageTemplate = new Template('<img src="#{src}" alt="#{alt}" style="display: none;" />');
        var otherImages = $$('a.smallThumbLink img').collect(function(img, i){
          if (i > 0) {
            return imageTemplate.evaluate({ src: img.readAttribute('src').gsub('_small', '_normal'), alt: 'Photo: ' + i });
          }
        }).join('');
        $('productDetailImage').insert(otherImages);
        // delete the images after a while
        (function(){
          $$('#productDetailImage img').without($$('#productDetailImage img').first()).invoke('remove');
        }).delay(5);
      });
    }
  }
  
  if (document.location.pathname != '/') $('coco').hide();
  
  var so = $('special-orders');
  
  if (so) {
    so.observe('mouseover', function(e) {
      $('special-orders-text').show();
    }).observe('mouseout', function(e) {
      $('special-orders-text').hide();
    });
  }
}

function displayToolTip(myToolTip, event){
  var target = $(event.target);
  if (!(target.hasClassName('tooltip') || target.match('img'))) return;
  target = target.match('a') ? target : target.up('a');
  myToolTip.render(target);
}

function hideToolTip(myToolTip, event) {
  var target = $(event.target)
  if (!(target.hasClassName('tooltip') || target.match('img'))) return;
  target = target.match('a') ? target : target.up('a');
  var relatedTarget = event.relatedTarget;
  if (relatedTarget.match('img')) {
    if (relatedTarget == target.down('img')) return;
    else if (relatedTarget.up('a').hasClassName('tooltip')) return;
  }
  if (relatedTarget.match('li')) return;
  if (event.relatedTarget.hasClassName('tooltip') || event.relatedTarget.hasClassName('hit-area')) return;
  // console.group('mouseover fired');
  // console.log('Target:', event.target);
  // console.log('Related Target:', event.relatedTarget);
  // console.groupEnd();
  myToolTip.hide();
}

function image_swap(e) {
  e.stop();
  var target = $(e.target);
  if (target.match('ul')) return;
  target = target.match('img') ? target : target.down('img');
  target.up('a').blur();
  var thumbpath = target.src.split('/').pop();
  var extension = thumbpath.split('.').pop().split('?')[0];
  thumbpath = thumbpath.split('.')[0];
  var normal_path = thumbpath.gsub('_small', '_normal') + '.' + extension;
  // console.log(normal_path);
  var productDetailImage = $('productDetailImage').down('img');
  productDetailImage
    .stopObserving('load')
    .morph('opacity: 0', {
      duration: .25,
      afterFinish: function(){
        productDetailImage.src = '/system/' + normal_path;
      }
    })
    .observe('load', function(){
      productDetailImage.morph('opacity: 1');
    });
}

function preserve_state(e) {
  var target = $(e.target);
  if (!target.match('a') && !target.match('img')) return;
  target = target.match('a') ? target : target.up('a');
  var state = String(window.location).include('#') ? String(window.location).split('#').pop() : null;
  if (!state || state.strip() == '') return;
  e.stop();
  window.location = target.readAttribute('href') + '#' + state;
}

Event.observe(window, 'load', function(){
  document.fire('window:loaded');
});