var popupProducts = Class.create({
	
	initialize:function( caddyEnCours ,shopid ){
		this.shopid = shopid;
		this.time = null;
		this.ouvreLa = null;
		this.clearTimoutEtFerme = null;
		this.makePopupProducts( caddyEnCours );
		
	},
	
	clearPlusFerme:function(){
		var trueThis = this;
		this.time = setTimeout( function(){ trueThis.ferme(); } , '500' );
	},

	openIt:function(){

		if( isSet( this.time ) )
			clearTimeout( this.time );
		
		if( this.shopid == 3 ){
			$('divBoutonPanier').style.borderLeft = '2px solid #DDD';
			$('divBoutonPanier').style.borderRight = '2px solid #DDD';
			$('divBoutonPanier').style.borderTop = '2px solid #DDD';
		}else{
			$('boutonPanier').firstChild.style.backgroundPosition = 'top left';
			$('item_count').style.backgroundColor = 'white';
			$('item_count').style.color = '#000';
			$('item_count').style.borderTop = '#000 solid 1px';
			$('item_count').style.borderRight = '#000 solid 1px';
		}
		$('idDivPanier').style.display = "block";
		
		if( this.shopid == 3 ){
			var leftPos = $('divBoutonPanier').cumulativeOffset()[0];
			var widthDiv =  $('divBoutonPanier').getWidth();
		}else{
			var leftPos = $('boutonPanier').cumulativeOffset()[0];
			var widthDiv =  $('boutonPanier').getWidth();
		}
		var widthPopup =  $('idDivPanier').getWidth();
		var calcul = ( parseInt(leftPos) - parseInt(widthPopup) )+parseInt( widthDiv );
		
		$('idDivPanier').style.left = calcul+'px';
		
	},

	ferme:function(){
		if( this.shopid == 3 ){
			$('divBoutonPanier').style.borderLeft = '2px solid #fff';
			$('divBoutonPanier').style.borderRight = '2px solid #fff';
			$('divBoutonPanier').style.borderTop = '2px solid #fff';
		}else{
			$('boutonPanier').firstChild.style.backgroundPosition = 'bottom left';
			$('item_count').style.backgroundColor = 'transparent';
			$('item_count').style.color = '#fff';
			$('item_count').style.border = 'none';
		}
		$('idDivPanier').style.display = "none";
		clearTimeout( this.time );
	},
	
	makePopupProducts:function( jsonPopup ){
		
		$('boutonPanier').stopObserving();
		
		$('item_count').update( '('+jsonPopup.numitemsincaddie+')' );
		
		if( isSet( $('idDivPanier') ) ){
			$('idDivPanier').stopObserving( 'mouseover' , this.ouvreLa );
			$('idDivPanier').stopObserving( $('idDivPanier'), 'mouseout' , this.clearTimoutEtFerme );
			$( 'boutonPanier' ).stopObserving( 'mouseover' ,  this.ouvreLa );
			$( 'boutonPanier' ).stopObserving( 'mouseout' , this.clearTimoutEtFerme );
			$('idDivPanier').parentNode.removeChild( $('idDivPanier') );
		}
		var rayonsPopup = jsonPopup.rayon;
		
		var elemntsFrame = {
				'htmlelmt' : 'div',	
				'attributes' : { 'id' : 'idDivPanier' }
			   };
    	var divPanier = $('page-content').createFrame( elemntsFrame );
    	
    	if( this.shopid == 3 ){
    		var elemntsFrame = {
    				'htmlelmt' : 'div',	
    				'attributes' : { 'id' : 'idDivLigneVide' }
			   	};
    		divPanier.createFrame( elemntsFrame );
    	}
    	
		for( var j = 0 ; j < rayonsPopup.length ; j++ ){
			
			urlProduit = rayonsPopup[j].ficheReferer;
			
			var elemntsFrame = {
					'htmlelmt' : 'a',	
					'attributes' : { 'class' : 'classDivLignePanier' , 'href' : urlProduit }
				   };
			var divLignePanier = divPanier.createFrame( elemntsFrame );
						
			var elemntsFrame = {
					'htmlelmt' : 'p',	
					'attributes' : { 'class' : 'classPPanier' }
				   };
			var pLignePanier = divLignePanier.createFrame( elemntsFrame );

			var elemntsFrame = {
					'htmlelmt' : 'p',
					'txtContent' : rayonsPopup[j].priceProduct,
					'attributes' : { 'class' : 'classPPrix' }
				   };
			var pPrixProduct = divLignePanier.createFrame( elemntsFrame );

            if( rayonsPopup[j].priceProduct != rayonsPopup[j].regularPriceProduct ){
            	var elemntsFrame = {
						'htmlelmt' : 'span',
						'txtContent' : rayonsPopup[j].regularPriceProduct,
						'attributes' : { 'class' : 'prixReel' }
					   };
            	pPrixProduct.createFrame( elemntsFrame );
            }

			if( isSet( rayonsPopup[j].image ) ){
				var elemntsFrame = {
						'htmlelmt' : 'img',
						'attributes' : { 'src' : rayonsPopup[j].image }
					   };
				var imageProd = pLignePanier.createFrame( elemntsFrame );
				imageProd.observe( 'click' , function(){ document.location = urlProduit; } );
			}
			
			var elemntsFrame = {
					'htmlelmt' : 'span',
					'txtContent' : rayonsPopup[j].nameProduct,
					'attributes' : { 'class' : 'ligneLabel' }
				   };
			pLignePanier.createFrame( elemntsFrame );
			
			if( isSet( rayonsPopup[j].taille ) ){
				var tailles = rayonsPopup[j].taille;
				var elemntsFrame = {
						'htmlelmt' : 'div',
						'attributes' : { 'class' : 'mainClassDivTaille' }
				};
				var divTaille = pLignePanier.createFrame( elemntsFrame );
				var elemntsFrame = {
						'htmlelmt' : 'span',
						'txtContent' : 'Taille :',
						'attributes' : { 'class' : 'classSpanTexteTaille' }
				};
				divTaille.createFrame( elemntsFrame );
				
				if( is_array( tailles ) ){
					for ( var l = 0 ; l < tailles.length ; l++ ){
						var elemntsFrame = {
								'htmlelmt' : 'div',
								'txtContent' : tailles[l],
								'attributes' : { 'class' : 'classDivTaille' }
						};
						divTaille.createFrame( elemntsFrame );
					}
				}else{
					var elemntsFrame = {
							'htmlelmt' : 'div',
							'txtContent' : rayonsPopup[j].taille,
							'attributes' : { 'class' : 'classDivTaille' }
					};
					divTaille.createFrame( elemntsFrame );
				}
			}
			
			var quantiyTot = 0;
			if( is_array( rayonsPopup[j].quantityProduct ) ){
				for( var qu = 0 ; qu < rayonsPopup[j].quantityProduct.length ; qu++ ){
					quantiyTot += parseInt( rayonsPopup[j].quantityProduct[qu] );
				}
			}else{
				quantiyTot += parseInt( rayonsPopup[j].quantityProduct );
			}
				
			var elemntsFrame = {
					'htmlelmt' : 'div',
					'txtContent' : 'Quantit&eacute; : '+quantiyTot,
					'attributes' : { 'class' : 'classDivQuantite' }
			};
			divLignePanier.createFrame( elemntsFrame );

		}

		var elemntsFrame = {
				'htmlelmt' : 'div',
				'attributes' : { 'id' : 'idDerDiv' }
		};
		var derDiv = divPanier.createFrame( elemntsFrame );
		
		var elemntsFrame = {
				'htmlelmt' : 'div',
				'txtContent' : 'Quantit&eacute; totale : '+jsonPopup.numitemsincaddie,
				'attributes' : { 'id' : 'idDivQuantiteTotale' }
		};
		var divQuantiteTotale = derDiv.createFrame( elemntsFrame );
		
		var elemntsFrame = {
				'htmlelmt' : 'div',
				'attributes' : { 'id' : 'idDivTotalPanier' }
		};
		var divTotalPanier = derDiv.createFrame( elemntsFrame );
		
		var elemntsFrame = {
				'htmlelmt' : 'p',
				'txtContent' : 'Total : ',
				'attributes' : { 'class' : 'classPTotalLabel' }
		};
		var pTotalLabel = divTotalPanier.createFrame( elemntsFrame );

		var elemntsFrame = {
				'htmlelmt' : 'p',
				'txtContent' : jsonPopup.caddyTotalPrice,
				'attributes' : { 'class' : 'classPTotal' }
		};
		var pTotal = divTotalPanier.createFrame( elemntsFrame );
		
		var elemntsFrame = {
				'htmlelmt' : 'span',
				'txtContent' : jsonPopup.caddyTotalRegularPrice,
				'attributes' : { 'id' : 'regularPrice' }
		};
		var spanTotal = pTotal.createFrame( elemntsFrame );
		
		var elemntsFrame = {
				'htmlelmt' : 'p',
				'txtContent' : 'Vous pourrez modifier vos articles sur la page suivante.',
				'attributes' : { 'id' : 'idText' }
		};
		divPanier.createFrame( elemntsFrame );
		
		if( this.shopid == 3 ){
			var elemntsFrame = {
					'htmlelmt' : 'a',
					'txtContent' : '\>\> FINALISER MA COMMANDE',
					'attributes' : { 'id' : 'idAPanier' , 'href' : '/Panier' }
			};
		}else{
			var elemntsFrame = {
					'htmlelmt' : 'a',
					'txtContent' : '<img src="http://media2.brandalley.com/shops/42/product/bt_fin_comm.gif" />',
					'attributes' : { 'id' : 'idAPanier' , 'href' : '/Panier' }
			};
		}
		divPanier.createFrame( elemntsFrame );
					
		this.ouvreLa = this.openIt.bind( this , $('idDivPanier') );
		this.clearTimoutEtFerme = this.clearPlusFerme.bind( this , $('idDivPanier') );


		$('boutonPanier').observe( 'mouseover' , this.ouvreLa );
		$('boutonPanier').observe( 'mouseout' , this.clearTimoutEtFerme );

		divPanier.observe( 'mouseover' , this.ouvreLa );
		divPanier.observe( 'mouseout' , this.clearTimoutEtFerme );
		
	},

	clickedLignePopup:function( url ){
		document.location = url;
	},

	changeBorderPopup:function( e , border ){
		e.style.border = border;
	}
	
});