/* Site */

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}




function when(obj, fn) {
  if (Object.isString(obj)) obj = /^[\w-]+$/.test(obj) ? $(obj) : $(document.body).down(obj)
  if (Object.isArray(obj) && !obj.length) return
  if (obj) fn(obj)
}

var App = window.App||{};

App.Zoomer = Class.create({
  initialize : function(element, src){
    $('back').hide();
    this.loading = false;
    this.animating = false;
    this.src = '';
    this.element = $(element);
    this.image = $('zoomer') || new Element('img', {className: 'zoomer', src: src});
    this.element.insert({top:this.image});

    this.dimensions = this.element.getDimensions();

    this.zoomed = $('zoomed') || new Element('img', {className: 'zoomed'}).hide();
    this.image.insert({after: this.zoomed});

    this.list = this.element.down('ul.hotspots');
    if(!this.list){
      this.list = new Element('ul', {className: 'hotspots'});
      this.element.insert({bottom: this.list});
    }


    this.onclick_listener = this.onclick.bindAsEventListener(this);
    this.element.observe('click', this.onclick_listener);
    this.onback_listener = this.onback.bindAsEventListener(this);
    $('back').observe('click', this.onback_listener);
  },
  onclick : function(e){
    if(e) e.stop();
    var element = e.findElement('a');
    if(element){
      element.fire('zoomer:click');
    }
  },
  zoom_in : function(e, options, image){
    if(!this.animating && !this.loading){
      this.animating = true;
      this.loading = true;
      var img = new Image();
      img.onload = function(){
        this.zoomed.src = image;
        this.loading = false;
        $('back').show();
      }.bind(this);
      this.src = image;
      img.src = image;
      this.element.addClassName('zoomed');
      var effect = new Effect.Morph(this.image, {
        style : options,
        afterFinish : function(){
          this.animating = false;
          this.zoomed.show();
        }.bind(this)
      });
    }
  },
  onback : function(e){
    if(e) e.stop();
    this.zoom_out();
  },
  zoom_out : function(){
    if(!this.animating){
      this.animating = true;
      this.zoomed.hide();
      this.zoomed.src = '';
      var effect = new Effect.Morph(this.image, {
        style : {
          top: '0px',
          left: '0px',
          height: this.dimensions.height+'px',
          width: this.dimensions.width+'px'
        },
        afterFinish : function(){
          $('back').hide();
          this.element.removeClassName('zoomed');
          this.animating = false;
        }.bind(this)
      });
    }
  },
  add_hotspot : function(id, image, options){


    var element = $(id);
    if(!element){
      var element = new Element('a', {href: '?'+id}).setStyle({
        top: options.top,
        left: options.left
      }).update(options.title);
      this.list.insert(new Element('li').update(element));
    }

    var position = element.positionedOffset();
    var dimensions = element.getDimensions();

    element.update('<img src="/img/site/magic.png" width="'+dimensions.width+'" height="'+dimensions.height+'" />');


    var img = new Image();
    img.src = image;



    var w_factor = this.dimensions.width/dimensions.width;
    var h_factor = this.dimensions.height/dimensions.height;
    var width = parseInt(this.dimensions.width*w_factor);
    var height = parseInt(this.dimensions.height*h_factor);
    var left = parseInt(position.left*w_factor);
    var top = parseInt(position.top*h_factor);

    element.observe('zoomer:click', this.zoom_in.bindAsEventListener(this, {
      top: -top+'px',
      left: -left+'px',
      width: width+'px',
      height: height+'px'
    }, image));

  }
});

