// Handler for stacked product modules
jQuery(document).ready(function() {

    jQuery('.headerBox').click(function() {
        jQuery(this).siblings('.headerBox').next('.rd_podlet').children('ul').slideUp(300);
        jQuery(this).next('.rd_podlet').show().children('ul').slideToggle(300);
        jQuery(this).children('span').toggleClass('arrowDown').toggleClass('arrowUp');
    });
    
    jQuery('.link').click(function() {
        jQuery(this).parents('li').siblings('li').children('.link').next('ul').slideUp(300);
        jQuery(this).next('ul').slideToggle(300);
    });
    
    // Open first module on page load
    jQuery('h3.headerBox:first').next('.rd_podlet').show().children('ul').slideDown(300);
    jQuery('h3.headerBox:first span').removeClass('arrowDown').addClass('arrowUp');
});


// Home page feature slider
// TODO move to slider.js
slider = function() {

  var props = {
    id        : 'slider',
    wrap      : 1,
    container : 'ul',
    elements  : 'li',
    next      : '#nextBtn',
    prev      : '#prevBtn',
    auto      : 1,
    auto_time : 15000 
  };
  var class_prev = 'left';
  var class_next = 'right';
  var use_transition = isCssTransitionSupported();


function initSlider(options) {

  if (options)
    Object.extend(props, options);

  // set container width to # of li x li.width
  var container = $(props.id).select(props.container)[0];

  if (!container)
    return;

  var els = container.select(props.elements);

  if (els.size() === 0)
    return;

  container.setStyle({width: els[0].getWidth() * els.size() +'px'});
  for (var i=0; i < els.size(); ++i) {
    els[i].setStyle({cssFloat: 'left'});
  }
  els[0].addClassName('current');
  $$(props.prev)[0].observe('click', slidePrev);
  $$(props.next)[0].observe('click', slideNext);

  if (props.auto)
    setTimeout(slideAuto, 3000);
}

function slideAuto() {
  if (props.auto != 1)
    return;

  slideNext();
  setTimeout(slideAuto, props.auto_time);
}

function slideNext() {
  var els = $(props.id).select(props.elements);

  for (var i=0; i < els.size(); ++i) {
    if (els[i].hasClassName('current')) {
      if (i == (els.size() - 1)) {
        if (!props.wrap)
          return;
        for (var j=0; j < (els.size() - 1); ++j)
          slidePrev();
      }
      else {
        els[i].removeClassName('current');
        els[i + 1].addClassName('current');

        if (use_transition) {
          els[i].addClassName(class_prev).removeClassName('center');
          els[i + 1].removeClassName(class_next).addClassName('center');
        }
        else {
          var margin_left = -els[i].getWidth();
          new Effect.Morph($(els[i]), { 
              style     : {marginLeft: margin_left + 'px'},
              duration  : 0.8 
          });
          new Effect.Morph($(els[i+1]), { 
              style     : {marginLeft:'0px'},
              duration  : 0.8 
          });
        }
      }
      break;
    }
  }
}

function slidePrev() {
  var els = $(props.id).select(props.elements);

  for (var i=0; i < els.size(); ++i) {
    if (els[i].hasClassName('current')) {
      if (i === 0) {
        if (!props.wrap)
          return;
        for (var j=0; j < (els.size() - 1); ++j)
          slideNext();
      }
      else {
        els[i].removeClassName('current');
        els[i - 1].addClassName('current');

        if (use_transition) {
          els[i].addClassName(class_next).removeClassName('center');
          els[i - 1].removeClassName(class_prev).addClassName('center');
        }
        else {
          var margin_left = els[i].getWidth();
          new Effect.Morph($(els[i]), { 
              style     : {marginLeft: margin_left + 'px'},
              duration  : 0.8 
          });
          new Effect.Morph($(els[i-1]), { 
              style     : {marginLeft:'0px'},
              duration  : 0.8 
          });
        }
      }
      break;
    }
  }
}

  return {
    init: initSlider
  }
}();

scrollable = function() {

  var props = {
    id        : 'scrollable',
    container : '.items',
    next      : '#actions > .next',
    prev      : '#actions > .prev'
  };
  var use_transition = isCssTransitionSupported();


function initScrollable(options) {

  if (options)
    Object.extend(props, options);

  var container = $(props.id).select(props.container)[0];

  if (!container)
    return;

  $$(props.prev)[0].observe('click', slidePrev);
  $$(props.next)[0].observe('click', slideNext);
}

function slideNext() {
  var container = $(props.id).select(props.container)[0];

  if (use_transition) {
    container.setStyle({top: '-468px'});
  }
  else {
    new Effect.Morph($(container), { 
      style     : {top: '-468px'},
      duration  : 0.8 
    });
  }
} 
function slidePrev() {
  var container = $(props.id).select(props.container)[0];
  if (use_transition) {
    container.setStyle({top: '0px'});
  }
  else {
    new Effect.Morph($(container), { 
      style     : {top: '0px'},
      duration  : 0.8 
    });
  }
}

  return {
    init: initScrollable
  }
}();

slideMenu = function() {

  function initMenu() {
    var els = $$('.slidemenu')[0].select('li');
    for (var i=0; i < els.size(); ++i) {
      var hide_els = $(els[i]).select('ul');
      if (hide_els.size())
        hide_els[0].style.display = 'none';

      $(els[i]).observe('mouseover', slideDown);
      $(els[i]).observe('mouseout', startSlideUp);
    }
  }

  function slideDown(event) {
    var li = event.element();

    if (li.tagName === 'A')
      li = li.ancestors()[0];

    var child_els = li.childElements();
    var ul = child_els.detect(function(el) { return el.tagName === 'UL'; });
    if (ul)
      Effect.BlindDown($(ul), {duration : 0.5});
  }

  function startSlideUp(event) {
    var li = event.element();
    setTimeout(function() { slideUp(li); }, 1000);
  }

  function slideUp(li) {

    if (li.tagName === 'A')
      li = li.ancestors()[0];

    var child_els = li.childElements();
    var ul = child_els.detect(function(el) { return el.tagName === 'UL'; });
    if (ul) 
      Effect.BlindUp($(ul), {duration : 0.5});
  }

  return {
    init: initMenu
  }
}();


function isCssTransitionSupported() {

  var cssTransitionsSupported = false;
  (function() {
    var div = document.createElement('div');
    div.setAttribute('style', 'transition:top 1s ease;-webkit-transition:top 1s ease;-moz-transition:top 1s ease;');
    cssTransitionsSupported = !!(div.style.transition || div.style.webkitTransition || div.style.MozTransition);
    delete div;
  })();
  return cssTransitionsSupported;
}