

/* 
	Simon-Pierre Alepin 
 	simon@bamstrategy.com
	spalepin@gmail.com
	v 1.2	
*/	

var FIRST_LOAD = true;

var liList;
var liLen;
var idTabs = new Array();
var currentIndexTab = -1;

var ajaxPages = [ 'variety.php', 'health-wellness-weight-management.php', 'main-course-favourites.php', 'meal-solutions-and-ideas.php' ];


var sections = {};
sections.variety = [ 'spaghetti', 'macaroni', 'linguine', 'fusilli', 'penne', 'rotini', 'spaghettini', 'bows', 'lasagne', 'yolk_free_noodles' ];
sections.health  = [ 'lower_calories', 'lower_fat', 'fibre_all_stars', 'hearth_healthy', 'superstar_ingredients' ];
sections.main    = [ 'pasta_with_poultry', 'pasta_with_seafood', 'pasta_with_meat', 'vegetarian_pasta', 'cold_pasta_salad' ];
sections.meal    = [ 'fast_and_easy', 'kid_approved', 'lunchbox_ideas', 'entertaining_and_gourmet', 'pasta_world', 'holiday_recipes' ];
sections.tabs    = [ 'variety', 'health', 'main', 'meal' ];

var sectionOrder = {};
sectionOrder.variety = 0;
sectionOrder.health  = 1;
sectionOrder.main    = 2;
sectionOrder.meal    = 3;

function initTabs()
{
	//MM_preloadImages('/en_CA/images/n_01_on.gif','/en_CA/images/n_07_on.gif','/en_CA/images/n_02_on.gif','/en_CA/images/n_08_on.gif','/en_CA/images/n_03_on.gif','/en_CA/images/n_09_on.gif','/en_CA/images/n_04_on.gif','/en_CA/images/n_10_on.gif','/en_CA/images/n_05_on.gif','/en_CA/images/n_06_on.gif','/en_CA/images/n_11_on.gif','/en_CA/images/newsbottom_bt_on.jpg');

	liList = $('tab_menu').getElements('li');
	liLen  = liList.length;
	var i = 0;
	while( i < liLen )
	{		
		removeLinkFromLi( liList[ i ] );
		idTabs[ i ] = liList[ i ].get( 'name' );
		var currentIndex = i;
		liList[ i ].currentIndex = i;
		liList[ i ].addEvent('click', function()
		{
			showTab( this.currentIndex );
		});
		i++;
	}
	
	var data = parseUrl();
	
	if( $defined( CATEGORY ) && $defined( SECTION )  )
	{
		showTab( sectionOrder[ SECTION ], CATEGORY );		
		//showRight( sectionOrder[ SECTION ], data.category, section[ data.section ].indexOf( data.category ) );
	}
	else
	{
		showTab( 0 );
	}
}

function parseUrl()
{
	//Simply parses the current url and returns 
	var url = new URI( window.location.href );
	var data = url.get( 'data' );
	return data;
}


function removeLinkFromLi( element )
{
	var image = $( element ).getElement( 'img' );
	$( element ).getElement( 'a' ).destroy();
	$( element ).adopt( image );	
}

function showTab( id, category )
{
	currentIndexTab = id;
	first_active = false;
	if( !$defined( category ) ) 
	{
		
		var currentCat = sections.tabs[ id ];
		var tmpArry    = sections[ currentCat ];
		first_active = true;
		
		category = tmpArry[ 0 ];			
	}
	$( 'tab_menu' ).setStyle( 'background-image', 'url(/includes/images/' + LOCALE + '/recipes/bg_' + idTabs[ id ] + '.jpg)' );
	$( 'tab_menu' ).setStyle( 'background-repeat', 'no-repeat' );
	
	showAjaxLoader();
	var req = new Request(
	{
		method     : 'POST',
		url        : '/' + LOCALE + '/recipes/ajax/' + ajaxPages[ id ] + '?type=both&category=' + category,
		data       : {},			
		onComplete : onRecipeRequestComplete
	}).send();
	
}

function removeActiveLink()
{
	//Get all links in the ul and remove active class
	//Active class highlights the category were in
	$$( 'ul.text_list li a.active' ).removeClass( 'active' );
}

function setActiveLink( i )
{
	//Get all links in the ul and apply active class
	//Active class highlights the category were in
	var list = $$( 'ul.text_list li a' );
	var len  = list.length;
	list[ i ].addClass( 'active' );
}

