jQuery.fn.center = function () { 
    this.css("position","absolute"); 
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
    return this; 
}; 


function CGODialogBox()
{
	var _width = 660;
	var _height = 410;
	var _elementID = null;
	
	this.InitDialog = function(elementID, width, height) {
		if ( width ) {
			_width = width;
		}
		if ( height ) {
			_height = height;
		}
		if ( elementID ) {
			_elementID = elementID;
		}
		
		this.construct();
	};
	
	this.GetWidth = function() {
		return _width;
	};
	this.GetHeight = function() {
		return _height;
	};
	this.GetElementID = function() {
		return _elementID;
	};
	
	cgodialogbox = this;
	this.ClassName = function () {  
		return "cgodialogbox";
	};

}

CGODialogBox.prototype = {
	construct : function(callback) {
		var dlgElement = document.getElementById(this.GetElementID());
	    if (null == dlgElement) 
	    {
	        var dlg_largeur = this.GetWidth();
	        var dlg_hauteur = this.GetHeight();
	        var dlg_top = ( $(window).height() - dlg_hauteur ) / 2+$(window).scrollTop();
	        var dlg_left = ( $(window).width() - dlg_largeur ) / 2+$(window).scrollLeft();

	        var html  = '<div id="apple" class="overlay" style="position: absolute; z-index: 9999; ';
	            html += 'top: -665px; left:'+ dlg_left +'px; display: block; ';
	            html += 'width:' + dlg_largeur + 'px;';
	            html += 'height:' + dlg_hauteur + 'px;';
	            html += '">';
	        	html += '<div class="close" onclick="' + this.ClassName() + '.onClose();"></div>';
	        	html += '	<div id="overlay_content">';
	        	html += this.contenu();
	        	html += '	</div>';
	        	html += '</div>';
	        
	        var modal_element = document.createElement('div');
	        modal_element.id = this.GetElementID();
	        modal_element.style.display = 'none';
	        modal_element.innerHTML = html;
	        document.body.appendChild(modal_element);
	        var element = document.createElement('div');
	        element.id = "modal_CGODialogBox";
	        element.innerHTML = '<div class="modal" style="width: ' + document.body.scrollWidth + 'px; height: ' + document.body.scrollHeight + 'px; z-index: 9998;" onclick="' + this.ClassName() + '.onClose();"></div>';
	        document.body.appendChild(element);

	        $("#" + this.GetElementID()).fadeIn('fast',function(){  
	        	$('#apple').animate({'top':''+ dlg_top +'px'},500);  
	        });  
	    }
	    else {
	    	this.onClose();
	    }		
	},
	
	contenu : function() {  
        throw new Error("non implémentée!");   
    }, 
	
	onClose : function() 
	{
    	$("#dialogALCP").fadeOut('fast', function(){
    		$("#apple").animate({'top':'-665px'}, 500, function(){  
    			var modal_dlgElement = document.getElementById('modal_CGODialogBox');
    			document.body.removeChild(modal_dlgElement);
    			var dlgElement = document.getElementById('dialogALCP');
    			document.body.removeChild(dlgElement);
    		});  
    	});
    }
};

/***********************************************
 *
 * Boite de dialog générale du site
 *
 ***********************************************/
function CGODialogBoxEx(page, width, height)
{
	CGODialogBox.call(this);
	var thePage = page;
		
	this.GetPage = function(value) {
		return thePage;
	};
	
	/*absolutly the last methode of this class*/
	/*all initialisation should be done.	  */
	this.InitDialog("dialogALCP", width, height);
}

_heriter(CGODialogBoxEx.prototype, CGODialogBox.prototype);

CGODialogBoxEx.prototype.contenu = function() 
{
    var pageFile = createXHR();
    pageFile.open("GET", this.GetPage(), false);
    pageFile.send(null);
    return pageFile.responseText;
};


/***********************************************
 *
 * Dialog box de Zoom des produits
 *
 ***********************************************/
