/**
 * Custom inital load handler. Called when the carousel loads the initial
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadInitHandler
 */
var loadInitialItems = function(type, args) 
{	

	var start = args[0];
	var last = args[1]; 
	var first_item = parseInt(document.getElementById('first_item').value);
	
//	alert(first_item);
	
	// fetch twice the number for caching. images are create once.
	var selectedModele = document.getElementById( 'modeleSelect' );
	var selectedMatiere = document.getElementById( 'matiereSelect' );
	var selectedPrix = document.getElementById( 'prixSelect' );
	var selectedPierre = document.getElementById( 'pierreSelect' );
	var selectedEvenement = document.getElementById( 'evenementSelect' );

// Gestion Affichage Modele
	if(selectedModele.options[ selectedModele.selectedIndex ].value != 'init')
	{ // SI Modele selectionné
		// affichage bloc Lien modele Selectionné
		document.getElementById( 'divModeleSelected' ).style.display = 'block';
		// affichage du modele selectionné dans le lien
		document.getElementById( 'divModeleSelected' ).getElementsByTagName('a')[0].innerHTML = selectedModele.options[ selectedModele.selectedIndex ].text;
		// masquage select modele
		document.getElementById( 'divModeleSelect' ).style.display = 'none';
	}
	else
	{ // SI pas de modele selectionné
		// affichage select modele
		document.getElementById( 'divModeleSelect' ).style.display = 'block';
		// masquage bloc lien modele selectionné
		document.getElementById( 'divModeleSelected' ).style.display = 'none';
	}
	
// Gestion Affichage Matiere
	if(selectedMatiere.options[ selectedMatiere.selectedIndex ].value != 'init')
	{ // SI Matiere selectionné
		document.getElementById( 'divMatiereSelected' ).style.display = 'block';
		document.getElementById( 'divMatiereSelected' ).getElementsByTagName('a')[0].innerHTML = selectedMatiere.options[ selectedMatiere.selectedIndex ].text;
		document.getElementById( 'divMatiereSelect' ).style.display = 'none';
	}
	else
	{ // SI pas de matiere selectionné
		document.getElementById( 'divMatiereSelect' ).style.display = 'block';
		document.getElementById( 'divMatiereSelected' ).style.display = 'none';
	}	
	
// Gestion Affichage Prix
	if(selectedMatiere.options[ selectedPrix.selectedIndex ].value != 'init')
	{ // SI Prix selectionné
		document.getElementById( 'divPrixSelected' ).style.display = 'block';
		document.getElementById( 'divPrixSelected' ).getElementsByTagName('a')[0].innerHTML = selectedPrix.options[ selectedPrix.selectedIndex ].text;
		document.getElementById( 'divPrixSelect' ).style.display = 'none';
	}
	else
	{ // SI pas de Prix selectionné
		document.getElementById( 'divPrixSelect' ).style.display = 'block';
		document.getElementById( 'divPrixSelected' ).style.display = 'none';
	}	
	
// Gestion Affichage Pierre
	if(selectedMatiere.options[ selectedPierre.selectedIndex ].value != 'init')
	{ // SI Pierre selectionné
		document.getElementById( 'divPierreSelected' ).style.display = 'block';
		document.getElementById( 'divPierreSelected' ).getElementsByTagName('a')[0].innerHTML = selectedPierre.options[ selectedPierre.selectedIndex ].text;
		document.getElementById( 'divPierreSelect' ).style.display = 'none';
	}
	else
	{ // SI pas de Pierre selectionné
		document.getElementById( 'divPierreSelect' ).style.display = 'block';
		document.getElementById( 'divPierreSelected' ).style.display = 'none';
	}	

// Gestion Affichage Prix selon Modele et Matiere
	if(selectedModele.options[ selectedModele.selectedIndex ].value != 'init' || selectedMatiere.options[ selectedMatiere.selectedIndex ].value != 'init')
	{ // SI modele ou matiere selectionné
		if(document.getElementById( 'divPrixSelected' ).style.display != 'block')
		{ // SI bloc lien Prix masqué <=> pas de prix selectionné
			document.getElementById( 'divPrixSelect' ).style.display = 'block';
		}
	}
	else
	{
		selectedPrix.selectedIndex = 0;
		document.getElementById( 'divPrixSelect' ).style.display = 'none';
		
	}

// Gestion Affichage Pierre selon Matiere
	if(selectedMatiere.options[ selectedMatiere.selectedIndex ].value == '2' || selectedMatiere.options[ selectedMatiere.selectedIndex ].value == '7' || selectedMatiere.options[ selectedMatiere.selectedIndex ].value == '8')
	{ // SI matiere = Or et Pierre , Id = 2
	  // SI matiere = Argent et Pierre , Id = 7
	  // SI matiere = Plaqué Or et Pierre , Id = 8
		if( document.getElementById( 'divPierreSelected' ).style.display != 'block' )
		{ // SI bloc lien Pierre masqué <=> pas de prix selectionné
		
			$.get("/produit/selectPierre",
				{ id_matiere: selectedMatiere.options[ selectedMatiere.selectedIndex ].value },
				function(data){
					//$("select#pierreSelect").html("");
					$("select#pierreSelect").html(data);
				}
			);

			$( 'divPierreSelect' ).show();
			
		}
	}
	else
	{
		selectedPierre.selectedIndex = 0;
		document.getElementById( 'divPierreSelect' ).style.display = 'none';
	}	

	

	
	makeRequest(this, 'galerie', 
		selectedModele.options[ selectedModele.selectedIndex ].value, 
		selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
		selectedPrix.options[ selectedPrix.selectedIndex ].value,
		selectedPierre.options[ selectedPierre.selectedIndex ].value,
		selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
		start, (last-start+1) * 2);	

	// Illustrates setting the size during the load. Set silent parameter to true
	//this.setProperty("size", 2);
	this.setProperty("firstVisible", first_item);
	document.getElementById('first_item').value = 1;

};

