var SA = {
  pageLoaded: function() {
    $$(".defaultClass").each(function(elm){
      elm.observe("focus", function(e) {
        if(elm.getValue() == elm.defaultValue) elm.setValue('');
      });
      elm.observe("blur", function(e) {
        if(elm.getValue().strip().length == 0) elm.setValue(elm.defaultValue);
      });

    });

    $$('.message-panel').each(function(elm) {
      var btnClose = new Element('a', {'href': 'javascript:void(0)', 'class': 'aBtn close'});
      elm.insert({top: btnClose});
      btnClose.observe('click', function(e){
        var $this = e.element();
        $this.up("div.message-panel").fade({duration: .5, afterFinish: function(e) { $this.remove(); }});
      });
    });

    Event.observe(window, 'load', function(){
      $$(".tool-tip").invoke('observe', 'mouseover', function(e) {
        var elm = e.element();
        $$('div.button-tip-box').invoke('remove');
        var co = elm.viewportOffset();
        elm.getOffsetParent().insert("<div class='button-tip-box'>"+elm.innerHTML+"<span class='arrow'></span></div>");
        $$('div.button-tip-box')[0].clonePosition(elm, {setWidth: false, setHeight: false, offsetTop: -10 - $$('div.button-tip-box')[0].getHeight(), offsetLeft: 11 - Math.ceil($$('div.button-tip-box')[0].getWidth() / 2)});
        $$('div.button-tip-box')[0].down("span.arrow").setStyle({left: (Math.ceil($$('div.button-tip-box')[0].getWidth() - $$('div.button-tip-box')[0].down("span.arrow").getWidth()) / 2) + 'px'});
        $$('div.button-tip-box')[0].observe('mouseout', function(e) {
          Element.remove(e.element());
        })
      });

      $$(".tool-tip").invoke('observe', 'mouseout', function(e) {
        if(!e.relatedTarget.hasClassName('button-tip-box')) {
          $$('div.button-tip-box').invoke('remove');
        }
      });

      $$(".header-tool-tip").invoke('observe', 'mouseover', function(e) {
        var elm = e.element();
        $$('div.header-tip-box').invoke('remove');
        var co = elm.viewportOffset();
        elm.getOffsetParent().insert("<div class='header-tip-box'>"+elm.innerHTML+"<span class='arrow'></span></div>");
        $$('div.header-tip-box')[0].clonePosition(elm, {setWidth: false, setHeight: false, offsetTop: -5, offsetLeft: 140 - Math.ceil($$('div.header-tip-box')[0].getWidth() / 2)});
        $$('div.header-tip-box')[0].down("span.arrow");
        $$('div.header-tip-box')[0].observe('mouseout', function(e) {
          Element.remove(e.element());
        })
      });

      $$(".header-tool-tip").invoke('observe', 'mouseout', function(e) {
        if(!e.relatedTarget.hasClassName('header-tip-box')) {
          $$('div.header-tip-box').invoke('remove');
        }
      });
    });

    SA.gallery.init();

    var modal = new Control.Modal($('modal'),{  
        overlayOpacity: 0.75,  
        className: 'centreinner',  
        fade: true  
    });
	 
    var modal = new Control.Modal($('modal1'),{  
        overlayOpacity: 0.75,  
        className: 'centreinner',  
        fade: true  
    });
  },

  gallery: {
    init: function() {
      $$(".gallery-panel .pin").each(function(elm) {
        elm.observe("mouseover", function() { SA.gallery.showDialog(this); });
      });
      $$(".gallery-panel .dialog").each(function(elm) {
        elm.observe("mouseleave", function() { SA.gallery.hideDialog(this); });
      });
      $$(".gallery-panel .gallery-image").each(function(el) {
        el.hide();
      });
      
      var gallery_nav = $$(".gallery-nav-panel ul li img");
      for(i=0;i<gallery_nav.length;i++) {
        if(i==0) {
          gallery_nav[i].addClassName("active");
          if($("gallery_image_"+gallery_nav[i].readAttribute("rel"))) {
            $("gallery_image_"+gallery_nav[i].readAttribute("rel")).show();
          }
        }
        else {
          gallery_nav[i].removeClassName("active");
        }
      }
      gallery_nav.each(function(elm) {
        elm.observe("click", function() { SA.gallery.changeImg(this); });
      });

      SA.gallery.arrowRefresh();
      if($$(".gallery-nav-panel a.prev")[0]) $$(".gallery-nav-panel a.prev")[0].observe("click", SA.gallery.slideLeft);
      if($$(".gallery-nav-panel a.next")[0]) $$(".gallery-nav-panel a.next")[0].observe("click", SA.gallery.slideRight);
    },

    showDialog: function(elm) {
      var dialog = $("dialog_"+$(elm).readAttribute("rel"));
      if(dialog) {
        dialog.show();
        var co = elm.positionedOffset();
        dialog.setStyle({left: (co[0]-75) + 'px', top: (co[1]-173) + 'px', zIndex: 10});
        elm.setStyle({zIndex: 20});
      }
    },

    hideDialog: function(el) {
      if(el) {
        el.hide();
      }
    },

    hideDialogs: function() {
      $$(".gallery-panel .gallery-image .dialog").each(function(el) { el.hide(); });
    },

    changeImg: function(elm) {
      SA.gallery.hideDialogs();
      if(!elm.hasClassName("active")) {
        trans = [];
        $$(".gallery-panel .gallery-image").each(function(div) {
          if(div.visible()) {
            trans.push(new Effect.Fade(div, {sync: true}));
          }
        });
        if($("gallery_image_"+elm.readAttribute("rel"))) {
          trans.push(new Effect.Appear($("gallery_image_"+elm.readAttribute("rel")), {sync: true}));
        }
        new Effect.Parallel(trans, {
          duration: 0.3,
          queue: {position: "end", scope: "galleryscope", limit: 1},
          beforeSetup: function() {
            $$(".gallery-nav-panel ul li img").each(function(img) { img.removeClassName("active"); });
            elm.addClassName("active");
          }
        });
      }
    },

    arrowRefresh: function() {
      if($$(".gallery-nav-panel a.prev")[0]) $$(".gallery-nav-panel a.prev")[0].hide();
      if($$(".gallery-nav-panel a.next")[0]) $$(".gallery-nav-panel a.next")[0].hide();

      slides = $$(".gallery-nav-panel ul li img");
      position = 0;
      if(slides.length > 4) {
        position = $$(".gallery-nav-panel ul")[0].getStyle("left").replace("px", "")*-1 / 136;
        if(position > 0) {
          $$(".gallery-nav-panel a.prev")[0].show();
        }
        if(position + 4 < slides.length) {
          $$(".gallery-nav-panel a.next")[0].show();
        }
      }
    },

    slideLR: function(lr) {
      SA.gallery.hideDialogs();
      slides = $$(".gallery-nav-panel ul li img");
      position = 0;
      if(slides.length > 3) {
        slideWidth = 133;

        position = $$(".gallery-nav-panel ul")[0].getStyle("left").replace("px", "")*-1 / slideWidth;
        if(position > 0 && lr) {
          toStyle = { left: ($$(".gallery-nav-panel ul")[0].getStyle("left").replace("px", "")*1 + (slideWidth*4)) + "px" };
          if(position < 3) { toStyle.left = "0px"; }

          new Effect.Morph($$(".gallery-nav-panel ul")[0], {
            style: toStyle,
            duration: 0.3,
            queue: {position: "end", scope: "slidescope", limit: 1},
            afterFinish: SA.gallery.arrowRefresh
          });
        }
        if(position + 3 < slides.length && !lr) {
          toStyle = { left: ($$(".gallery-nav-panel ul")[0].getStyle("left").replace("px", "")*1 - (slideWidth*4)) + "px" };
          if(position+3 > slides.length-3) { toStyle.left = "-"+slideWidth*(slides.length-3)+"px"; }

          new Effect.Morph($$(".gallery-nav-panel ul")[0], {
            style: toStyle,
            duration: 0.3,
            queue: {position: "end", scope: "slidescope", limit: 1},
            afterFinish: SA.gallery.arrowRefresh
          });
        }
      }
    },

    slideLeft: function() { SA.gallery.slideLR(true) },
    slideRight: function() { SA.gallery.slideLR(false) }
  },

  productListing: {
    loaded: function() {
      var $this = this;
      Event.observe(window, 'load', function(){
        $this.initSlider();
        $this.initFilterPanel();
      });
    },

    initSlider: function() {
      (function() {
        var minValue = parseFloat($F("minPrice"));
        var maxValue = parseFloat($F("maxPrice"));
        $("minPriceLabel").update("$"+minValue.toFixed(2));
        $("maxPriceLabel").update("$"+maxValue.toFixed(2));

        var price_slider = $('price-slider');
        new Control.Slider(price_slider.select('.handle'), price_slider, {
          range: $R(minValue, maxValue),
          restricted: true,
          spans: $$("span.slider-range"),
          sliderValue: [minValue, maxValue],
          onSlide: function(values) {
            $("minPriceLabel").update("$"+values[0].toFixed(2));
            $("maxPriceLabel").update("$"+values[1].toFixed(2));
            $("minPrice").setValue(values[0].toFixed(2));
            $("maxPrice").setValue(values[1].toFixed(2));
          },
          onChange: function(values) {
            $("minPriceLabel").update("$"+values[0].toFixed(2));
            $("maxPriceLabel").update("$"+values[1].toFixed(2));
            $("minPrice").setValue(values[0].toFixed(2));
            $("maxPrice").setValue(values[1].toFixed(2));
          }
        });
      })();
    },

    defaultSettings: {
      filterHeight: 44
    },

    initFilterPanel: function() {
      $$("ul.filter-list > li").each(function(elm){
        elm.store("height", elm.getHeight());
        elm.setStyle({'height': SA.productListing.defaultSettings.filterHeight+'px'});
        elm.select("a")[0].appendChild(new Element('span', {'class': 'icon'}));
        elm.observe("click", function(e) {
          Event.stop(e);

          new Effect.Morph(elm, {
            style: {height: (elm.getHeight() != SA.productListing.defaultSettings.filterHeight ? SA.productListing.defaultSettings.filterHeight : elm.retrieve("height")) + 'px'},
            duration: .5,
            queue: { position: 'end', scope: 'filterscope', limit: 1 },
            beforeSetup: function() {
              elm.select("a > span.icon")[0].toggleClassName('collapse');
            }
          });
        });
      });
    }
  },

  productDetails: {
    loaded: function() {
      var $this = this;
      Event.observe(window, 'load', function(){
      	
        $$('ul.tab-button > li > a').invoke('observe', 'click', function(e){
          var elm = e.element();
          if(!elm.hasClassName('active')) {
            $$('div.tab-panel').invoke('hide');
            $(elm.readAttribute('rel')).show();
            $$('ul.tab-button > li > a').invoke('removeClassName', 'active');
            elm.addClassName('active');

            if (elm.id == 'storeDetailsTab') {
            	initializeMap();
            }
          }
        });

        $this.rateProduct();
      });
    },

    rateProduct: function() {
    	if ($('starsContainer')) {
	      $('starsContainer').observe('mouseout', function(e) {
	        var elm = e.element();
	        var noStars = false;
	        if(elm != $('starsPanel') && !elm.descendantOf($('starsPanel'))) {
	          if($F('userRated')!='') {
	            for(var i=0;i<$F('userRated');i++) {
	              if(!$$('#starsPanel a')[i].hasClassName('active')) $$('#starsPanel a')[i].addClassName('active');
	            }
	          }
	          else {
	            noStars = true;
	          }
	        }
	      });
   	}

      $$('#starsPanel a').each(function(child){
        child.observe('mouseover', function() {
          if(!child.hasClassName('active')) child.addClassName('active');
          child.previousSiblings().each(function(a){
            if(!a.hasClassName('active')) a.addClassName('active');
          });
          child.nextSiblings().each(function(a){
            a.removeClassName('active');
          });
        });

        child.observe('mouseout', function() {
          var elmts = $$('#starsPanel a');
          elmts.each(function(a){
            a.removeClassName('active');
          });
        });

        child.observe('click', function(e) {
          var elm = e.element();
          var rating = 0;
          for(var i=0;i<$$('#starsPanel a').length;i++) {
            if($$('#starsPanel a')[i] == elm) {
              rating = i;
              break;
            }
          }
          $('userRated').setValue(rating+1);

          // Ajax update the rating below
          /*
          new Ajax.Request(YOUR_URL,
          {

          });
         */
        });
      });



    }
  },

  checkout: {
    loaded: function() {
      Event.observe(window, 'load', function(){
        $$('input[name=paymentMethod]').invoke('observe', (Prototype.Browser.IE ? 'click' : 'change'), function(e){
          var elm = e.element();
          if($('method_4').checked) {
            $('cc-panel').show();
          } else {
            $('cc-panel').hide();
          }
        });
      });
    }
  },

  slideshow: {
    targetPanel: null,
    slides: null,
    currentPosition: 0,
    timer: null,
    settings: {},
    busy: false,
    defaultSettings: {
      interval: 10,
      pager: null
    },

    init: function(targetPanel, options) {
      this.targetPanel = $(targetPanel);
      this.slides = this.targetPanel.select('> div');
      Object.extend(this.settings, Object.extend(this.defaultSettings, options || {}));

      for(var i = 0; i < this.slides.length;i++) {
        if(i > 0) this.slides[i].hide();
      }

      if(this.settings.pager && this.settings.pager.length > 0) {
        var $this = this;
        this.settings.pager.each(function(elm){
          for(var i = 0; i < $this.slides.length;i++) {
            elm.appendChild(new Element('a', {'href': 'javascript:void(0)', 'class': 'pager'+(i==0 ? ' active' : '')}));
          }
          elm.select('> a').invoke('observe', 'click', $this.navClickListener.bind($this));
        });
      }

      this.startTimer();
    },

    navClickListener: function(e) {

      var el = e.element();
      var i = el.up('div').select('a').indexOf(el);

      this.moveTo(i);
      window.clearInterval(this.timer);
      this.startTimer();
    },

    moveTo: function(i) {
      if(i==this.currentPosition || this.busy) return;

      var $this = this;
      this.busy = true;
      new Effect.Parallel([
        new Effect.Fade(this.slides[this.currentPosition], {sync: true}),
        new Effect.Appear(this.slides[i], {sync: true})
      ], {afterFinish: function(){ $this.busy = false; }});
      this.currentPosition = i;
      if(this.settings.pager && this.settings.pager.length > 0) {
        this.settings.pager.each(function(elm) {
          elm.select('a').invoke('removeClassName', 'active');
          elm.select('a')[$this.currentPosition].addClassName('active');
        });
      }
    },

    autoShow: function() {
      var i = this.currentPosition+1 > this.slides.length-1 ? 0 : this.currentPosition+1;
      this.moveTo(i);
    },

    startTimer: function() {
      this.timer = setInterval(this.autoShow.bind(this), this.settings.interval*1000);
    }
  }

};