App.Animation = function(){
  var layer1, layer2, link, mask, steps;

  function animate(step){
    var element = $(steps[step].element);
    var image = new Image();
    image.onload = function(){
      element.show();

      if(link && steps[step].link){
        link.href = steps[step].link;
      }

      new Effect.Move(element, Object.extend({
        mode: 'absolute',
        afterFinish : function(){
         if(steps[step+1]){
           animate(step+1);
         }
        }
      }, steps[step]));
    }
    image.src = element.readAttribute('_src');
  }

  function preload(url){
    var img = new Image();
    img.src = url;
  }

  return {
    homepage : function(){

      steps = [
        //{element: 'layer1', x: 387, y: 0, duration: 1.5},
        {element: 'layer2', x: 0, y: 0, duration: 1.5, link: '/kitchens'},
        {element: 'layer3', x: 387, y: 0, duration: 1.5},
        {element: 'layer4', x: 0, y: 0, duration: 1.5, link: '/style'},
        {element: 'layer5', x: 387, y: 0, duration: 1.5},
        {element: 'layer6', x: 0, y: 0, duration: 1.5, link : '/quality'},
        {element: 'layer7', x: 387, y: 0, duration: 1.5},
        {element: 'layer8', x: 0, y: 0, duration: 1.5, link: '/kitchens'},
        {element: 'layer9', x: 387, y: 0, duration: 1.5},
        {element: 'layer10', x: 0, y: 0, duration: 1.5},
        {element: 'layer11', x: 387, y: 0, duration: 1.5, link: '/bathrooms'},
        {element: 'layer12', x: 0, y: 0, duration: 1.5}
      ];

      mask = $('mask');
      link = new Element('a', {href:'#'}).update('<img src="/img/site/magic.png" width="450" height="80" />').setStyle({
        position: 'absolute',
        right: 0,
        bottom: 0,
        zIndex: 120
      });
      mask.insert({after: link});

      //preload('/img/site/home-images/1.png');
      /*
      preload('/img/site/home-images/2.png');
      preload('/img/site/home-images/3.png');
      preload('/img/site/home-images/4.png');
      preload('/img/site/home-images/5.png');
      preload('/img/site/home-images/6.png');
      preload('/img/site/home-images/7.png');
      preload('/img/site/home-images/8.png');
      preload('/img/site/home-images/9.png');
      preload('/img/site/home-images/10.png');
      */

      /*layer1 = new Element('div', {id: 'layer1', _src: '/img/site/home-images/1.png'}).setStyle({
        background: 'url(/img/site/home-images/1.png) no-repeat 0 0',
        height: '335px',
        left: '914px',
        position: 'absolute',
        top: 0,
        width: '527px',
        zIndex: 100
      });*/

      layer2 = new Element('div', {id: 'layer2', _src: '/img/site/home-images/2.png'}).setStyle({
        background: 'url(/img/site/home-images/2.png) no-repeat 0 0',
        height: '335px',
        left: '-535px',
        position: 'absolute',
        top: 0,
        width: '535px',
        zIndex: 100
      }).hide();

      layer3 = new Element('div', {id: 'layer3', _src: '/img/site/home-images/4.png'}).setStyle({
        background: 'url(/img/site/home-images/4.png) no-repeat 0 0',
        height: '335px',
        left: '914px',
        position: 'absolute',
        top: 0,
        width: '527px',
        zIndex: 101
      }).hide();

      layer4 = new Element('div', {id: 'layer4', _src: '/img/site/home-images/3.png'}).setStyle({
        background: 'url(/img/site/home-images/3.png) no-repeat 0 0',
        height: '335px',
        left: '-535px',
        position: 'absolute',
        top: 0,
        width: '535px',
        zIndex: 101
      }).hide();

      layer5 = new Element('div', {id: 'layer5', _src: '/img/site/home-images/5.png'}).setStyle({
        background: 'url(/img/site/home-images/5.png) no-repeat 0 0',
        height: '335px',
        left: '914px',
        position: 'absolute',
        top: 0,
        width: '527px',
        zIndex: 102
      }).hide();

      layer6 = new Element('div', {id: 'layer6', _src: '/img/site/home-images/6.png'}).setStyle({
        background: 'url(/img/site/home-images/6.png) no-repeat 0 0',
        height: '335px',
        left: '-535px',
        position: 'absolute',
        top: 0,
        width: '535px',
        zIndex: 102
      }).hide();

      layer7 = new Element('div', {id: 'layer7', _src: '/img/site/home-images/7.png'}).setStyle({
        background: 'url(/img/site/home-images/7.png) no-repeat 0 0',
        height: '335px',
        left: '914px',
        position: 'absolute',
        top: 0,
        width: '527px',
        zIndex: 103
      }).hide();

      layer8 = new Element('div', {id: 'layer8', _src: '/img/site/home-images/8.png'}).setStyle({
        background: 'url(/img/site/home-images/8.png) no-repeat 0 0',
        height: '335px',
        left: '-535px',
        position: 'absolute',
        top: 0,
        width: '535px',
        zIndex: 103
      }).hide();

      layer9 = new Element('div', {id: 'layer9', _src: '/img/site/home-images/9.png'}).setStyle({
        background: 'url(/img/site/home-images/9.png) no-repeat 0 0',
        height: '335px',
        left: '914px',
        position: 'absolute',
        top: 0,
        width: '527px',
        zIndex: 103
      }).hide();

      layer10 = new Element('div', {id: 'layer10', _src: '/img/site/home-images/10.png'}).setStyle({
        background: 'url(/img/site/home-images/10.png) no-repeat 0 0',
        height: '335px',
        left: '-535px',
        position: 'absolute',
        top: 0,
        width: '535px',
        zIndex: 103
      }).hide();

      layer11 = new Element('div', {id: 'layer11', _src: '/img/site/home-images/11.png'}).setStyle({
        background: 'url(/img/site/home-images/11.png) no-repeat 0 0',
        height: '335px',
        left: '914px',
        position: 'absolute',
        top: 0,
        width: '527px',
        zIndex: 103
      }).hide();

      layer12 = new Element('div', {id: 'layer12', _src: '/img/site/home-images/12.png'}).setStyle({
        background: 'url(/img/site/home-images/12.png) no-repeat 0 0',
        height: '335px',
        left: '-535px',
        position: 'absolute',
        top: 0,
        width: '535px',
        zIndex: 103
      }).hide();

     // mask.insert(layer1);
      mask.insert(layer2);
      mask.insert(layer3);
      mask.insert(layer4);
      mask.insert(layer5);
      mask.insert(layer6);
      mask.insert(layer7);
      mask.insert(layer8);
      mask.insert(layer9);
      mask.insert(layer10);
      mask.insert(layer11);
      mask.insert(layer12);

      if(IE6){
        //layer1.style.background="none";
        //layer1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/1.png' sizingMethod='crop')";
        layer2.style.background="none";
        layer2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/2.png' sizingMethod='crop')";
        layer4.style.background="none";
        layer4.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/3.png' sizingMethod='crop')";
        layer3.style.background="none";
        layer3.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/4.png' sizingMethod='crop')";
        layer5.style.background="none";
        layer5.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/5.png' sizingMethod='crop')";
        layer6.style.background="none";
        layer6.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/6.png' sizingMethod='crop')";
        layer7.style.background="none";
        layer7.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/7.png' sizingMethod='crop')";
        layer8.style.background="none";
        layer8.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/8.png' sizingMethod='crop')";
        layer9.style.background="none";
        layer9.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/9.png' sizingMethod='crop')";
        layer10.style.background="none";
        layer10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/10.png' sizingMethod='crop')";
        layer11.style.background="none";
        layer11.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/10.png' sizingMethod='crop')";
        layer12.style.background="none";
        layer12.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/home-images/10.png' sizingMethod='crop')";

      }
      animate(0);
    },
    kitchens : function(){
      mask = $('mask');

      link = new Element('a', {href:'#'}).update('<img src="/img/site/magic.png" width="200" height="40" />').setStyle({
        position: 'absolute',
        right: 0,
        bottom: 0,
        zIndex: 120
      });
      mask.insert({after: link});

      steps = [
        {element: 'layer3', x: 255, y: 0, duration: 1.5, link: '/kitchens/solid_oak'},
        {element: 'layer4', x: 0, y: 35, duration: 1.5},
        {element: 'layer5', x: 255, y: 0, duration: 1.5, link: '/kitchens/high_gloss_white'},
        {element: 'layer6', x: 0, y: 35, duration: 1.5},
        {element: 'layer7', x: 255, y: 0, duration: 1.5, link: '/kitchens/chillingham'},
        {element: 'layer8', x: 0, y: 35, duration: 1.5},
        {element: 'layer1', x: 255, y: 0, duration: 1.5, link: '/kitchens/high_gloss_cream'},
        {element: 'layer2', x: 0, y: 35, duration: 1.5}
      ];

      /*preload('/img/site/kitchen-landing/1.png');
      preload('/img/site/kitchen-landing/2.png');
      preload('/img/site/kitchen-landing/3.png');
      preload('/img/site/kitchen-landing/4.png');
      preload('/img/site/kitchen-landing/5.png');
      preload('/img/site/kitchen-landing/6.png');
      preload('/img/site/kitchen-landing/7.png');
      preload('/img/site/kitchen-landing/8.png');*/

      layer1 = new Element('div', {id: 'layer1', _src: '/img/site/kitchen-landing/1.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/1.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 110
      });

      layer2 = new Element('div', {id: 'layer2', _src: '/img/site/kitchen-landing/2.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/2.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 110
      }).hide();

      layer3 = new Element('div', {id: 'layer3', _src: '/img/site/kitchen-landing/3.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/3.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 101
      }).hide();

      layer4 = new Element('div', {id: 'layer4', _src: '/img/site/kitchen-landing/4.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/4.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 101
      }).hide();

      layer5 = new Element('div', {id: 'layer5', _src: '/img/site/kitchen-landing/5.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/5.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 102
      }).hide();

      layer6 = new Element('div', {id: 'layer6', _src: '/img/site/kitchen-landing/6.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/6.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 102
      }).hide();

      layer7 = new Element('div', {id: 'layer7', _src: '/img/site/kitchen-landing/7.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/7.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 103
      }).hide();

      layer8 = new Element('div', {id: 'layer8', _src: '/img/site/kitchen-landing/8.png'}).setStyle({
        background: 'url(/img/site/kitchen-landing/8.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 103
      }).hide();

      mask.insert(layer1);
      mask.insert(layer2);
      mask.insert(layer3);
      mask.insert(layer4);
      mask.insert(layer5);
      mask.insert(layer6);
      mask.insert(layer7);
      mask.insert(layer8);

      if(IE6){
        layer1.style.background="none";
        layer1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/1.png' sizingMethod='crop')";
        layer2.style.background="none";
        layer2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/2.png' sizingMethod='crop')";
        layer3.style.background="none";
        layer3.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/3.png' sizingMethod='crop')";
        layer4.style.background="none";
        layer4.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/4.png' sizingMethod='crop')";
        layer5.style.background="none";
        layer5.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/5.png' sizingMethod='crop')";
        layer6.style.background="none";
        layer6.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/6.png' sizingMethod='crop')";
        layer7.style.background="none";
        layer7.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/7.png' sizingMethod='crop')";
        layer8.style.background="none";
        layer8.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/kitchen-landing/8.png' sizingMethod='crop')";
      }
      animate(0);
    },
    bathrooms : function(){
      mask = $('mask');

      link = new Element('a', {href:'#'}).update('<img src="/img/site/magic.png" width="200" height="40" />').setStyle({
        position: 'absolute',
        right: 0,
        bottom: 0,
        zIndex: 120
      });
      mask.insert({after: link});

      steps = [
        {element: 'layer3', x: 255, y: 0, duration: 1.5, link: '/bathrooms/capulet'},
        {element: 'layer4', x: 0, y: 35, duration: 1.5},
        {element: 'layer5', x: 255, y: 0, duration: 1.5, link: '/bathrooms/eleanor'},
        {element: 'layer6', x: 0, y: 35, duration: 1.5},
        // {element: 'layer7', x: 255, y: 0, duration: 1.5, link: '/bathrooms/imogen'},
        // {element: 'layer8', x: 0, y: 35, duration: 1.5},
        {element: 'layer9', x: 255, y: 0, duration: 1.5, link: '/bathroom_showers'},
        {element: 'layer10', x: 0, y: 35, duration: 1.5},
        {element: 'layer1', x: 255, y: 0, duration: 1.5, link: '/bathrooms/luciana'},
        {element: 'layer2', x: 0, y: 35, duration: 1.5}
      ];

      /*preload('/img/site/kitchen-landing/1.png');
      preload('/img/site/kitchen-landing/2.png');
      preload('/img/site/kitchen-landing/3.png');
      preload('/img/site/kitchen-landing/4.png');
      preload('/img/site/kitchen-landing/5.png');
      preload('/img/site/kitchen-landing/6.png');
      preload('/img/site/kitchen-landing/7.png');
      preload('/img/site/kitchen-landing/8.png');*/

      layer1 = new Element('div', {id: 'layer1', _src: '/img/site/bathroom-landing/3.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/3.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 110
      });

      layer2 = new Element('div', {id: 'layer2', _src: '/img/site/bathroom-landing/4.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/4.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 110
      }).hide();

      layer3 = new Element('div', {id: 'layer3', _src: '/img/site/bathroom-landing/1.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/1.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 101
      }).hide();

      layer4 = new Element('div', {id: 'layer4', _src: '/img/site/bathroom-landing/2.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/2.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 101
      }).hide();

      layer5 = new Element('div', {id: 'layer5', _src: '/img/site/bathroom-landing/5.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/5.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 102
      }).hide();

      layer6 = new Element('div', {id: 'layer6', _src: '/img/site/bathroom-landing/6.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/6.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 102
      }).hide();

      // layer7 = new Element('div', {id: 'layer7', _src: '/img/site/bathroom-landing/7.png'}).setStyle({
      //   background: 'url(/img/site/bathroom-landing/7.png) no-repeat 0 0',
      //   height: '367px',
      //   left: '672px',
      //   position: 'absolute',
      //   top: 0,
      //   width: '417px',
      //   zIndex: 103
      // }).hide();
      //
      // layer8 = new Element('div', {id: 'layer8', _src: '/img/site/bathroom-landing/8.png'}).setStyle({
      //   background: 'url(/img/site/bathroom-landing/8.png) no-repeat 0 0',
      //   height: '334px',
      //   left: '-403px',
      //   position: 'absolute',
      //   top: '35px',
      //   width: '403px',
      //   zIndex: 103
      // }).hide();

      layer9 = new Element('div', {id: 'layer9', _src: '/img/site/bathroom-landing/9.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/9.png) no-repeat 0 0',
        height: '367px',
        left: '672px',
        position: 'absolute',
        top: 0,
        width: '417px',
        zIndex: 104
      }).hide();

      layer10 = new Element('div', {id: 'layer10', _src: '/img/site/bathroom-landing/10.png'}).setStyle({
        background: 'url(/img/site/bathroom-landing/10.png) no-repeat 0 0',
        height: '334px',
        left: '-403px',
        position: 'absolute',
        top: '35px',
        width: '403px',
        zIndex: 104
      }).hide();





      mask.insert(layer1);
      mask.insert(layer2);
      mask.insert(layer3);
      mask.insert(layer4);
      mask.insert(layer5);
      mask.insert(layer6);
      // mask.insert(layer7);
      // mask.insert(layer8);
      mask.insert(layer9);
      mask.insert(layer10);

      if(IE6){
        layer1.style.background="none";
        layer1.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/3.png' sizingMethod='crop')";
        layer2.style.background="none";
        layer2.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/4.png' sizingMethod='crop')";
        layer3.style.background="none";
        layer3.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/1.png' sizingMethod='crop')";
        layer4.style.background="none";
        layer4.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/2.png' sizingMethod='crop')";
        layer5.style.background="none";
        layer5.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/5.png' sizingMethod='crop')";
        layer6.style.background="none";
        layer6.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/6.png' sizingMethod='crop')";
        //         layer7.style.background="none";
        // layer7.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/7.png' sizingMethod='crop')";
        //         layer8.style.background="none";
        //        layer8.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/8.png' sizingMethod='crop')";
        layer9.style.background="none";
        layer9.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/9.png' sizingMethod='crop')";
        layer10.style.background="none";
        layer10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/img/site/bathroom-landing/10.png' sizingMethod='crop')";
      }
      animate(0);
    }
  }
}();