/**
 * Custom load next handler. Called when the carousel loads the next
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadNextHandler
 */
var loadNextItems = function(type, args) 
{

	var start = args[0];
	var last = args[1];
	var alreadyCached = args[2];
	
	var selectedModele = document.getElementById( 'modeleSelect' );
	var selectedMatiere = document.getElementById( 'matiereSelect' );
	var selectedPrix = document.getElementById( 'prixSelect' );
	var selectedPierre = document.getElementById( 'pierreSelect' );
	var selectedEvenement = document.getElementById( 'evenementSelect' );
	
	if(!alreadyCached) 
	{
		makeRequest(this, 'galerie', 
			selectedModele.options[ selectedModele.selectedIndex ].value, 
			selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
			selectedPrix.options[ selectedPrix.selectedIndex ].value,
			selectedPierre.options[ selectedPierre.selectedIndex ].value,
			selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
			start, (last-start+1) * 2);
	}
//	this.setProperty("size", document.getElementById( 'numResultsAvailable' ).value , true);
//	this.setProperty("size", 7 , true);
};

/**
 * Custom load previous handler. Called when the carousel loads the previous
 * set of data items. Specified to the carousel as the configuration
 * parameter: loadPrevHandler
 */
var loadPrevItems = function(type, args) 
{
	var start = args[0];
	var last = args[1]; 
	var alreadyCached = args[2];
	
	var selectedModele = document.getElementById( 'modeleSelect' );
	var selectedMatiere = document.getElementById( 'matiereSelect' );
	var selectedPrix = document.getElementById( 'prixSelect' );
	var selectedPierre = document.getElementById( 'pierreSelect' );
	var selectedEvenement = document.getElementById( 'evenementSelect' );
	

	
	
	if(!alreadyCached) 
	{
		makeRequest(this, 'galerie', 
			selectedModele.options[ selectedModele.selectedIndex ].value, 
			selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
			selectedPrix.options[ selectedPrix.selectedIndex ].value,
			selectedPierre.options[ selectedPierre.selectedIndex ].value,
			selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
			start, (last-start+1) * 2);
	}
};

/**
 * Custom button state handler for enabling/disabling button state. 
 * Called when the carousel has determined that the previous button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: prevButtonStateHandler
 */
var handlePrevButtonState = function(type, args) 
{

	var enabling = args[0];
	var leftImage = args[1];
	if(enabling) {
		leftImage.src = "/images/left-enabled.gif";	
	} else {
		leftImage.src = "/images/left-disabled.gif";	
	}
};

var handleNextButtonState = function(type, args) 
{
	
	var enabling = args[0];
	var rightImage = args[1];
	
	if(enabling) {
		rightImage.src = "/images/right-enabled.gif";
	} else {
		rightImage.src = "/images/right-disabled.gif";
	}
	
};

