window.addEvent('domready',function(){
  function shiftnav(n) {
    if ( n < 0 ) currentnav = thumbs.length-1;
    else if ( n > thumbs.length-1 ) currentnav = 0;
    else currentnav = n;
    shiftImage(thumbs[currentnav]);
    $('FullScreenMode').SetVariable('startIndex',currentnav);
  }
  if ( $('thumbsprev') ) {
    $('thumbsprev').addEvent('click',function(){
      shiftnav(--currentnav);
      return false;
    })
    $('thumbsnext').addEvent('click',function(){
      shiftnav(++currentnav);
      return false;
    })
  }


  function shiftImage(el) {
    var fadeout = new Fx.Tween(container,{link: 'cancel'});
    var fadein = new Fx.Morph(container,{link: 'cancel'});
    var preload = new Element('image',{'src': el.get('href') });
    fadeout.start('opacity',0).chain(function(){
      var imgvars = el.get('rel').split(',');
      var sharinghtml = '<!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style" addthis:url=' + imgvars[2] + '><a class="addthis_button_twitter"></a><a class="addthis_button_email"></a><a class="addthis_button_facebook"></a></div><!-- AddThis Button END -->';
      $('sharing').set('html',sharinghtml);
      if (window.addthis) {
              window.addthis.ost = 0;
              window.addthis.ready();
          }
      fadein.start({
        'opacity': 1
        ,'background-image': "url('" + el.get('href') + "')"
        ,'height': imgvars[1] + 'px'
      })
    })
  }

  var container = $('mainImage');
  if ( container ) {
    var thumbs = $$('#thumbsviewport a');
    thumbs.each(function(el,n){
      el.addEvent('click',function(){
        //shiftImage(el);
        shiftnav(n);
        return false;
      })
    })
    shiftImage(thumbs[currentnav]);
    if ( $('home') ) {
      setInterval(function(){
        shiftnav(++currentnav);
      },3000)
    }
  }

  /* Calculator */
  if ( $('calculator') ) {
    function calculate() {
      var cost = $('base_cost').value;
      var quantity = $('quantity').value;
      var entertotal = $('total');
      var width = $('width').options[$('width').selectedIndex].value;
      var length = $('length').options[$('length').selectedIndex].value;
      var unit = ( width * length ) * cost;
      var total = unit * quantity;
      entertotal.set('html','$' + total.toFixed(2));
    }
    $('quantity').addEvent('keyup',function(){
      calculate();
    })
    $$('#width, #length').addEvent('change',function(){
      calculate();
    })
    calculate();
  }

  // Before/after
  var ba = $$('.beforeafter');
  if ( ba.length > 0 ) {
    ba.each(function(el) {
      var before = el.getElement('.before');
      var after = el.getElement('.after');
      var size = before.getSize();
      el.setStyles({
        'position': 'relative'
        ,'width': size.x
        ,'height': size.y
      })
      before.setStyles({'position':'absolute','left':'0','top':'0'});
      after.setStyles({'position':'absolute','left':'0','top':'0'});
      after.set('opacity',0);
      var fader = new Fx.Tween(after,{'link': 'cancel'});
      before.addEvent('mouseenter',function(){
        fader.start('opacity',1);
      })
      after.addEvents({
        'mouseenter': function(){
          fader.start('opacity',1);
        }
        ,'mouseleave': function(){
          fader.start('opacity',0);
        }
      })

    })
  }

})