(function($) {
	$.fn.flyOut = function() {
		return $(this).each(function() {
			var self = $(this);
			
			var flyoutToLeft = self.hasClass("flyout-left");
			
			// add style to show its active
			self.addClass("flyout-active");
			
			// find the next sibling to use as the flyout
			var flyoutContainer = $(this).next(); 
			
			// create the flyout container
			var container = $("<div class='flyout-container'></div>");
			container.append($(flyoutContainer).remove());
			$("body").append(container);
			container.hide();
			container.addClass(flyoutToLeft ? "flyout-left" : "flyout-right");

			// hard coded - should be able to do it better than this
			var itemsPerRow = 5;
			var numberOfItems = container.find("li").length;
			var numberOfRows = Math.ceil(numberOfItems / itemsPerRow);
			var naturalWidth = 5 + ((numberOfItems <=itemsPerRow ? numberOfItems : itemsPerRow) * 57);
			var height = 5 + (numberOfRows * 68);

			container.height(height);
			container.find("ul").width(naturalWidth - 5);
			
			self.click(function() {
				var position = $(this).offset();

				var closed = !container.hasClass("open");

				$("h5.open").removeClass("open");
				
				$("div.flyout-container").each(function() {
					if ($(this).hasClass("open")) {
						$(this).animate({ width: 0}, "slow", "linear", function() { $(this).removeClass("open").hide(); });
					}
				});
				
				if (closed) {
					var top = position.top - (height / 2) + 9; 

					self.addClass("open");
					container.addClass("open");
					
					if (flyoutToLeft) {		
						var startRight = $("body").width() - position.left + ($.browser.msie ? 10 : 9);
						container.css({position: 'absolute', top:top, right:startRight, width:0 });
					}
					else {
						var startLeft = position.left + self.width() + 11;
						container.css({position: 'absolute', top:top, left:startLeft, width:0 });
					}
					container.show();
					container.animate({ width: naturalWidth });
				}
				else {
					self.removeClass("open");
					container.removeClass("open");
				}

			});
			
		});
	};
})(jQuery);

var Popup = {
	show: function(content, className, title) {
		// if we don't have a background to bind to, create it
		if ($("body").find("#background").length === 0) {
			$("body").append("<div id='background'></div>");
		}
		
		var self = $("div#dialog");
		
		self.addClass(className);
		self.find("div.inner").html(content);
		self.find("div.inner").addClass("summary-dialog");
		
		title = (title != null && title != '') ? title : "Description";
		
		self.find("h2").text(title);
		
		var width = self.width();  
		var height = self.height();  
		
		var top = $(window).height()/2 - (height/2);
		var left = $(window).width()/2 - (width/2);
	
  if (self.css("position") == "absolute") {
   top = top + $(window).scrollTop();
  }
  
  self.css({top:top, left: left, zIndex: 10002});
 
  self.fadeIn();
  
  $("#background").css("opacity", "0.5");
  $("#background").fadeIn();
  
  self.find("a.close").click(function() {
      self.fadeOut(function() {
       self.removeClass(className);
       self.find("div.inner").removeClass("summary-dialog");
      });
      $("#background").fadeOut();
   return false;
  });
  
 }
};

