Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6

var ie_fix_img = function(el) {
  if(Prototype.Browser.IE6) {
    el.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + el.src + "', sizingMethod='scale')"
    el.src = el.src.gsub(/\d+\.png$/, '0.png')
    el.style.width = el.getWidth() + 'px'
    el.style.height = el.getHeight() + 'px'
  }
}

Event.observe(window, 'load', function() {
  setup_lightbox()
	//setup_slides()
	setup_product_viewer()
	
	console.log($('partsForm'))
	
  $('partsForm').observe('submit', function(event) {
    var submittable = true
    
    console.log("Test")
    console.log(this)
    console.log(event.element())
    
    event.element().down('[required=required]').each(function(el) {
      if(el.getValue() == "") {
        el.addClassName('error')
        submittable = false
      } else {
        el.removeClassName('error')
      }
    })
    
    if(!submittable) event.preventDefault()
  })
	
	$$('a[href$=mp4]').each(function(el) {
	  el.observe('click', function(event) {
	    Event.stop(event)
	    open_video_lightbox(event.element().readAttribute('href'), 640, 480)
	  })
	})
	
	$$('a.lightbox').each(function(el) {
	  el.observe('click', function(event) {
            Event.stop(event);
            var event_el = event.element().tagName.toLowerCase() == 'img' ? event.element().parentNode : event.element()
            open_lightbox(event_el.readAttribute('href'))
          })
	})
	
	$$('img.lightbox').each(function(el) {
	  el.observe('click', function(event) { Event.stop(event); open_lightbox(event.element().readAttribute('data-high-res')) })
	})
	
	$$('.chooser li a').each(function(el) {
	  el.stopObserving('click')
	  el.observe('click', function(event) {
	    Event.stop(event)
	    el.up('.chooser').select('li').each(function(el) { el.removeClassName('current') })
	    el.up('li').addClassName('current')
      var target = $$(el.up('.chooser').readAttribute('data-target')).first()
      if(target) {
        target.href = el.href
        var target_img = target.down('img')
        target_img.src = '/resize/' + el.href.replace(/https?\:\/\/(.*?)\//i, '') + '/o' + target_img.getWidth() + 'x' + target_img.getHeight()
      }
	  })
	})
})

/* 
==========================
  SLIDES
==========================
*/
var setup_slides = function() {
  $$('.slider').each(function(el) { setup_slider(el) })
}

var setup_slider = function(slider) {
  slider.writeAttribute('rel', 1)
  
  // setup the slides
  var slide_id = 1
  slider.down('.set').childElements().each(function(el) {
    el.writeAttribute('rel', slide_id++)
  })
  
  // setup the controls
  slider.down('.controls').childElements().each(function(el) {
    el.down('a').observe('click', function(event) {
      // slide to the particular slide
      var slide_id = event.element().readAttribute('href').gsub(/.*?#(.*)/i, '#{1}')
      // load the set
      var slide_set = event.element().up('.slider').down('.slides .set')
      // load the slide
      slide = slide_set.down('#' + slide_id)
      // if found, slide to it
      if(slide) slide_to(slide)
      // stop the current action
      Event.stop(event)
    })
  })
  
  // next control
  slider.down('.next').observe('click', function(event) {
    // load the slider
    var slider = event.element().up('.slider')
    // load it's current slide
    var current_slide = parseInt(slider.readAttribute('rel'))
    // try to load the next slide
    var next_slide = slider.down('.slides .set *[rel=' + (current_slide + 1) + ']')
    // if the slide couldn't be found, resort to the first slide
    if(!next_slide) next_slide = slider.down('.slides .set > *[rel=1]')
    // slide to it
    slide_to(next_slide)
    // stop the current action
    Event.stop(event)
  })
  
  // previous control
  slider.down('.previous').observe('click', function(event) {
    // load the slider
    var slider = event.element().up('.slider')
    // load it's current slide
    var current_slide = parseInt(slider.readAttribute('rel'))
    // try to load the next slide
    var previous_slide = slider.down('.slides .set *[rel=' + (current_slide - 1) + ']')
    // if the slide couldn't be found, resort to the first slide
    if(!previous_slide) previous_slide = slider.down('.slides .set > div:last-child')
    // slide to it
    slide_to(previous_slide)
    // stop the current action
    Event.stop(event)
  })
}

var slide_to = function(slide) {
  // load the slide id
  var slide_id = slide.readAttribute('rel')
  // load the slider
  var slider = slide.up('.slider')
  // set the current slide
  slider.writeAttribute('rel', slide_id)
  // move the set
  new Effect.Move(slider.down('.set'), {
     x: 0 - ((parseInt(slide_id) - 1) * 940),
     mode: 'absolute'
  })
  // set all controls to the right status
  var regex = new RegExp('#' + slide.readAttribute('id') + '$')
  slider.down('.controls').childElements().each(function(el) {
    if(el.down('a').readAttribute('href').match(regex)) {
      el.addClassName('current')
    } else {
      el.removeClassName('current')
    }
  })
}


/* 
==========================
  PRODUCT VIEWER
==========================
*/
var setup_product_viewer = function() {
  $$('#content .aside .product img').each(function(el) { ie_fix_img(el) })
  
  $$('#content .aside .product .quickview a').each(function(el) {
    el.observe('click', function(event) {
      Event.stop(event)
      open_lightbox(event.element().readAttribute('rel'))
    })
  })
  $$('#content .aside .product .controls li a').each(function(el) {
    el.observe('click', function(event) {
      Event.stop(event)

      el = event.element()
      
      el.up('.controls').siblings().concat([el.up('.controls')]).each(function(controls) {
        controls.childElements().each(function(el) { el.removeClassName('current') })
      })
      
      el.up('li').addClassName('current')
      
      el.up('.product').down('.content ul').innerHTML = el.readAttribute('title') ? '<li>' + el.readAttribute('title').split('|').join('</li><li>') + '</li>' : ''
      el.up('.product').down('.content img').src = el.up('.product').down('.content img').src.gsub(/\d+\.png$/, el.innerHTML + '.png')
      ie_fix_img(el.up('.product').down('.content img'))
      
      var quickview = el.up('.product').down('.quickview a')
      quickview.rel = quickview.rel.gsub(/(.*)\/.*?\-(.*?)\.jpg$/, '#{1}/' + el.innerHTML + '-\#{2}.jpg')
      quickview.href = quickview.href.gsub(/(.*)\/.*?$/, '#{1}/' + el.innerHTML)
      
      if(el.up('.controls').hasClassName('lower')) {
        el.up('.product').morph('margin-top:55px; margin-bottom:62px')
        if(el.up('.product').down('.controls.lower')) el.up('.product').down('.controls.lower').morph('bottom:80px')
      } else {
        el.up('.product').morph('margin-top:0; margin-bottom:110px')
        if(el.up('.product').down('.controls.lower')) el.up('.product').down('.controls.lower').morph('bottom:-100px')
      }
    })
  })
}

/* 
==========================
  LIGHTBOX
==========================
*/
var setup_lightbox = function() {
  // BACKDROP
  // setup our backdrop
  var backdrop = document.createElement('div')
  backdrop.id = 'lightbox_backdrop'
  // insert it
  $$('body')[0].insert({ bottom: backdrop })
  // find it again
  backdrop = $('lightbox_backdrop')
  // hide it
  backdrop.hide()
  // watch for clicks
  backdrop.observe('click', function(event) {
    $('lightbox').fire('element:close')
    $('lightbox_video').fire('element:close')
    Event.stop(event)
  })
  
  // IMAGES
  // setup our image box
  var box = document.createElement('div')
  box.id = 'lightbox'
  // setup our closer
  box.innerHTML = '<a onclick="javascript:this.parentNode.fire(\'element:close\')" class="close">Close</a>'
  // insert the box
  $$('body')[0].insert({ bottom: box })
  // find it again
  box = $('lightbox')
  // hide it
  box.hide()
  // watch for closing
  box.observe('element:close', function(event) {
    event.element().hide()
    event.element().down('img').src = ''
    $('lightbox_backdrop').hide()
    Event.stop(event)
  })
  
  // setup the image with preloading
  var img = document.createElement('img')
  // put the img in the box
  $('lightbox').insert({ top: img })
  // find it again
  img = $('lightbox').down('img')
  // watch for loading
  img.observe('load', function(event) {
    $('lightbox').setStyle({ opacity: 0 })
    $('lightbox').show()
    $('lightbox').fade({ duration: 0.5, from: 0, to: 1 })
    $('lightbox').setStyle({
      marginTop: (0 - event.element().getHeight() / 2) - 20 + 'px',
      marginLeft: (0 - event.element().getWidth() / 2) - 20 + 'px'
    })
  })

  img.observe('click', function(event) {
    $('lightbox').fire('element:close')
  })
  
  // VIDEOS
  // setup our video box
  var box = document.createElement('div')
  box.id = 'lightbox_video'
  // setup our closer
  box.innerHTML = '<a onclick="javascript:this.parentNode.fire(\'element:close\')" class="close">Close</a>'
  // insert the box
  $$('body')[0].insert({ bottom: box })
  // find it again
  box = $('lightbox_video')
  // hide it
  box.hide()
  // watch for closing
  box.observe('element:close', function(event) {
    event.element().hide()
    var video = event.element().down('video')
    if(video) {
      video.src = ''
      video.remove()
    }
    event.element().innerHTML = ''
    $('lightbox_backdrop').hide()
    Event.stop(event)
  })
}

var open_lightbox = function(url) {
  $('lightbox_backdrop').show()
  $('lightbox').down('img').src = url
}

var open_video_lightbox = function(url, width, height) {
  $('lightbox_backdrop').show()
  
  // browser supports HTML5 video
  if(supports_video()) {
    var video = document.createElement('video')
    video.setStyle({
      width: width + 'px',
      height: height + 'px'
    })
    video.writeAttribute('controls', true)
    video.writeAttribute('autoplay', true)
    $('lightbox_video').insert({ bottom: video })

    // insert our sources
    var mp4_source = document.createElement('source')
    mp4_source.src = url
    mp4_source.writeAttribute('type', 'video/mp4')
    var ogv_source = document.createElement('source')
    ogv_source.src = url.replace(/mp4$/i, 'ogv')
    ogv_source.writeAttribute('type', 'video/ogg')

    video.insert({ bottom: mp4_source })
    video.insert({ bottom: ogv_source })
  // browser doesn't support <video> tags
  } else {
    // flash fallback
    url = 'http://' + document.domain + url.replace(/mp4$/i, 'flv')
    $('lightbox_video').insert({ bottom: '<object type="application/x-shockwave-flash" data="http://' + document.domain + '/mediaplayer.swf?autostart=true&file=' + url + '" width="' + width + '" height="' + height + '"><param name="movie" value="http://' + document.domain + '/mediaplayer.swf?autostart=true&file=' + url + '" /><param name="file" value="' + url + '" /><param name="autostart" value="true" /></object>' })
  }
  
  $('lightbox_video').setStyle({
    width: width,
    height: height,
    marginTop: (0 - height / 2) - 20 + 'px',
    marginLeft: (0 - width / 2) - 20 + 'px'
  })
  
  $('lightbox_video').show()
  
}

var supports_video = function() {
  return !!document.createElement('video').canPlayType;
}