var showButtons = function(type, args) {
	YAHOO.util.Dom.setStyle("next-arrow", "visibility", "visible");
	YAHOO.util.Dom.setStyle("prev-arrow", "visibility", "visible");
};


/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'dhtml-carousel'.) See the
 * HTML code below.
 */
var carousel; // for ease of debugging; globals generally not a good idea

var pageLoad = function() 
{	
	var nb_produits = parseInt(document.getElementById('nb_produits').value);
	var first_item = parseInt(document.getElementById('first_item').value);

	var selectedModele = document.getElementById( 'modeleSelect' );
	var selectedMatiere = document.getElementById( 'matiereSelect' );
	var selectedPrix = document.getElementById( 'prixSelect' );
	var selectedPierre = document.getElementById( 'pierreSelect' );
	var selectedEvenement = document.getElementById( 'evenementSelect' );
	
	var lienModele = document.getElementById( 'divModeleSelected' ).getElementsByTagName('a')[0];
	var lienMatiere = document.getElementById( 'divMatiereSelected' ).getElementsByTagName('a')[0];
	var lienPrix = document.getElementById( 'divPrixSelected' ).getElementsByTagName('a')[0];
	var lienPierre = document.getElementById( 'divPierreSelected' ).getElementsByTagName('a')[0];
	
	var raz = document.getElementById( 'btn-raz-carrousel' );
	
  if ( selectedModele ) {
  		selectedModele.onchange = function() {
  			selectedEvenement.selectedIndex = 0;
  			//	carousel.reload();

	 		makeRequestcount(carousel, 'getNbProduits',
				selectedModele.options[ selectedModele.selectedIndex ].value,
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8);

  		}
  }
  if ( lienModele ) {
  		lienModele.onclick = function() {
  				selectedModele.selectedIndex = 0;
  			//	carousel.reload();
  			
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }  
  
  if ( selectedMatiere ) {
  		selectedMatiere.onchange = function() {
  				selectedEvenement.selectedIndex = 0;
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  
  }
  if ( lienMatiere ) {
  		lienMatiere.onclick = function() {
  				selectedMatiere.selectedIndex = 0;
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }   
  
  if ( selectedPrix ) {
  		selectedPrix.onchange = function() {
  				selectedEvenement.selectedIndex = 0;
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }
  if ( lienPrix ) {
  		lienPrix.onclick = function() {
  				selectedPrix.selectedIndex = 0;
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }   
 
  if ( selectedPierre ) {
  		selectedPierre.onchange = function() {
  				selectedEvenement.selectedIndex = 0;				
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }
  if ( lienPierre ) {
  		lienPierre.onclick = function() {
  				selectedPierre.selectedIndex = 0;
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }    
  
  
  
if ( selectedEvenement ) {
  		selectedEvenement.onchange = function() {
				
				selectedModele.selectedIndex = 0;
				selectedMatiere.selectedIndex = 0;
				selectedPrix.selectedIndex = 0;
				selectedPierre.selectedIndex = 0;
				
  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }
  
  
  if ( raz ) {
  		raz.onclick = function() {

  			//	carousel.reload();
	 		makeRequestcount(carousel, 'getNbProduits', 
				selectedModele.options[ selectedModele.selectedIndex ].value, 
				selectedMatiere.options[ selectedMatiere.selectedIndex ].value,
				selectedPrix.options[ selectedPrix.selectedIndex ].value,
				selectedPierre.options[ selectedPierre.selectedIndex ].value,
				selectedEvenement.options[ selectedEvenement.selectedIndex ].value,
				1, 8); 
  		}
  }  
  

	carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
		{
			numVisible:        4,
			animationSpeed:    0.8,
			scrollInc:         4,
			size:              nb_produits,
			loadInitHandler:   loadInitialItems,
			prevElement:       "prev-arrow",
			nextElement:       "next-arrow",
			loadNextHandler:   loadNextItems,
			loadPrevHandler:   loadPrevItems,
			prevButtonStateHandler:   handlePrevButtonState,
			nextButtonStateHandler:   handleNextButtonState
		//	firstVisible: first_item
		}
	);

};

YAHOO.util.Event.addListener(window, 'load', pageLoad);

/**
 * Called via the YUI Connection manager (see makeRequest).
 */
var handleSuccess = function(callbackResponse)
{

 //alert( callbackResponse.responseText );

		var start = callbackResponse.argument[0];
		var numResults = callbackResponse.argument[1];
		var carousel = callbackResponse.argument[2];
	
  	if ( callbackResponse.responseText !== undefined ) {
				var theTrip = eval( '(' + callbackResponse.responseText + ')' );
				
				for( var i=0; i< theTrip.ResultSet.totalResultsReturned; i++ ) {
						var result = theTrip.ResultSet.Result[i];
						carousel.addItem( start+i, fmtTripInnerHTML(result) );
				}
				showButtons();
    }
    // fonction definie dans sifr-config.js
    nomProduitCarrousel();
    
};



var handleSuccessCount = function(callbackResponse)
{

		var carousel = callbackResponse.argument[0];
		var tri_mod = callbackResponse.argument[1];
		var tri_mat = callbackResponse.argument[2];
		var tri_prix = callbackResponse.argument[3];
		var tri_pierre = callbackResponse.argument[4];
		var tri_event = callbackResponse.argument[5];
		
		
  	if ( callbackResponse.responseText !== undefined ) {
				var theTrip = eval( '(' + callbackResponse.responseText + ')' );
				
				carousel.setProperty("size", theTrip.ResultSet.NbProduits, false);
  			makeRequest( carousel, 'produit/getNbProduits', tri_mod, tri_mat, tri_prix, tri_pierre, tri_event, 1, 8 );	
				
    }
    
};



/**
 * Since carousel.addItem uses an HTML string to create the interface
 * for each carousel item, this method takes an individual trip plan
 * result and cobbles together HTML for the innerHTML argument.
 */
var fmtTripInnerHTML = function(result) {
	divPastille = "";
	classPastille = "";
	if( result.Nouveaute == 1 ){
		divPastille = 'Nouveaute';
		classPastille = ' nouveaute';
	}else if( result.Selection == 1 ){
		divPastille = 'Selection';
		classPastille = ' selection';		
	}

  	var tripInnerHTML = '<div class="pastille' + classPastille + '">' + divPastille + '</div><a href="' + result.Image.Lien + '"><img src="' + result.Image.Url + '" width="' + 195 + '" height="' + 149+ '"/><h4 class="nom-produit-carrousel">' + result.NomProduit + '</h4></a>';
  
		return tripInnerHTML;
	
};

var handleFailure = function(o)
{
     var result = o.status + " " + o.statusText;
     //alert("Transaction failed.  The error is: " + result);
};
  
/**
 * A utility function for invoking the YUI connection manager (Ajax)
 * with a URL that matches the Yahoo! developer network Trip Planner
 * APIs (see: http://developer.yahoo.com/travel/tripservice/V1/tripSearch.html)
 *
 * The callback object is the configuration object for the YUI Connection
 * manager. If this is successful, the 'handleSuccess' function is called.
 */
var makeRequest = function(carousel, url, tri_mod, tri_mat, tri_prix, tri_pierre, tri_event, start, numResults)
{

	var params = '?tri_modele=' + tri_mod + 
				'&tri_matiere=' + tri_mat + 
				'&tri_prix=' + tri_prix + 
				'&tri_pierre=' + tri_pierre + 
				'&tri_evenement=' + tri_event +	
				'&start=' + start + 
				'&results=' + numResults;
	
	//alert( params );

	var callback =
	{
  		success: handleSuccess,
  		failure: handleFailure,
  		argument: [start, numResults, carousel]
	};
	
	var sUrl = url + params; 
	YAHOO.util.Connect.asyncRequest("GET", sUrl, callback, null);
	
};

var makeRequestcount = function(carousel, url, tri_mod, tri_mat, tri_prix, tri_pierre, tri_event)
{

	var params = '?tri_modele=' + tri_mod + 
				'&tri_matiere=' + tri_mat + 
				'&tri_prix=' + tri_prix + 
				'&tri_pierre=' + tri_pierre + 
				'&tri_evenement=' + tri_event; 	
	
	var callback =
	{
  		success: handleSuccessCount,
  		failure: handleFailure,
  		argument: [carousel, tri_mod, tri_mat, tri_prix, tri_pierre, tri_event]
	};
	
	var sUrl = url + params; 
	YAHOO.util.Connect.asyncRequest("GET", sUrl, callback, null);
	
};