/*
* CategoryUI class
* This will control display and function of the category UI component.  
*/

function CategoryUI(modelObj, displayElementId){
	this.displayEleId = displayElementId;
	this.model = modelObj;
	this.selectedCat = -1;
	
	// TODO: take this out, it is only a reminder that we need to do this in PHP.
	//this.model.categories['-1'] = {categoryName:"All Offers", categoryId:"-1",parentCategoryId:"false",couponIdList:couponIds, isSelected:true};
	//----------------------------------------------------
	
	// Put it into the global scope so I can call it from callback methods
	catui = this;
	this.model.registerEventListener("CategoryChange", this);	
}

CategoryUI.prototype.onCategoryChange = function(){
	this.drawCategoryList();
	// window.scroll(0,0);
}

CategoryUI.prototype.drawCategoryList = function(){
  		var catListDisplay = document.getElementById(this.displayEleId);
  		if(!catListDisplay) return false;
  		
  		removeChildElements(catListDisplay);
  		
  		var holder = document.createElement("div");
  		catListDisplay.appendChild(holder);
  		
  		var head = document.createElement("div");
  		head.style.position = "relative";
  		
  		var content = document.createElement("div");
  		content.id = "catListContent";
  		
  		var foot = false;
  		if (this.model.inIframe)
  		{
  			foot = document.createElement("div");
  		}	
  		
  		var hfbox = applyHeaderFooterBox(head,content,foot);
  		
  		holder.appendChild(hfbox);
  		
  		head.style.padding = "2px 0px 2px 0px";
  		head.style.textAlign = "center";
  		head.style.fontSize = "14px";
  		head.style.fontWeight = "bold";
  		head.appendChild(document.createTextNode("Categories"));
  		
  		if(!this.model.categories || !this.model.categories['-1']){
  			this.drawLoadingMessage();
  		}
  		else{
  			if (!this.model.inIframe)
  			{
	  			this.drawCategory("-1");
	  		}	
	  		else
	  		{
	  			if (this.model.categories[-1].isSelected && this.model.categories[1])
	  			{
	  				this.model.categories[-1].isSelected = false;
	  				this.model.categories[1].isSelected = true;
	  				this.model.categories[1].categoryName = "Show All";
	  				this.selectedCat = 1;
	  			}
	  		}	
	  		for(catId in this.model.categories){
	  			var cat = this.model.categories[catId];
	  			if(cat.parentCategoryId == 0 && catId != -1)
	  				this.drawCategory(catId);	
	  		}
  		}
  }
  
 CategoryUI.prototype.drawLoadingMessage = function(){
 	var catListContent = document.getElementById("catListContent");
 	var messageDiv = document.createElement("div");
 	messageDiv.style.fontSize = "14px";
 	messageDiv.style.fontWeight = "normal";
 	messageDiv.style.margin = "20px 0px";
 	messageDiv.style.textAlign = "center";
 	messageDiv.style.width = "100%";
 	
 	var loader = document.createElement("img");
 	loader.src = "/includes/templates/master/images/loader_small_red.gif";
 	//loader.style.cssFloat = "right";
 	//loader.style.styleFloat = "right";
 	
 	messageDiv.appendChild(loader);
 	messageDiv.appendChild(document.createTextNode(" Loading Categories"));
 	
 	catListContent.appendChild(messageDiv);
 }
  
 CategoryUI.prototype.drawCategory = function(catId){
  		var catListContent = document.getElementById("catListContent");
  		var holder = document.getElementById("catHolder_"+catId);
  		var catContent;
  		var subCatHolder;
  		var subCatContent;
  		var mmPre = '';
  		if (this.model.inIframe)
  		{
  			mmPre = "mm_";
  		}
  		
  		if(!holder){
  			holder = document.createElement("div");
  			holder.id = "catholder_"+catId;
  			catListContent.appendChild(holder);
  			catContent = document.createElement('div');
  			holder.appendChild(catContent);
  			subCatHolder = document.createElement('div');
  			holder.appendChild(subCatHolder);
  			subCatContent = document.createElement("div");
  			subCatHolder.appendChild(subCatContent);
  			subCatHolder.className = "subCatHolder";
  		}
  	
  		//subCatContent.style.border = "1px solid black";
  		for(var id in this.model.categories){
  			var cat = this.model.categories[id];
  			if((cat.parentCategoryId != catId && cat.categoryId != catId) || (cat.couponIdList.length <= 0 && cat.categoryId != -1)) continue;
  			
  			var uniqueOffers = new Array();
  			var currentOffer;
  			// alert(cat.couponIdList.length);
  			for (var i = 0; i < cat.couponIdList.length; i++)
  			{
  				currentOffer = this.model.coupons[cat.couponIdList[i]];
  				if (currentOffer)
  				{
  					uniqueOffers["x" + currentOffer.offerId] = true;
  				}	
  			}
  			var catCount = 0;
  			for (var i in uniqueOffers)
  			{
  				catCount++;
  			}	
  			
  			var container;
  			// If a subcat
  			if(cat.parentCategoryId == catId){
  				 container = document.createElement("div");
  				 subCatContent.appendChild(container);
  				 container.className = mmPre + "subCategoryHolder";
  				 if(cat.isSelected)
  				 	container.className = mmPre + "selectedSubCatHolder";
  				 	
  			}
  			// If a parent cat
  			else{
  				container = catContent;
  				 container.className = mmPre + "categoryHolder";
  				 if(cat.isSelected)
  				 	container.className = mmPre + "selectedCatHolder";
  			}
  			
  			container.onclick = new Function("catui.setSelectedCategory("+id+")");
	  		
	  		var iconText = document.createElement("div");
	  		container.appendChild(iconText);
	  		iconText.style.cssFloat="left";
	  		iconText.style.styleFloat = "left";
	  		iconText.style.margin = "1px 0px";
	  		
	  		if (this.model.inIframe)
	  		{
					iconText.appendChild(document.createTextNode(this.model.categories[id].categoryName + " (" + catCount + ")"));
	  		}
	  		else
	  		{
					var icon = document.createElement("img");
					icon.src = "/includes/templates/master/images/cat_"+id+".png";
					icon.style.height = "30px";
					icon.style.width = "30px";
					icon.align = "absmiddle";
					icon.style.margin = "0px 5px 0px 5px";
					if(cat.parentCategoryId == catId)
						icon.style.margin = "0px 5px 0px 15px";

					iconText.appendChild(icon);

					iconText.appendChild(document.createTextNode(this.model.categories[id].categoryName));

					var buttonWidth = 35;
					if (catCount > 99)
					{
						buttonWidth = 55;
					}	

					var countButton = getButton("gray", catCount, buttonWidth, false);
					container.appendChild(countButton);
					countButton.style.cssFloat = "right";
					countButton.style.styleFloat = "right";
					countButton.style.margin = "8px 5px 0px 0px";
				}  			

				var clear = document.createElement("div");
				clear.className = "clear";
				container.appendChild(clear);
  		}
  }
  
CategoryUI.prototype.setSelectedCategory = function(catId){
  	var current = this.model.categories[this.selectedCat];
  	current.isSelected = false;
  	current = this.model.categories[catId];
  	current.isSelected = true;
  	this.selectedCat = catId;
  	
  	this.model.setDisplayList(current.couponIdList);
  	this.drawCategoryList();
  	window.scroll(0,0);
  	
 }