document.observe("dom:loaded", function(){



  when('light', function(element){
    element.hide();
  });
  when('fade', function(element){
    element.hide();
  });

  when('exit', function(element){
      element.observe('click', function(event){
        event.stop();
        $('fade').hide();
        $('light').hide();
      });
  });

  when('close', function(element){
      element.observe('click', function(event){
        event.stop();
        $('fade').hide();
        $('light').hide();
      });
  });


  when('next', function(element){
      element.observe('click', function(event){
        event.stop();
        window.open(element.href, '');
      });
  });


  when('collection', function(element){

    var wrapper = $('information');
    wrapper.hide();

    function mouse_enter(e, content, position, front){
      wrapper.update(content).setStyle({
        top: position.top-182+'px'
      }).show();
      front.setStyle({
        visibility: 'hidden'
      });
    }

    function mouse_leave(e, front){
      wrapper.hide();
      front.setStyle({
        visibility: 'visible'
      });
    }

    element.select('.image-holder').each(function(element){
      var content = element.down('p');
      var front = element.down('div');
      if(content){
        element.observe('mouseenter', mouse_enter.bindAsEventListener(element, content.innerHTML, element.cumulativeOffset(), front));
        element.observe('mouseleave', mouse_leave.bindAsEventListener(element, front));
      }
    });
  });

  when('index', function(element){

    function mouse_enter_index(e, front){
      front.setStyle({
        visibility: 'hidden'
      });
    }

    function mouse_leave_index(e, front){
      front.setStyle({
        visibility: 'visible'
      });
    }

    element.select('.image-holder').each(function(element){
      var front = element.down('div');
      if(content){
        element.observe('mouseenter', mouse_enter_index.bindAsEventListener(element, front));
        element.observe('mouseleave', mouse_leave_index.bindAsEventListener(element, front));
      }
    });
  });

  when('homepage-widget', App.Animation.homepage);
  when('kitchens-widget', App.Animation.kitchens);
  when('bathrooms-widget', App.Animation.bathrooms);


  //var domains = $A(['', 'cookeandlewis.localhost', 'cal.lawton-staging.co.uk', 'cookeandlewis.co.uk', 'cookeandlewis.com', 'cal.localhost']);
  var domains = $A(['diy.com', 'www.diy.com']);

  $$('a').each(function(element){
    var href = element.getAttribute('href');
    var domain = element.hostname;
    if(href){
      if(domains.include(domain)){
        element.observe('click', show_lightbox.bindAsEventListener(window, href));
      }
    }
  });

  $$('.brochure-download').each(function(element) {
    element.writeAttribute('target','_blank');
  });

  function show_lightbox(event, href){
    event.stop();

    var dimensions = document.viewport.getDimensions();
    var scroll = document.viewport.getScrollOffsets();

    var t = Math.round((dimensions.height/2)+scroll.top);

    $('light').setStyle({
      display: 'block',
      position: 'absolute',
      top: t+'px'
    });

    var dimensions = $(document.documentElement).getDimensions();

    $('fade').setStyle({
      display: 'block',
      position: 'absolute',
      height: (document.height || document.body.offsetHeight)+20+'px',
      width: '100%'
    });


    $('next').href = href;
  }

});