
function fixGallery()
{
	if(!YAHOO.util.Dom.hasClass(document.body, "yui-skin-sam"))
		YAHOO.util.Dom.addClass(document.body, "yui-skin-sam");

	
	if(YAHOO.util.Dom.get("frmTemplatesFilters"))
	{
		
		YAHOO.util.Dom.getElementsBy(
				
					function(elem)
					{
						if(elem.type != "checkbox")
							return false;
						return true;
					}, 
					"input", "frmTemplatesFilters",
					function(elem)
					{
						YAHOO.util.Event.on(elem, "click", function(){YAHOO.util.Dom.get("frmTemplatesFilters").submit();});
					}
		
		);
		
		
		var arrCheckBlocks = new Array();
		var arrClasses     = new Array();
		var arrBoxHeight   = new Array(); 
		arrClasses[1]   = "expanded";
		arrClasses[-1]  = "collapsed";
		var arrActiveBoxClasses = new Array();
		YAHOO.util.Dom.getElementsBy(function(elem){return true;}, "a", "frmTemplatesFilters", 
				function(elem)
				{
					var ckeckBoxBlockId = null;
					if(elem.innerHTML.indexOf("Number") != -1)
						ckeckBoxBlockId = "checkNumberPhotos";
					else if (elem.innerHTML.indexOf("Format") != -1)
						ckeckBoxBlockId = "checkFormat";
					else if (elem.innerHTML.indexOf("Size") != -1)
						ckeckBoxBlockId = "checkSize";
					else if (elem.innerHTML.indexOf("Colors") != -1)
						ckeckBoxBlockId = "checkColors";
					
					if(ckeckBoxBlockId == null)
						return;	

					arrCheckBlocks[elem.innerHTML]      = ckeckBoxBlockId;
					arrActiveBoxClasses[elem.innerHTML] = 1;
					YAHOO.util.Dom.addClass(elem, arrClasses[1]);
					
					
					//YAHOO.util.Dom.setStyle(ckeckBoxBlockId, "height", "100%");
					
					var region = YAHOO.util.Dom.getRegion(ckeckBoxBlockId);

					arrBoxHeight[ckeckBoxBlockId] = region.bottom - region.top;
					
					//arrBoxHeight[ckeckBoxBlockId] = YAHOO.util.Dom.getStyle(ckeckBoxBlockId, "height").replace("px", "");
	
					
					//alert(YAHOO.util.Dom.getStyle(ckeckBoxBlockId, "height").replace("px", ""));
					
					YAHOO.util.Dom.setStyle(ckeckBoxBlockId, "position", "relative");
					YAHOO.util.Dom.setStyle(ckeckBoxBlockId, "visibility", "visible");
					YAHOO.util.Dom.setStyle(ckeckBoxBlockId, "overflow", "hidden");
					YAHOO.util.Dom.setStyle(ckeckBoxBlockId, "float", "left");

					YAHOO.util.Event.on(elem, "click", function(evt){
						YAHOO.util.Event.preventDefault(evt);
						

						for(var key in arrClasses)
							YAHOO.util.Dom.removeClass(this, arrClasses[key]);
						
						arrActiveBoxClasses[this.innerHTML] = (-1) * arrActiveBoxClasses[this.innerHTML];
						YAHOO.util.Dom.addClass(this, arrClasses[arrActiveBoxClasses[this.innerHTML]]);
						
						
						var byHeight = arrActiveBoxClasses[this.innerHTML] * 20;

						var attributes = null;
						if(byHeight < 0)
						{
							attributes = {
									height: {by:byHeight, to:0}
										};							
							
						}
						else
						{
							attributes = {
									height: { from:0, to:arrBoxHeight[arrCheckBlocks[this.innerHTML]]}
										};
						}
						//alert(arrCheckBlocks[this]);
						var anim = new YAHOO.util.Anim(arrCheckBlocks[this.innerHTML], attributes);
						anim.duration = 0.2;

						anim.animate();
						
					})
					
					
				});	
	}
	
	
	var arrHolders = YAHOO.util.Dom.getElementsByClassName("image-holder", "div");
	
	if(arrHolders.length == 0)
		return;	
	
	var arrImages = new Array();
	var maxHeight = 0;
    for(var i=0; i < arrHolders.length ; i++)
    {
		var imageElement = YAHOO.util.Dom.getElementsBy(function(elem){return true;}, "img", arrHolders[i], 
		function(elem)
		{
			if(maxHeight < elem.height)
				maxHeight = elem.height;

			arrImages[i] = elem;
		});  
    }
	
	for(var i=0; i < arrHolders.length ; i++)
	{
		YAHOO.util.Dom.setStyle(arrHolders[i], "height", maxHeight + "px");	
	}
	for(var i=0; i < arrImages.length ; i++)
	{
		YAHOO.util.Dom.setStyle(arrImages[i], "margin-top", Math.ceil((maxHeight - arrImages[i].height) /2) + "px");
	}
		
	YAHOO.util.Dom.getElementsBy(function(elem){return true;}, "li", "categories-holder", 
		function(elem)
		{
			YAHOO.util.Dom.setStyle(elem, "height", maxHeight + 80 + "px");
			
			
			
			YAHOO.util.Event.on(elem, "mouseover", function()
					{
						YAHOO.util.Dom.addClass(this, "hover");
						
						YAHOO.util.Dom.getElementsByClassName("fastpreview", "p", this, 
								function(prevElem)
								{
									//YAHOO.util.Dom.setStyle(this, "display", "block");
									
								}
							);	
						
						
					})
			YAHOO.util.Event.on(elem, "mouseout", function()
					{
						YAHOO.util.Dom.removeClass(this, "hover");
						YAHOO.util.Dom.getElementsByClassName("fastpreview", "p", this, 
								function()
								{
									//YAHOO.util.Dom.setStyle(this, "display", "none");
								}
							);	
						
					})

					
				YAHOO.util.Dom.getElementsByClassName("image-holder", "div", elem,function(){
					YAHOO.util.Event.on(this, "mouseover", function(){
						YAHOO.util.Dom.getElementsByClassName("fastpreview", "p", elem,function(){
							YAHOO.util.Dom.setStyle(this, "display", "block");

						});
						
					});
				}); 		
					
			YAHOO.util.Dom.getElementsByClassName("image-holder", "div", elem,function(){
				YAHOO.util.Event.on(this, "mouseout", function(){
					YAHOO.util.Dom.getElementsByClassName("fastpreview", "p", elem,function(){
						YAHOO.util.Dom.setStyle(this, "display", "none");

					});
					
				});
			}); 		
					
					
			var arrBlocksToHideFastPrev = new Array("info-holder", "template-color-holder");		
			for(var classKey in arrBlocksToHideFastPrev)
			{
				YAHOO.util.Dom.getElementsByClassName(arrBlocksToHideFastPrev[classKey], "div", elem,function(){
					YAHOO.util.Dom.getElementsByClassName("fastpreview", "p", elem,function(){
						YAHOO.util.Dom.setStyle(this, "display", "none");
						YAHOO.util.Event.on(this, "mouseover", function(){
							YAHOO.util.Dom.setStyle(this, "display", "block");
						});
						YAHOO.util.Event.on(this, "mouseout", function(){
							YAHOO.util.Dom.setStyle(this, "display", "none");
						});	
						
					});
				}); 		
			}
		});
	
	
	YAHOO.util.Dom.getElementsByClassName("fastpreview", "p", "categories-holder", 
					function()
					{
						YAHOO.util.Dom.setStyle(this, "position", "relative");
						YAHOO.util.Dom.getElementsByClassName("fastpreviewlink", "a", this,
								function()
								{
									YAHOO.util.Event.on(this, "click", 
											function(evt)
											{
													mainTemplateId = this.id.replace("fast_", "");
			
													if(!arrDefaultTemplates[mainTemplateId])
													{
														for(var maiTemplateKey in arrTemplatesInfo)
														{
															if(arrTemplatesInfo[maiTemplateKey].Id != mainTemplateId)
																continue;
														
															arrDefaultTemplates[mainTemplateId] = arrTemplatesInfo[maiTemplateKey].ArrChildren[1];
															break;
														}
													}	
										
										
													YAHOO.util.Event.preventDefault(evt);
													var templId = this.id.replace("fast_", "");
													if(arrDefaultTemplates && arrDefaultTemplates[templId])
													{
														showFastPreviewPanel(arrDefaultTemplates[templId].Id);
														return;
													}
													else
														showFastPreviewPanel(templId);	
											}
									)
								}
						);
					}
	
				);	
	
	
	YAHOO.util.Dom.get("categories-holder").refresh;
	
	if(!YAHOO.util.Dom.get("fastPreviewHolder"))
		return;
	
	function showFastPreviewPanel(templateId)
	{
		if(arrFavorite != null)
		{
			if(arrFavorite.indexOf(templateId) != -1)
				YAHOO.util.Dom.setStyle("buttonAddToFavorites", "background-image", "url(/images/add_to_favorites_grey.gif)");
			else
				YAHOO.util.Dom.setStyle("buttonAddToFavorites", "background-image", "url(/images/add_to_favorites.gif)");
		}

		YAHOO.util.Dom.get("thumbHolder").innerHTML = '<img src = "/templates/fastpreview/' + templateId + '.jpg" />';
		
		var template = null;

		var htmlColorCode = "";
		var arrPreviewLinks = new Array();
		for(var maiTemplateKey in arrTemplatesInfo)
		{
			if(arrTemplatesInfo[maiTemplateKey].Id != mainTemplateId)
				continue;
			
			var childrenCounter = 0;
			for(var templateKey in arrTemplatesInfo[maiTemplateKey].ArrChildren)
			{
				childrenCounter++;
			}
			for(var templateKey in arrTemplatesInfo[maiTemplateKey].ArrChildren)
			{
				if(arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].Id == templateId)
					template = arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey];
				
				
				if(childrenCounter <= 1)
					continue;
				
				//alert(arrTemplatesInfo[maiTemplateKey].ArrChildren.length);
				
				htmlColorCode +='<a style="background:#' + arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].WebColor + '" id="preview-color-group-'+arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].Id+'"></a>';
				
				arrPreviewLinks.push("preview-color-group-"+arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].Id);
				
				
			}
			
			break;
		}			
		
		YAHOO.util.Dom.get("preview-colors-wrapper").innerHTML = htmlColorCode;
		YAHOO.util.Dom.get("preview-colors-wrapper").refresh;

		
		for(var i=0; i< arrPreviewLinks.length; i++)
		{
			if(arrPreviewLinks[i].replace("preview-color-group-", "") == template.Id)
			{
				YAHOO.util.Dom.setStyle(arrPreviewLinks[i], "border-color", "#896140");
			}
			YAHOO.util.Event.on(arrPreviewLinks[i], "click", function(){
				showFastPreviewPanel(this.id.replace("preview-color-group-", ""));
				});
			
			YAHOO.util.Event.on(arrPreviewLinks[i], "mouseover", function(){
				YAHOO.util.Dom.setStyle(this, "border-color", "#896140");
			});

			YAHOO.util.Event.on(arrPreviewLinks[i], "mouseout", function(){
				if(this.id.indexOf(template.Id) == -1)
				YAHOO.util.Dom.setStyle(this, "border-color", "#ccc");
			});
			
			
			
		}		
		
		
		
		var callback = 
		{
		    success: function(obj)
		    		{
							var response = eval('(' + obj.responseText + ')');
							
							if(!response)
								return;

							document.getElementById("buttonCustomize").href          = response.Url ;
							document.getElementById("templateName").innerHTML        = response.Name;
							document.getElementById("templateSubCategory").innerHTML = response.SubcategoryName;
							document.getElementById("templateType").innerHTML =response.Type + " card";
							document.getElementById("templateSize").innerHTML = response.Width + '\"' + " X " + response.Height + '\"' + "(w x h)";
							
							
							YAHOO.util.Dom.get("fastPreviewHolder").refresh;
							
							fastPreviewPanel.show();
		    		}
		};
		
		
		
		YAHOO.util.Connect.asyncRequest('GET', "/pages/AjaxManager.php?action=getTemplateFastPreviewInfo&templateId=" + templateId, callback)
		
	}
	
	
	var fastPreviewPanel = new YAHOO.widget.Panel("fastPreviewHolder", 
			{
				width: "500px",
				height: "380px",
				fixedcenter: true,
				close: true,
				underlay:"matte",
				draggable: true,
				zindex: 999,
				modal: false,
				visible: false
			});
			fastPreviewPanel.render(document.body);
			

	if(!arrTemplatesInfo)
		return;
	
	
	var arrDefaultTemplates = new Array();
	
	var colorBoxClicked = false;
	var mainTemplateId  = null;
	var templateId      = null;

	YAHOO.util.Dom.getElementsByClassName("color-square", "a", "content-holder", 
			function()
			{
		
		
				templateId     = this.id.substring(this.id.lastIndexOf("-"));
				mainTemplateId = this.id.replace(templateId, "");
				mainTemplateId = mainTemplateId.substring(mainTemplateId.lastIndexOf("-"));
				mainTemplateId = mainTemplateId.replace("-", "");
				templateId     = templateId.replace("-", "");
				if(mainTemplateId == templateId)
					YAHOO.util.Dom.setStyle(this, "border-color", "#896140");
		
		
				YAHOO.util.Event.on(this, "click", function(evt){
					YAHOO.util.Event.preventDefault(evt);
					colorBoxClicked = true;

					for(var maiTemplateKey in arrTemplatesInfo)
					{
						if(arrTemplatesInfo[maiTemplateKey].Id != mainTemplateId)
							continue;
						
						
						for(var templateKey in arrTemplatesInfo[maiTemplateKey].ArrChildren)
						{
							if(arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].Id != templateId)
								continue;
							
							YAHOO.util.Dom.getChildrenBy(YAHOO.util.Dom.getAncestorByTagName(this, "div"), function(elem){
								YAHOO.util.Dom.setStyle(elem, "border-color", "#ccc");
								return true;
							});  
							
							
							arrDefaultTemplates[mainTemplateId] = arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey];
							
							
							changeTemplate(true);
							YAHOO.util.Dom.setStyle(this, "border-color", "#896140");
							break;
						}
						
						break;
					}			
					
				});
		
				
				YAHOO.util.Event.on(this, "mouseout",function(){
					changeTemplate(true);
					if(this.id.indexOf(mainTemplateId + "-" +arrDefaultTemplates[mainTemplateId].Id) == -1)		
					{
						YAHOO.util.Dom.setStyle(this, "border-color", "#ccc");
					}	
					if(colorBoxClicked)
					{
						YAHOO.util.Dom.setStyle(this, "border-color", "#896140");
					}		
					
				});
				
				YAHOO.util.Event.on(this, "mouseover", 
						function(evt)
						{
							colorBoxClicked = false;
							templateId     = this.id.substring(this.id.lastIndexOf("-"));
							mainTemplateId = this.id.replace(templateId, "");
							mainTemplateId = mainTemplateId.substring(mainTemplateId.lastIndexOf("-"));
							mainTemplateId = mainTemplateId.replace("-", "");
							templateId     = templateId.replace("-", "");
							YAHOO.util.Dom.setStyle(this, "border-color", "#896140");
							changeTemplate(false);
						}
				);
				
				
				function changeTemplate(changeToDefault)
				{
					
					for(var maiTemplateKey in arrTemplatesInfo)
					{
						if(arrTemplatesInfo[maiTemplateKey].Id != mainTemplateId)
							continue;
						
						
						if(changeToDefault == true)
						{
							
							YAHOO.util.Dom.getElementsBy(function(elem){
								if(elem.id.indexOf("main-link-template-"+mainTemplateId) == -1)
									return false;
								
								YAHOO.util.Dom.getElementsBy(
										function(imgElem){return true;}, "img", elem, function(imgElem){
											imgElem.src = "/templates/" + arrDefaultTemplates[mainTemplateId].Thumb;
											
											YAHOO.util.Dom.get("link-template-" + mainTemplateId).href = arrDefaultTemplates[mainTemplateId].Url;
											YAHOO.util.Dom.get("link-template-" + mainTemplateId).innerHTML = arrDefaultTemplates[mainTemplateId].Name;
											
											
											var link = YAHOO.util.Dom.getAncestorByTagName(imgElem, "a");
											link.href = arrDefaultTemplates[mainTemplateId].Url;
											
										});
										
								
								
								return false;
							}, "a", "categories-holder"); 
							
							
							return;
						}
						
						if(!arrDefaultTemplates[mainTemplateId])
						{
							arrDefaultTemplates[mainTemplateId] = arrTemplatesInfo[maiTemplateKey].ArrChildren[1];
						}

						for(var templateKey in arrTemplatesInfo[maiTemplateKey].ArrChildren)
						{
							if(arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].Id != templateId)
								continue;
							
							var thumb = arrTemplatesInfo[maiTemplateKey].ArrChildren[templateKey].Thumb;
							
							
							YAHOO.util.Dom.getElementsBy(function(elem){
								if(elem.id.indexOf("main-link-template-"+mainTemplateId) == -1)
									return false;
								
								YAHOO.util.Dom.getElementsBy(
										function(imgElem){return true;}, "img", elem, function(imgElem){
											imgElem.src = "/templates/" + thumb;
										});
										
								
								
								return false;
							}, "a", "categories-holder"); 
							
							
							break;
						}
						
						break;
					}
					
				}

			}

		);	
	
	
	for(var i=0; i<arrTemplatesInfo.length; i++)
	{
		for(var key in arrTemplatesInfo[i].ArrChildren)
		{
			document.getElementById("hidden-template-src").src = "/templates/" + arrTemplatesInfo[i].ArrChildren[key].Thumb;
		}
	}
	
	
	
	
	
}
	