$(document).ready(function() {
 function getMatchingParts(parts, href){
  var match = [];
  var i;
  for (i=parts.length-1;i>=0; i--){
   match.splice(0,0,parts[i]);
   if (href.indexOf(match.join("/")) <= 0){
    return match.length -1;
   }
  }
  return match.length;
 }
 
 $("h5.flyout").flyOut();
 
 $("a.showMore").click ( function(){
  $(this).siblings("ul.more").show();  
  $(this).hide();
  return false;
  }
 );
 
 $("div.summary-text a").click(function(){
  var summary = $(this).parent("div.summary-text");
  Popup.show(summary.parent().find("div.full-text").text(), "");
  return false;
 });
 
 
 $("a#show-attributes").click(function(){
  Popup.show($("div.expanded-attributes").html(), "show-attributes", "Full Specification");
  return false; 
 });
  
 $("div.image").hover(function(){
  $(this).children("img.zoom").css("display", "block");
  },
  function(){
   $(this).children("img.zoom").css("display", "none");  
  });
 
 $("ul.popupImages li a:not(.video)").lightBox({
  fixedNavigation:true,
  imageLoading: $.mapPath('images/lightbox/lightbox-ico-loading.gif', $.getSite()),
  imageBtnPrev: $.mapPath('images/lightbox/lightbox-btn-prev.gif', $.getSite()), 
  imageBtnNext: $.mapPath('images/lightbox/lightbox-btn-next.gif', $.getSite()),
  imageBtnClose: $.mapPath('images/lightbox/lightbox-btn-close.gif', $.getSite()),
  imageBlank: $.mapPath('images/lightbox/lightbox-blank.gif', $.getSite()),
  callback: function() {
   $("#lightbox-nav").show();
  }
 });
 
 $("div.product div.image img").click(function(){
  
  $("h5.flyout").removeClass("open");  
  $("div.flyout-container").hide().removeClass("open");  

  var url;
  if($(this).hasClass("zoom")){
   url = $("div.product div.image img.main-image").attr("src");
  }
  else {
   url = $(this).attr("src");
  }
  var parts = url.split("/");
  var popup = null;
  var mostMatches = 0;
  $("ul.popupImages li a").each(function(){
   var matching = getMatchingParts(parts, $(this).attr("href"));
   if (matching > mostMatches){
    popup = $(this);
    mostMatches = matching;
   }   
  });
  
   popup.click();
  return false;
 });
 
 if ($("div.inner ul.images").jcarousel != null){
  $("div.inner ul.images").jcarousel();
 }
 
 function bindProductImageLoader() {
  $("div.product div.image").append("<div class='loader-overlay'></div>");
 
  $("div.product ul.images li a").click(function() {
   var image = $("div.product div.image img.main-image");
   image.imageLoad($(this).attr("href"), $("div.product div.image"));
   
   return false;
  });
 }
  
 bindProductImageLoader();
 
 $("div.images div.inner a.video").lightBox({
	  fixedNavigation:true,
	  imageLoading: $.mapPath('images/lightbox/lightbox-ico-loading.gif', $.getSite()),
	  imageBtnPrev: $.mapPath('images/lightbox/lightbox-btn-prev.gif', $.getSite()), 
	  imageBtnNext: $.mapPath('images/lightbox/lightbox-btn-next.gif', $.getSite()),
	  imageBtnClose: $.mapPath('images/lightbox/lightbox-btn-close.gif', $.getSite()),
	  imageBlank: $.mapPath('images/lightbox/lightbox-blank.gif', $.getSite()),
	  callback: function() {
	  	$("#lightbox-nav").hide();
	  }
 });
 
 /* Replace pattern image with flash movie */
 $("#lightbox-image-details-caption:contains('3D Image')").livequery(function() {
  var videoUrl = $("div.images div.inner a.video").attr('rel');
  if (videoUrl) {
   var placeHolderImage = $("div.images div.inner a.video").attr('href');
   var self = $(this);
   var lightboxImage = $(this).parents("#jquery-lightbox").find("#lightbox-image");
   var container = $(lightboxImage).parent();
   
   //Include loading indicator
   $(container).append("<div class='loader-overlay'></div>"); 
   $(container).addClass("loading");
   
   $(lightboxImage).wrap("<a href='#'/>");
   $(lightboxImage).parent("a").flash({
    src: videoUrl,
    width: "900px",
    height: "540px"
   }, null, null, function() {
     $("#lightbox-container-image").addClass("no-flash");
     $("#lightbox-container-image").prepend('<p class="no-flash">Please install or upgrade your Flash Player to view content. <a href="http://www.adobe.com/go/getflashplayer">Download Flash Player</a></p>');
     $("#lightbox-container-image").removeClass("loading");
    }
   );
  }
  $("#lightbox-container-image").click(function(){
   if ($("p.no-flash a").length > 0) {
    return true;
   }
   return false;
  });
 });
 
 $("a.flash-replaced embed").livequery(function() {
  var flash = $(this);
  $(this).attr('wmode', 'opaque');
  $("#lightbox-container-image").removeClass("loading");
 });
 
 $("div.paint-carousel-button:first").addClass("selected");
 $("img.main-roomset").attr("src", $("div.selected").parent().attr("href"));
 
 $("div.paint-carousel-button").click(function(){
	 $("div.paint-carousel-button").removeClass("selected");
	 
	 $(this).addClass("selected");
 });
});