var S9MultiPackLayoutRegistry = new Array();
var S9OnLoadTriggered = false;

function multiPackResizeV2Handler() {
	var toSize = true;
	var resizeCount = 0;
	while(toSize){
		var initialSize = new Array();
		for (var i = 0; i < S9MultiPackLayoutRegistry.length; i++) {
			if (S9MultiPackLayoutRegistry[i].multiPackCreated()) {
				initialSize[i] = S9MultiPackLayoutRegistry[i].numVisibleItems();  
			} else {
				initialSize[i] = 0;
			}
		}

		for (var i = 0; i < S9MultiPackLayoutRegistry.length; i++) {
			if (S9MultiPackLayoutRegistry[i].multiPackCreated()) {
				S9MultiPackLayoutRegistry[i].resize();
			}
		}

		toSize = false;
		for (var i = 0; i < S9MultiPackLayoutRegistry.length; i++) {
			if (S9MultiPackLayoutRegistry[i].multiPackCreated()) {
				if (initialSize[i] > S9MultiPackLayoutRegistry[i].numVisibleItems()) {
					toSize = true;
					break;
				}
			}
		}
	    resizeCount++;	
	}
}

jQuery(document).ready(function() {
	S9OnLoadTriggered = true;
	jQuery(window).resize(function() {
		multiPackResizeV2Handler();
	});
	multiPackResizeV2Handler();
});

function S9MultiPackButton(buttonId) {
	this.button = document.getElementById(buttonId);
	this.visible = false;
	this.clicked = false;
	this.enabled = true;
	this.xStride = 25;
	this.yStride = 50;
};

S9MultiPackButton.prototype.updateView = function(){
	if (this.exists()) {
		if (this.visible) {
			this.button.style.visibility = "visible";
		} else {
			this.button.style.visibility = "hidden";
		}
		var xOffset = 0;
		if (this.enabled) {
			xOffset = 0;
		} else {
			xOffset = -1 * this.xStride;
		}
		var yOffset = 0;
		if (this.clicked) {
			yOffset = -1 * this.yStride;
		} else {
			yOffset = 0;
		}
		this.button.style.backgroundPosition = xOffset + "px " + yOffset + "px";
	}
};

S9MultiPackButton.prototype.setVisible = function(visible){
	this.visible = visible;
	this.updateView();
};

S9MultiPackButton.prototype.setEnabled = function(enabled){
	this.enabled = enabled;
	this.updateView();
};

S9MultiPackButton.prototype.setClicked = function(clicked){
	this.clicked = clicked;
	this.updateView();
};

S9MultiPackButton.prototype.exists = function() {
	return (this.button != null);
}

function S9MultiPackLayout(namespace, minimumItems, maximumItems, minimumItemWidth) {
	this.namespace = namespace;
	this.minimumItems = minimumItems;
	this.maximumItems = maximumItems;
	this.minimumItemWidth = minimumItemWidth;
	this.firstVisibleCol = 0;
	
	this.init();
    S9MultiPackLayoutRegistry.push(this);
};

S9MultiPackLayout.prototype.init = function() {
	this.itemRow = document.getElementById(this.namespace + "ItemRow");
	this.seedItem = document.getElementById(this.namespace + "SeedItem");
	this.otherItems = document.getElementById(this.namespace + "OtherItems");

	this.seedItemHeaderContainer = document.getElementById(this.namespace + "SeedItemHeaderContainer");
	this.seedItemHeader = document.getElementById(this.namespace + "SeedItemHeader");
	this.otherItemsHeaderContainer = document.getElementById(this.namespace + "OtherItemsHeaderContainer");
	this.otherItemsHeader = document.getElementById(this.namespace + "OtherItemsHeader");

	this.itemChildren = new Array();
	this.itemHeaderContainers = new Array();
	this.itemHeaders = new Array();
	this.itemImageContainers = new Array();
	this.itemImages = new Array();
	this.itemTitleContainers = new Array();
	this.itemTitles = new Array();
	for (var i = 0; i < this.maximumItems ; i++) {
		elem = document.getElementById(this.namespace + "ItemElement" + i);
		if (elem == null) {
			break;
		}
		this.itemChildren[i] = elem;
		this.itemHeaderContainers[i] = document.getElementById(this.namespace + "ItemHeaderContainer" + i);
		this.itemHeaders[i] = document.getElementById(this.namespace + "ItemHeader" + i);
		this.itemImageContainers[i] = document.getElementById(this.namespace + "ImageContainer" + i);
		this.itemImages[i] = document.getElementById(this.namespace + "Image" + i);
		this.itemTitleContainers[i] = document.getElementById(this.namespace + "TitleContainer" + i);
		this.itemTitles[i] = document.getElementById(this.namespace + "Title" + i);
    }
    
    this.leftButton = new S9MultiPackButton(this.namespace + "shoveller_button_left");
    this.rightButton = new S9MultiPackButton(this.namespace + "shoveller_button_right");
}

