WS.Showroom = Class.create({
	initialize: function(showroomID, miniVersion) {
		this.showroomID = showroomID;
		this.variableName = showroomID + "Showroom";
		this.miniVersion = miniVersion;
		WS.Showrooms[showroomID] = this;
	},
	setup: function() {
		this.showroomElement = $(this.showroomID);

		this.showroomContainer = this.showroomElement.down("div.container");
		this.showroomContainerWidth = this.showroomContainer.offsetWidth;

		this.showroomCategoryList = this.showroomContainer.down("ul.categories");

		this.showroomProducts = this.showroomCategoryList.select("li.product");
		this.showroomProductCount = this.showroomProducts.length;
		this.showroomProductFirst = this.showroomProducts.first();
		
		this.showroomProductFirstWidth = this.showroomProductFirst.offsetWidth;
		this.showroomProductCountShownInContainer = this.showroomContainerWidth / this.showroomProductFirstWidth;
		this.showroomScrollIncrement = 1 / (this.showroomProductCount - this.showroomProductCountShownInContainer);
		
		this.showroomContainer.style.overflow = "hidden";
		this.showroomCategoryList.style.width = ((this.showroomProductFirstWidth) * this.showroomProductCount) + "px";
		this.showroomCategoryListWidth = this.showroomCategoryList.offsetWidth;
		this.showroomContainerWidthDifference = this.showroomCategoryListWidth - this.showroomContainerWidth;

		this.categoryNameList = this.showroomContainer.down("ul.category_names");
		this.categoryNames = this.categoryNameList.select("li.category_name");

		this.trackElement = this.showroomContainer.down("div.track");
		this.trackElement.style.display = "block";
		this.handleElement = this.trackElement.down("div.handle");
		
		this.handleElementWidth = this.handleElement.offsetWidth;

		var scrollLeftLink = this.trackElement.down("a.scroll_left");
		var scrollRightLink = this.trackElement.down("a.scroll_right");

		scrollLeftLink.addClassName(this.showroomID);		
		scrollRightLink.addClassName(this.showroomID);

		if (isIE7orPrevious) {
			scrollLeftLink.onclick = function() { WS.Showrooms[$w(this.className).last()].scrollLeft(); return false; };
			scrollRightLink.onclick = function() { WS.Showrooms[$w(this.className).last()].scrollRight(); return false; };
		} else {
			scrollLeftLink.writeAttribute("onclick", this.variableName + ".scrollLeft(); return false;");
			scrollRightLink.writeAttribute("onclick", this.variableName + ".scrollRight(); return false;");
		}


		//this.setupCategoryNameList();

		// horizontal slider control
		this.slider = new Control.Slider(this.handleElement, this.trackElement, {
			onSlide: function(value) {
				this.showroom.scrollHorizontal(value, false);
			},
			onChange: function(value) {
				this.showroom.scrollHorizontal(value, true);
			},
			showroom: this
		});

		this.minDuration = 0.05;
		this.maxDuration = this.showroomProductCount * 0.15;

		if (!this.miniVersion) {
			this.setupTooltips();
		}
	},
	setupCategoryNameList: function() {
		this.categoryNameList.style.display = "block";

		var categoryName;
		var categoryNameLink = null;
		var counter;

		for (counter = 0; counter < this.categoryNames.length; counter++) {
			categoryName = this.categoryNames[counter];
			categoryNameLink = categoryName.down("a");

			categoryNameLink.addClassName(this.showroomID);

			categoryName.onselectstart = function () { return false; }; // ie
			categoryNameLink.onselectstart = function () { return false; }; // ie
			categoryName.onmousedown = function () { return false; }; // mozilla
			categoryNameLink.onmousedown = function () { return false; }; // mozilla

			var categoryID = $w(categoryName.className).last();
			
			var showroomCategoryProducts = this.showroomCategoryList.select("li.product_" + categoryID);
			

			if (isIE7orPrevious) {
				categoryNameLink.onclick = function() {
					var showroomID = $w(this.className).last();
					var showroom = WS.Showrooms[showroomID];
					var categoryID = $w(this.up().className).last();
					var showroomCategoryProducts = showroom.showroomCategoryList.select("li.product_" + categoryID);
					showroom.showShowroomProduct($w(showroomCategoryProducts.first().className).last());
					return false;
				};
			} else {
				categoryNameLink.writeAttribute("onclick", this.variableName + ".showShowroomProduct('" + $w(showroomCategoryProducts.first().className).last() + "'); return false;");
			}
			
			alert(showroomCategoryProducts);

			var sliderValue = this.calculateSliderValue(showroomCategoryProducts.first());

			var sliderLeft = sliderValue * (this.showroomContainerWidth - this.handleElementWidth);

			var offset = sliderLeft + (0.5 * this.handleElementWidth) - (0.5 * categoryName.offsetWidth);

			categoryName.style.left = offset + "px";
		}

		for (counter = this.categoryNames.length - 2; counter > 0; counter--) {
			categoryName = this.categoryNames[counter];
			var nextCategoryName = this.categoryNames[counter + 1];

			var rightPoint = categoryName.offsetLeft + categoryName.offsetWidth;
			var leftPointNext = nextCategoryName.offsetLeft;


			if (rightPoint > leftPointNext || (rightPoint - leftPointNext) < 10) {
				var leftPoint = leftPointNext - categoryName.offsetWidth;
				categoryName.style.left = (leftPoint - 10) + "px";
			}
		}
	},
	scrollHorizontal: function(value, smoothMotion) {
		var queue = Effect.Queues.get("showroom");
		queue.each(function(effect) {
			effect.cancel();
		});

		var leftOffset = -1 * Math.round(value / this.slider.maximum * (this.showroomCategoryListWidth - this.showroomContainerWidth));

		if (smoothMotion) {
			var currentLeftOffset = this.showroomCategoryList.offsetLeft;

			var duration = Math.max(this.minDuration, Math.min(this.maxDuration, (this.maxDuration * Math.abs(currentLeftOffset - leftOffset) / this.showroomContainerWidthDifference)));

			new Effect.Move(this.showroomCategoryList, {
				x: leftOffset,
				y: 0,
				mode: "absolute",
				duration: duration,
				queue: {
					position: "end",
					scope: "showroom"
				}
			});
		} else {
			this.showroomCategoryList.style.left = leftOffset + "px";
		}
	},
	scrollLeft: function() {
		return this.scrollByValue(-1 * this.showroomScrollIncrement);
	},
	scrollRight: function() {
		return this.scrollByValue(this.showroomScrollIncrement);
	},
	scrollByValue: function(value) {
		var sliderValue = this.slider.value;
		sliderValue = this.normalizeValue(sliderValue + value);

		this.slider.setValue(sliderValue);

		return sliderValue;
	},
	showShowroomProduct: function(productID) {
		var showroomProduct = this.showroomCategoryList.select("li." + productID).first();
		this.slider.setValue(this.calculateSliderValue(showroomProduct));
	},
	showShowroomCategory: function(categoryNumber) {
		var categoryProduct = this.showroomCategoryList.select("li.category")[categoryNumber].select("li.product").first();

		this.slider.setValue(this.calculateSliderValue(categoryProduct));		
	},
	calculateSliderValue: function(showroomProduct) {
		var sliderValue = showroomProduct.offsetLeft / this.showroomContainerWidthDifference;

		sliderValue = Math.min(1, Math.max(0, sliderValue));

		return this.normalizeValue(sliderValue);
	},
	normalizeValue: function(value) {
		return Math.min(1, Math.max(0, value));
	},
	setupTooltips: function() {
		for (var counter = 0; counter < this.showroomProducts.length; counter++) {
			
			new Tip(this.showroomProducts[counter],
					this.showroomProducts[counter].down("div.tooltip"),
					{
						fixed: true,
						offset: { x: 80, y: 35 },
						showOn: "mouseover",
						hideOn: { event: "click" },
						hideAfter: 0.1
					});
		}
	}
});