function CZoomProduitDlg(index, width, height)
{
	CGODialogBox.call(this);
	var theProduct = null;
	theProduct = dspmngr.GetProductByIndex(index);	
	
	this.GetProduct = function(value) {
		return theProduct;
	};

	/*absolutly the last methode of this class*/
	/*all initialisation should be done.	  */
	this.InitDialog("dialogALCP", width, height);
}

/*function CZoomProduitDlg(prd)
{
	CGODialogBox.call(this);
	var theProduct = prd;

	this.GetProduct = function(value) {
		return theProduct;
	};

	*absolutly the last methode of this class*
	*all initialisation should be done.	  *
	this.InitDialog("dialogALCP");
}*/

_heriter(CZoomProduitDlg.prototype, CGODialogBox.prototype);

CZoomProduitDlg.prototype.contenu = function() 
{
	var product = this.GetProduct();
	product_type = Remplacer(product.Type,  "'", "\'");
	photos = product.Photo.split(";");
	nom_produit = product.Nom;
	nom_produit = Remplacer(nom_produit, "'", "\'");
	prix_produit = product.Prix;
	var prix_promo = null;
	if ( product.Promo ) {
		prix_promo = product.Promo;
	}
	
	var html = '<table class="generic_dlg" cellpadding="0" cellspacing="0" style="width:100%;height:100%">';
	html += '		<tr valign="top">';
	html += '			<td class="parure_dlg" style="width:50%;padding:0 5px 0 5px;" >';
	html += '				<div class="product_info">';
	html += '					<span class="picture">';
	html += '						<img id="zoom_img" src="produits/images/300x400/' + photos[0] + '" /	>';
	html += '						<span></span>';
	html += '					</span>';
	html += '			</td>';
	html += '			<td style="width:50%;">';
	html += '				<div style="width:100%;height:28px;margin:0px;padding:0px;background-color:#C38D72;">';
	html += '					<div class="font_header" style="float:left;margin:0;padding:0;width:100%;">';
	html += 						nom_produit;
	html += '					</div>';
	html += '				</div>';
	html += '				<div style="width:100%;height:360px;margin:0;padding:0;">';
	html += '					<div id="productDescriptif" style="height:255px;clear:both;">';
	html += '						<div >';
	html += '							<p>' + product.Descriptif + '</p>';
	html += '						</div>';
	
	if ( product.Taille ) 
	{
		if ( product_type === "collier" ) {
			text = 'Tour de cou : ';
		}
		else if ( product_type === "bracelet" ) {
			text = 'Tour de poignet : ';
		}
		else {
			text = 'Taille : ';
		}

		html += '					<div id="productTaille" style="height:22px;"><span >' + text + product.Taille + ' cm environ</span></div>';
	}
				
	if	( product.TaillePendentif ) {
		html += '					<div id="productTaillePendentif" style="height:22px;"><span >Taille du pendentif : ' + product.TaillePendentif + ' cm environ</span></div>';
	}
					
	if ( product.Couleurs )
	{
		colors = product.Couleurs.split(";");

		html += '					<div id="productColors" style="height:25px;"><span >Existe en : </span>';
		html += '						<select id="colorSelector" name="colorSelector" size="1" >';
		for (i=0 ; i < colors.length ; i++) {
			html += '						<option value="' + colors[i] + '" >' + colors[i] + '</option>';
		}
		html += '						</select>';
		html += '					</div>';
	}
	html += '					<div style="width:100%;text-align:center;">';
		
	var _product = null;
	if ( 0 < product.Stock ) {
		_product = Remplacer(nom_produit, "'", "\\'");
		_product += "|"; 
		_product += Remplacer(product_type, "'", "\\'");
	}
	
	var _prix_produit = null;
	if ( prix_promo ) {
		_prix_produit = prix_promo;
	}
	else {
		_prix_produit = prix_produit;
	}
	
	if ( _product ) {
		html += '				<img style="align:top;cursor:pointer;" alt="" src="images/ajouter_panier.gif" ';
		html += '					onclick="javascript:AddNewProduct(\'' + _product + '\', \'' + _prix_produit + '\', \'colorSelector\'); ';
		html += '						' + this.ClassName() + '.construct(\'_ShowHideDialogFX(\\\'panier/ajouter_produit.php?id=' + product.ID + '\\\')\');" />';
	}
	html += '				</div>';
	
	var stock_class = new StockClassInfo(product);
	html += '				<div id="_productStock" style="margin-top:7px;text-align:center;" class="' + stock_class.GetClass() + '" >' + stock_class.GetText()+ '</div>';
	html += '			</div>';
		
	if ( prix_promo ) {
		html += '		<div id="productPrice" class="zoom_product_price"><span name="prix" text="center" >';
		html += '			<span style="color:#B00057;">Promo </span>';
//		html += '			<span style="color:#B00057;">Solde </span>';
//		html += '			<span style="color:#B00057;"><img alt="Solde" src="images/label_solde_80.gif" /></span>';
	//					echo number_format($_prix_produit, 2, ',', ' ')  . '€';
						
	//enlever pour les soldes car aucun comparatif possible
	//par rapport à avant!!!										
		html += '			<strike>' + formatNumber(prix_produit)  + '</strike>€';
		html += '			<span style="font-size:larger;font-weight:normal;">/</span>'; 
		html += '			<span style="font-size:larger;color:#C4DE00;">' + formatNumber(prix_promo) + '€</span>';
		html += '			</span>';
		html += '		</div>';
	}
	else {
		if ( !_prix_produit ) {
			prix_produit = product.Prix;
		}
		html += '		<div id="productPrice" class="zoom_product_price"><span name="prix" text="center" >' + formatNumber(_prix_produit) + ' €</span></div>';
	}
						
	html += '			<div style="padding:0; margin:0;">';
						
	for (i=0; i<photos.length; i++) {
		if ( photos[i].length ) {
			html += '	<img src="produits/images/174x232/' + photos[i] + '" style="height:65px; width:55px; padding-right:5px;cursor:pointer;" onclick="javascript:SelectedImage(\'zoom_img\', \'produits/images/300x400/' + photos[i] + '\');" />';
		}
	}
	html += '			</div>';
	html += '		</div>';
	html += '	</td>';
	html += '</tr>';
	html += '</table>';
		
	return html;
};