S9MultiPackLayout.prototype.makeVisible = function() {
	var numProposedVisibleItems = this.numProposedVisibleItems();
	var lastVisibleCol = this.firstVisibleCol + numProposedVisibleItems - 1;
	var width = ((100 / numProposedVisibleItems)-1);

	if (this.seedItem) {
		this.seedItem.style.width = width + "%";
		this.itemChildren[0].style.display = "";
		this.itemChildren[0].style.width = "100%";
		this.otherItems.style.width = (98 - width) + "%";
		var widthWithoutSeed = ((100 / (numProposedVisibleItems-1))-1);
		for (var i = 1; i < this.itemChildren.length; i++) {
			if ((i >= this.firstVisibleCol) && (i <= lastVisibleCol)) {
				this.itemChildren[i].style.display = "";
				this.itemChildren[i].style.width = widthWithoutSeed + "%";
				if (this.itemImages[i].getAttribute("url")) {
					this.itemImages[i].src = this.itemImages[i].getAttribute("url");
					this.itemImages[i].setAttribute("url", "");
				}
			} else {
				this.itemChildren[i].style.display = "none";
			}
		}		
	} else {
		for (var i = 0; i < this.itemChildren.length; i++) {
			if ((i >= this.firstVisibleCol) && (i <= lastVisibleCol)) {
				this.itemChildren[i].style.display = "";
				this.itemChildren[i].style.width = width + "%";
				if (this.itemImages[i].getAttribute("url")) {
					this.itemImages[i].src = this.itemImages[i].getAttribute("url");
					this.itemImages[i].setAttribute("url", "");
				}
			} else {
				this.itemChildren[i].style.display = "none";
			}
		}
		this.otherItems.style.width = "100%";
	}

	if ((this.seedItemHeader != null) && (this.otherItemsHeader != null)) {
		var maxRowHeaderHeight = Math.max(this.seedItemHeader.offsetHeight, this.otherItemsHeader.offsetHeight);
		this.seedItemHeaderContainer.style.height = maxRowHeaderHeight + "px";
		this.otherItemsHeaderContainer.style.height = maxRowHeaderHeight + "px";
	}

	var maxHeaderHeight = 0;
	var maxImageHeight = 0;
	var maxTitleHeight = 0;
	for (var i = this.firstVisibleCol; i <= lastVisibleCol; i++) {
		if (this.itemHeaders[i] != null) {
			maxHeaderHeight = Math.max(maxHeaderHeight, this.itemHeaders[i].offsetHeight);
		}
		maxImageHeight = Math.max(maxImageHeight, this.itemImages[i].offsetHeight);
		maxTitleHeight = Math.max(maxTitleHeight, this.itemTitles[i].offsetHeight);
	}
	
	for (var i = this.firstVisibleCol; i <= lastVisibleCol; i++) {
		if ((maxImageHeight > 0) && !this.leftButton.exists() && !this.rightButton.exists()) {
			this.itemImageContainers[i].style.height = maxImageHeight + "px";
		}
		if (maxHeaderHeight > 0) {
			this.itemHeaderContainers[i].style.height = maxHeaderHeight + "px";
		}
		this.itemTitleContainers[i].style.height = maxTitleHeight + "px";
	}
};

S9MultiPackLayout.prototype.clampVisibleBounds = function(){
    this.leftButton.setVisible(true);
    this.rightButton.setVisible(true);
    
    var numProposedVisibleItems = this.numProposedVisibleItems();
	if(this.firstVisibleCol + numProposedVisibleItems >= this.itemChildren.length){
		this.firstVisibleCol = this.itemChildren.length - numProposedVisibleItems;
		this.rightButton.setEnabled(false);
	} else {
		this.rightButton.setEnabled(true);
	}
	
	if (this.firstVisibleCol <= 0) {
		this.firstVisibleCol = 0;
		this.leftButton.setEnabled(false);
	} else{
		this.leftButton.setEnabled(true);
	}
};

S9MultiPackLayout.prototype.getLeftButton = function(){
	return this.leftButton;
};

S9MultiPackLayout.prototype.getRightButton = function(){
	return this.rightButton;
};

S9MultiPackLayout.prototype.multiPackCreated = function(){
	return this.otherItems != null;
}

S9MultiPackLayout.prototype.numVisibleItems = function(){
    var visibleCount = 0;
	for (var i = 0; i < this.itemChildren.length; i++) {
		if(this.itemChildren[i].style.display != "none"){
    	  	visibleCount++;
    	}
    }
	return visibleCount;
};

S9MultiPackLayout.prototype.numProposedVisibleItems = function() {
    var widthAvailable = this.itemRow.offsetWidth;
	var result = Math.floor(Math.min(this.itemChildren.length, (widthAvailable / this.minimumItemWidth)));
	return Math.max(this.minimumItems, result);
};

S9MultiPackLayout.prototype.resize = function() {
   	this.clampVisibleBounds();
   	this.makeVisible();
};

S9MultiPackLayout.prototype.callbackFreshLoad = function(maximumItems) {
	this.maximumItems = maximumItems;
	this.init();
	this.freshLoad();
}

S9MultiPackLayout.prototype.previousPage = function() {
	var pageSize = this.numProposedVisibleItems();
    this.firstVisibleCol -= pageSize;
    this.clampVisibleBounds();
    this.makeVisible();
    return false;
};

S9MultiPackLayout.prototype.nextPage = function() {
    var pageSize = this.numProposedVisibleItems();
	this.firstVisibleCol += pageSize;
	this.clampVisibleBounds();
    this.makeVisible();
    return false;
};