/************************* Main Content Area  ***********************************
Checks if the main content area is showing and either:

-Shrinks the menu, and shows the content area, then loads the content.
OR
-Hides the content, loads the new content, then fades it in.

*/
function SwapContent(div)
{
  new Ajax.Request(div, {
  method: 'post',
  onSuccess: swapSuccessFunc,
  onFailure:  swapFailureFunc
  });
  
}

function swapSuccessFunc(response){
    var container = $('innerContent');
    var content = response.responseText;
	$('menu').morph('height:210px; top:20px;');//Shrink the menu.
	if ($('contentArea').getStyle('visibility') == 'hidden'){
		//Content Area hidden, update content then fade in the whole area.
			container.update(content);
			$('contentArea').setOpacity(0);
			$('contentArea').setStyle({visibility: 'visible'});
			new Effect.Opacity(
			   'contentArea', { 
				  from: 0.0, 
				  to: 1.0,
				  duration: 1.0,
				  delay: 0.3
			}
			);
		}else{
			//Content Area showing, fade out old content, fade in new content.
			container.hide();
			container.update(content);
			container.appear({ duration: 0.5, delay: 0.1 });
		}

}

function swapFailureFunc(response){
	var container = $('innerContent');
     container.update("Error Loading Content");;   
}

/************************* Main Content Area REVERSE  ***********************************
The opposite the above function.

Hides the content and expands the menu.

*/
function HideContent()
{	
	$$('.activeMenu').invoke("removeClassName", 'activeMenu');//Remove any active menu classes.
	new Effect.Opacity(
	   'contentArea', { 
		  from: 1.0, 
		  to: 0.0,
		  duration: 0.5,
		  afterFinish:function() {$('contentArea').setStyle({visibility: 'hidden'});}    
	}
	);
	$('menu').morph('height:420px; top:-190px;', {delay:0.2});
	

}

/************************* Swap Any Div Content  ***********************************/
//Takes a div ID and a URL and loads the URL content into the div.
function SwapDivContent(div, content)
{
	var container = $(div);
	container.hide();
	new Ajax.Updater($(div), content, { method: 'get' });
	container.appear({ duration: 0.8, delay: 0.1 });
  
}


/************************* Set Active Menu Item  ***********************************/
//Takes a div and a CSS class for the 'active' menu item.
//Clears any currently active divs with the 'activeClass'.
//Sets the target div as 'active'.
function setActiveMenu(div, activeClass)
{
	$$('.'+ activeClass).invoke("removeClassName", activeClass);
	div.addClassName(activeClass); 
}

/************************* Set Active Team  ***********************************/
//Used to set DREAM TEAM menu item as active.
//Needed for a call in php where we can't use $('div');
function setActiveTeam(){
	$$('.activeMenu').invoke("removeClassName", "activeMenu");
	$('dreamLink').addClassName('activeMenu');
}

/************************* Show The Product Details Panel, and populate it  ***********************************/
//Takes a div ID and a URL and loads the URL content into the div.
function ShowDetails(content)
{
		
		new Ajax.Updater($('productDetails'), content, { method: 'get' });
		$('productDetails').appear({ duration: 0.5, delay:0.15});
		

}

/************************* Show The Product Details Panel, and populate it  ***********************************/
//Takes a div ID and a URL and loads the URL content into the div.
function HideDetails()
{
	$('productDetails').fade({ duration: 0.5});
}


function updateCollectionFilters(div){

	$(div).toggleClassName('activeCategory'); //switch on or off.
	
	
	var categoryString = '';
	var designerString = '';
	var i = 0;
		//Get the category list by checking the 'active categories'
		$$('.activeCategory').each(function(category){
			if (category.id != 'designerDiv'){
				if (i > 0){
					categoryString = categoryString + ', ' + category.id; 
				}else{
					categoryString = '' + category.id; //don't add a comma at the start of the first category.
				}
				i++;
			}
		});
	
	//Get the designer sort status.
	

	if ($('designerDiv').hasClassName('designerSort')){
		designerString = 'true';
		
	}
		
	var designerSortString = '&designer=' + designerString;
	var categoryCallString = 'collectionDisplay.php?category=' + categoryString + designerSortString;
	
	SwapDivContent('productsList', categoryCallString);
	
}


function toggleSort(div){
	//switch on or off.
	$(div).toggleClassName('designerSort');
	updateCollectionFilters(div);
}