function showRight( id, category, element )
{
	//Loading the content that appears in the right tab
	//Once the ajax call is done, calls onRecipeRightRequestComplete which will then animate the panel

	currentIndexTab = id;
	if( !$defined( category ) ) 
	{
		
		var currentCat = sections.tabs[ id ];
		//alert( currentCat + ' '+sectionOrder[ currentIndexTab ] );
		var tmpArry    = sections[ currentCat ];
		var first_active = true;
		
		category = tmpArry[ 0 ];			
	}

	
	$( 'tab_menu' ).setStyle( 'background-image', 'url(/includes/images/'+LOCALE+'/recipes/bg_'+idTabs[ id ]+'.jpg)' );
	$( 'tab_menu' ).setStyle( 'background-repeat', 'no-repeat' );
	
	showRightAjaxLoader();
	var req = new Request(
	{
		method     : 'POST',
		url        : '/' + LOCALE + '/recipes/ajax/' + ajaxPages[ id ] + '?type=right&category=' + category,
		data       : {},			
		onComplete : onRecipeRightRequestComplete
	}).send();
	removeActiveLink();
	if( first_active ) 
	{		
		setActiveLink( 0 );
	}
	else
	{
		setActiveLink( element );
	}
}

function showAjaxLoader()
{
	//Sets the loading icon in the entire panel_container area
	setAjaxLoader( 'panel_content' );
}

function showRightAjaxLoader()
{
	//Sets the loading icon in the right panel container
	setAjaxLoader( 'right_panel' );
}

function setAjaxLoader( id )
{
	$( id ).set( 'html', '<table width="100%" height="485" id="loader"><tr><td align="center" valign="middle" width="100%" height="485"><img src="/includes/images/common/loader.gif" /></td></tr></table>' );
}

function animatePanel()
{
	var recipesList = $('right_panel').getElements('ul');
	var len = recipesList.length;
	//alert(len);

	for( i=0;i<len;i++ )
	{
		//recipesList[i].setStyle( 'opacity', 0 );
		recipesList[i].addEvent( 'mouseover', function()
		{
			this.set( 'tween', {duration:200} ).tween( 'background-color', '#f1d694' );
		});
		recipesList[i].addEvent( 'mouseout', function()
		{
			this.set( 'tween', {duration:400} ).tween( 'background-color', '#f7f1e1' );
		});	
		recipesList[i].addEvent( 'click', function()
		{
			var url = $(this).getElement( 'a' ).get( 'href' );
			window.location = url;
		});			
	}	
	
	$( 'panel_content' ).set( 'tween', { duration:650, transition: Fx.Transitions.Cubic.easeOut  } );
	$( 'panel_content' ).tween( 'top', [ -825, 0 ] );
	
	$( 'left_panel' ).set( 'tween', {duration:500} ).tween( 'opacity', [0,1] );
	$( 'right_panel' ).set( 'tween', {duration:500, onComplete:function(){/*showRecipes()*/}} ).tween( 'opacity', [0,1] );
}

function animateRightPanel()
{
	var recipesList = $( 'right_panel' ).getElements( 'ul' );
	var len         = recipesList.length;
	var i           = 0;
	while( i < len )
	{
		//recipesList[i].setStyle( 'opacity', 0 );
		recipesList[i].addEvent( 'mouseover', function()
		{
			this.set( 'tween', {duration:200} ).tween( 'background-color', '#f1d694' );
		});
		recipesList[i].addEvent( 'mouseout', function()
		{
			this.set( 'tween', {duration:400} ).tween( 'background-color', '#f7f1e1' );
		});		
		recipesList[i].addEvent( 'click', function()
		{
			var url = $(this).getElement( 'a' ).get( 'href' );
			window.location = url;
		});
		i++;
	}	
	
	$( 'right_panel' ).set( 'tween', {duration:500} ).tween( 'opacity', [0,1] );
	$( 'right_panel' ).set( 'tween', { duration:650, transition: Fx.Transitions.Cubic.easeOut  } );
	$( 'right_panel' ).tween( 'top', [ -825, 0 ] );	
}

function showRecipes()
{
	var recipesList = $( 'right_panel' ).getElements( 'ul' );
	var len = recipesList.length;
	var start = 50;
	var i     = 0;
	while( i < len )
	{
		recipesList[ i ].setStyle( 'filter', '' ); 
		recipesList[ i ].set( 'tween', { duration:start } ).tween( 'opacity', [0,0.99] );
		start +=100;
		i++;		
	}
}

function showPanel( html )
{
	$( 'panel_content' ).setStyle( 'top', -825 );
	$( 'panel_content' ).set( 'html', html );
	var data = parseUrl();
	if( $defined( CATEGORY ) && $defined( SECTION ) && FIRST_LOAD == true )
	{
		removeActiveLink();
		setActiveLink( sections[ SECTION ].indexOf( CATEGORY ) );
		FIRST_LOAD = false;
	}
	else
	{
		setActiveLink( 0 );
	}
	animatePanel();
}
function showRightPanel( html )
{
	$( 'right_panel' ).setStyle( 'top', -825 );
	$( 'right_panel' ).set( 'html', html );
	animateRightPanel();

}
function onRecipeRequestComplete( html )
{
	$( 'loader' ).set( 'tween', {duration:500, onComplete:function(){showPanel( html )}} ).tween( 'opacity', [1,0] );
}

function onRecipeRightRequestComplete( html )
{
	$( 'loader' ).set( 'tween', {duration:500, onComplete:function(){showRightPanel( html )}} ).tween( 'opacity', [1,0] );
}