document.observe("dom:loaded", function() {
	 //new ticker($$(".news-panel li"));
});

function changeImages(colourSelect)
{
	if (colourSelect.selectedIndex != 0)
	{
		var selectedColourID = colourSelect.options[colourSelect.selectedIndex].value;
		
		if (productImages[selectedColourID] != null)
		{
			var galleryPanelElement = $('gallery-panel');		
			var thumbPanelElement = $('thumbs-panel-list');
						
			$$('div.gallery-panel div').each(function(elm) {
				elm.remove();
			});
			
			$$('div.thumbs-panel ul li').each(function(elm) {
				elm.remove();
			});
			
			for (i = 0; i< productImages[selectedColourID]['main'].length; i++)
			{
				var thumbnailClass = (i==0)? ' class="first"': '';				
				
				galleryPanelElement.insert('<div id="gallery_image_'+i+'" class="gallery-image" style="background-image: url('+productImages[selectedColourID]['main'][i]+')"/><a href="'+productImages[selectedColourID]['zoom'][i]+'" rel="lightbox[\'product\']"></a></div>');
				thumbPanelElement.insert('<li'+thumbnailClass+'><img src="'+productImages[selectedColourID]['thumbnails'][i]+'" width="132" height="91" rel="'+i+'"/></li>');
			}
			
			SA.gallery.init();
		}
	}
}

function changeMainImage(selectedColourID, imgIndex)
{
	if (productImages[selectedColourID] != null)
	{
		$('product-image-main').src = productImages[selectedColourID]['main'][imgIndex];
		$('product-image-main-lightbox').href = productImages[selectedColourID]['zoom'][imgIndex];
	}
}