function CZoomProduitParureDlg(index, width, height)
{
	//CGODialogBox.call(this);
	CZoomProduitDlg.call(this, index, width, height);
}

_heriter(CZoomProduitParureDlg.prototype, CZoomProduitDlg.prototype);

CZoomProduitParureDlg.prototype.contenu = function() 
{
	var product = this.GetProduct();
	photos = product.Photo.split(";");
	nom_produit = product.Nom;
	nom_produit = Remplacer(nom_produit, "'", "\'");
	prix_produit = product.Prix;
	var prix_promo = null;
	if ( product.Promo ) {
		prix_promo = product.Promo;
	}
	
	var html = '<table class="generic_dlg" cellpadding="0" cellspacing="0" style="width:100%;height:100%">';
	html += '		<tr valign="top">';
	html += '			<td class="parure_dlg" style="width:50%;padding:0 5px 0 5px;" >';
	html += '				<div class="product_info">';
	html += '					<span class="picture">';
	html += '						<img id="zoom_img" src="produits/images/300x400/' + photos[0] + '" /	>';
	html += '						<span></span>';
	html += '					</span>';
	html += '			</td>';
	html += '			<td style="width:50%;">';
	html += '				<div style="width:100%;height:28px;margin:0px;padding:0px;background-color:#C38D72;">';
	html += '					<div class="font_header" style="float:left;margin:0;padding:0;width:100%;">';
	html += 						nom_produit + " (Parure)";
	html += '					</div>';
	html += '				</div>';
	html += '				<div style="width:100%;height:360px;margin:0;padding:0;">';
	html += '					<div id="productDescriptif" style="height:255px;clear:both;">';
	html += '						<div >';
	html += '							<p>' + product.collier.Descriptif + '</p>';
	html += '						</div>';
	
	if ( product.collier.Taille ) 
	{
		text = 'Tour de cou : ';
		html += '					<div id="productTaille" style="height:22px;"><span >Tour de cou : ' + product.collier.Taille + ' cm environ</span></div>';
	}
				
	if	( product.collier.TaillePendentif ) {
		html += '					<div id="productTaillePendentif" style="height:22px;"><span >Taille du pendentif : ' + product.collier.TaillePendentif + ' cm environ</span></div>';
	}
	
	if ( product.collier.Couleurs )
	{
		colors = product.collier.Couleurs.split(";");

		html += '					<div id="productColors" style="height:25px;"><span >Existe en : </span>';
		html += '						<select id="colorSelector" name="colorSelector" size="1" >';
		for (i=0 ; i < colors.length ; i++) {
			html += '						<option value="' + colors[i] + '" >' + colors[i] + '</option>';
		}
		html += '						</select>';
		html += '					</div>';
	}
	html += '					<div  style="width:100%;text-align:center;">';
		
	var _product = null;
	if ( 0 < product.Stock ) {
		_product = Remplacer(nom_produit, "'", "\\'");
		_product += "|parure"; 
	}
	if ( _product ) {
		html += '				<img style="align:top;cursor:pointer;" alt="" src="images/ajouter_panier.gif" ';
		html += '					onclick="javascript:AddNewProduct(\'' + _product + '\', \'' + prix_produit + '\', \'colorSelector\'); ';
		html += '						' + this.ClassName() + '.construct(\'_ShowHideDialogFX(\\\'panier/ajouter_produit.php?id=' + product.ID + '\\\')\');" />';
	}
	html += '				</div>';
	
	var stock_class = new StockClassInfo(product);
	html += '				<div id="_productStock" style="margin-top:7px;text-align:center;" class="' + stock_class.GetClass() + '" >' + stock_class.GetText()+ '</div>';
	html += '			</div>';
		
	html += '			<div id="productPrice" class="zoom_product_price"><span name="prix" text="center" >' + formatNumber(prix_produit) + ' €</span></div>';
						
	html += '			<div style="padding-bottom: 10px;">';

	photosCollier=product.collier.Photo.split(";");
	for (i=0; i<photosCollier.length; i++) {
		if ( photosCollier[i].length ) {
			html += '	<img src="produits/images/174x232/' + photosCollier[i] + '" style="height:65px; width:55px; padding-right:5px;cursor:pointer;" onclick="javascript:SelectedImage(\'zoom_img\', \'produits/images/300x400/' + photosCollier[i] + '\');" />';
		}
	}
	photosBracelet=product.bracelet.Photo.split(";");
	for (i=0; i<photosBracelet.length; i++) {
		if ( photosBracelet[i].length ) {
			html += '	<img src="produits/images/174x232/' + photosBracelet[i] + '" style="height:65px; width:55px; padding-right:5px;cursor:pointer;" onclick="javascript:SelectedImage(\'zoom_img\', \'produits/images/300x400/' + photosBracelet[i] + '\');" />';
		}
	}
	photosBO=product.bo.Photo.split(";");
	for (i=0; i<photosBO.length; i++) {
		if ( photosBO[i].length ) {
			html += '	<img src="produits/images/174x232/' + photosBO[i] + '" style="height:65px; width:55px; padding-right:5px;cursor:pointer;" onclick="javascript:SelectedImage(\'zoom_img\', \'produits/images/300x400/' + photosBO[i] + '\');" />';
		}
	}

	html += '			</div>';
	html += '		</div>';
	html += '	</td>';
	html += '</tr>';
	html += '</table>';
		
	return html;
};