var zitFirstTimeCenter = 1;
	var previewRatio = 0.7;
	var textColor = "#000000";
	var backgroundColor = "#ffffff";
	var textSize = 30;
	var textFont = "Aaaiight";
	var texteNow = nl2br(jQuery("#zitText").val(), false);
	var imageNow = jQuery("#draggableImageSrc").attr("src");
	
	var texteOffsetX = 0;
	var texteOffsetY = 0;
	var imageOffsetX = 0;
	var imageOffsetY = 0;
	var minusOffsetX = 263;
	var minusOffsetY = 96;
	
	var widthSize = 560;
	var heightSize = 252;
	var txtProduit = "tous les mugs";
	
	var imageWidth = 0;
	var imageHeight = 0;
	var imageWidthOriginal = 0;
	var imageHeightOriginal = 0;
	var imageWidthOriginalBackup = 0;
	var imageHeightOriginalBackup = 0;
	var imageOriginal = 0;
	var maxWidth = widthSize + 100;
	var maxHeight = heightSize + 100;
	var imageWidthFloat = 0;
	var imageHeightFloat = 0;
	var zoomStepXfloat = 10;
	var zoomStepYfloat = 10;
	var zoomStepX = 10;
	var zoomStepY = 10;
	var padStep = 5;
	
	var debugTime = new Date();
	var debugTimeOK = debugTime.getTime() - 5000;
	
	
	
jQuery(document).ready(function() {
	
	jQuery("#zitRestart").click(resetAll);
	
	/* change Product (size) */
	jQuery("#zitProduct").change(function(){
		var product = jQuery("#zitProduct").val();
		var x = product.indexOf('x');
		var w = Math.round(product.substring(0, x));
		var h = Math.round(product.substring(x+1));
		txtProduit = jQuery('#zitProduct :selected').text();
		var newRatio = 1;
		while (w * newRatio > 600) {
			newRatio -= 0.1;
			newRatio = Math.round(newRatio * 100) / 100;
		}
		previewRatio = newRatio;
		widthSize = Math.round(w * previewRatio);
		heightSize = Math.round(h * previewRatio);
		adjustTextSize();
		adjustTextCenter();
		adjustImageSize();
		updateDebug();
	});	
	
	
	/* Image Draggable */
	jQuery('#draggableImage').draggable({
		containment: '#zitPreviewMask', 
		scroll: false,
		stop: function(event, ui) {
			var div = jQuery("#draggableImage");
			var offset = div.offset();
			imageOffsetX = Math.round(offset.left) - minusOffsetX;
			imageOffsetY = Math.round(offset.top)  - minusOffsetY;
			updateDebug();
		}
	});
	
	function zitZoomPlus() {
		var imageWidthFloatNew  = imageWidthFloat  + zoomStepXfloat;
		var imageHeightFloatNew = imageHeightFloat + zoomStepYfloat;
		var widthNew  = Math.round(imageWidthFloatNew);
		var heightNew = Math.round(imageHeightFloatNew);
		if ( (widthNew <= maxWidth * 10) && (heightNew <= maxHeight * 10) ) {
			jQuery('#draggableImageSrc').width(widthNew);
			jQuery('#draggableImageSrc').height(heightNew);
			imageWidthFloat  = imageWidthFloatNew;
			imageHeightFloat = imageHeightFloatNew;
			imageWidth  = widthNew;
			imageHeight = heightNew;
			updateDebug();
		}
	}
	
	function zitZoomMinus() {
		var imageWidthFloatNew  = imageWidthFloat  - zoomStepXfloat;
		var imageHeightFloatNew = imageHeightFloat - zoomStepYfloat;
		var widthNew  = Math.round(imageWidthFloatNew);
		var heightNew = Math.round(imageHeightFloatNew);
		if ( (widthNew > 0) && (heightNew > 0) ) {
			jQuery('#draggableImageSrc').width(widthNew);
			jQuery('#draggableImageSrc').height(heightNew);
			imageWidthFloat  = imageWidthFloatNew;
			imageHeightFloat = imageHeightFloatNew;
			imageWidth  = widthNew;
			imageHeight = heightNew;
			updateDebug();
		}
	}
	
	jQuery("#zoomPlus").click(zitZoomPlus);
	jQuery("#zoomPlus").mousehold(10, zitZoomPlus);
	jQuery("#zoomPlus").mouseout(updateDebug);
	
	jQuery("#zoomMinus").click(zitZoomMinus);
	jQuery("#zoomMinus").mousehold(10, zitZoomMinus);
	jQuery("#zoomMinus").mouseout(updateDebug);
	
	jQuery("#done").click(function(){
		var s = "zit status : " + "\r\n";
		var stringData = "Debug : \n";
		var div = null;
		var offset = null;
		div = jQuery("#zitPreviewText");
		offset = div.offset();
		s = s + " text offset top = " + Math.round(offset.top) + " text offset left = " + Math.round(offset.left) + "\r\n";
		stringData = stringData + Math.round(offset.top) + "|" + Math.round(offset.left) + "|";
		div = jQuery("#draggableImage");
		offset = div.offset();
		s = s + " image offset top = " + Math.round(offset.top) + " image offset left = " + Math.round(offset.left) + "\r\n";
		stringData = stringData + Math.round(offset.top) + "|" + Math.round(offset.left) + "|";
		s = s + " text = " + jQuery("#zitText").val() + "\r\n";
		s = s + " image = " + jQuery("#draggableImageSrc").attr("src") + "\r\n";
		stringData = stringData + jQuery("#zitText").val() + "|";
		stringData = stringData + jQuery("#draggableImageSrc").attr("src") + "|";
		alert(stringData);
	});
	
	/* ------------------------------------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------------------------------ */
	
	jQuery("#zitPanier").click(function(){
		var attribute  = jQuery("#attribute495").val();
		//alert("!"+attribute+"!"); return false;										
		var zitProductID  = jQuery("#zitProductID").val();
		var zitProductURL = jQuery("#zitProductURL").val();
		var zitTextOK = nl2br(jQuery("#zitText").val(), false);
		var zitTextWidth  = jQuery("#zitPreviewText").width();
		var zitTextHeight = jQuery("#zitPreviewText").height();
		var div = jQuery("#zitPreviewText");
		var offset = div.offset();
		var div3 = jQuery("#zitPreviewZone");
		var offset3 = div3.offset();
		texteOffsetX = Math.round(offset.left - offset3.left);
		texteOffsetY = Math.round(offset.top - offset3.top);
		var data = "";
		data += previewRatio + "|" + widthSize + "|" + heightSize + "|" + backgroundColor.replace("#", "") + "|" + texteOffsetX + "|" + texteOffsetY + "|" + zitTextOK + "|" + textSize + "|" + textColor.replace("#", "") + "|" + jQuery("#zitFont").val() + "|" + jQuery("#draggableImageSrc").attr("src") + "|" + imageOffsetX + "|" + imageOffsetY + "|" + Math.round(imageWidthFloat) + "|" + Math.round(imageHeightFloat) + "|" + jQuery("#zitNameWork").val() + "|" + zitTextWidth + "|" + zitTextHeight + "|";
		data = data.replace("#", "");
		data = data.replace("http://www.sublicentre.com/zit/images/clear.gif", "/zit/cache/clear.gif");
		
		if (zitProductID == 51) { // t-shirt homme
			if (attribute ==  9) zitProductID = 56;
			if (attribute == 10) zitProductID = 55;
			if (attribute == 11) zitProductID = 54;
			if (attribute == 12) zitProductID = 53;
			if (attribute == 13) zitProductID = 52;
			if (attribute == "") { alert('SVP choisissez la taille!'); return false; }
		}
		if (zitProductID == 48) { // t-shirt femme
			if (attribute == 14) zitProductID = 49;
			if (attribute == 15) zitProductID = 50;
			if (attribute == "") { alert('SVP choisissez la taille!'); return false; }
		}
		if (zitProductID == 43) { // t-shirt enfant
			if (attribute == 16) zitProductID = 47;
			if (attribute == 17) zitProductID = 46;
			if (attribute == 18) zitProductID = 45;
			if (attribute == 19) zitProductID = 44;
			if (attribute == "") { alert('SVP choisissez la taille!'); return false; }
		}
		
		var newURL = "/personnalisation?pid="+zitProductID+"&purl="+zitProductURL+"&attribute4="+attribute+"&data="+data;
		window.location.replace(newURL);
	});
	
	/* ------------------------------------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------------------------------ */
	/* ------------------------------------------------------------------------------------------------------------------------ */
	
	/* Preview */
	jQuery("#zitPreviewText").draggable({ 
		containment: '#zitPreviewZone', 
		scroll: false,
		stop: function(event, ui) {
			var div = jQuery("#zitPreviewText");
			var offset = div.offset();
			var div3 = jQuery("#zitPreviewZone");
			var offset3 = div3.offset();
			texteOffsetX = Math.round(offset.left - offset3.left);
			texteOffsetY = Math.round(offset.top - offset3.top);
			updateDebug();
		}
	});
	
	/* Tools - Tabs */
	jQuery("#zitToolsTabs").tabs().find(".ui-tabs-nav").sortable({axis:'x'});
		
	/* Tools - Text - Message */
	jQuery("#zitText").keyup(function(){
		jQuery("#zitPreviewText").css({'visibility' : 'visible'});
		var txt_tmp = jQuery("#zitText").val();
		txt_tmp = nl2br(txt_tmp, false);
		jQuery("#zitPreviewText").html(txt_tmp);
		Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
		updateDebug();
	});
	
	/* Tools - Text - Font Size */
	jQuery("#zitFontSizeSlider").slider({
		value:30,
		min: 10,
		max: 300,
		step: 2,
		slide: function(event, ui) {
			jQuery("#zitFontSize").val(ui.value + 'px');
			jQuery("#zitPreviewText").css({'font-size' : ui.value + 'px'});
			Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
			textSize = ui.value;
			adjustTextSize();
			updateDebug();
		}
	});
	jQuery("#zitFontSize").val(jQuery("#zitFontSizeSlider").slider("value") + 'px');
	
	/* Tools - Text - Colorpicker */
	jQuery("#zitColorPicker").ColorPicker({
		onShow: function (colpkr) {
			jQuery(colpkr).fadeIn(500);
			return false;
		},
		onHide: function (colpkr) {
			jQuery(colpkr).fadeOut(500);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			jQuery("#zitColorPicker div").css("backgroundColor", "#" + hex);
			jQuery("#zitPreviewText").css("color", "#" + hex);
			Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
			textColor = "#" + hex;
			updateDebug();
		}
	});
	
	/* Tools - Background - Colorpicker */
	jQuery("#zitBackgroundColorPicker").ColorPicker({
		onShow: function (colpkr) {
			jQuery(colpkr).fadeIn(300);
			return false;
		},
		onHide: function (colpkr) {
			jQuery(colpkr).fadeOut(300);
			return false;
		},
		onChange: function (hsb, hex, rgb) {
			jQuery("#zitBackgroundColorPicker div").css("backgroundColor", "#" + hex);
			jQuery("#zitBackgroundImage").css("background-color", "#" + hex);
			backgroundColor = "#" + hex;
			updateDebug();
		}
	});
	
	/* Tools - Text - Bold */
	jQuery("#zitFontBold").click(function(){
		if(jQuery("#zitFontBold").is(":checked")) {
			jQuery("#zitPreviewText").css({'font-weight' : 'bold' });
			Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
		} else {
			jQuery("#zitPreviewText").css({'font-weight' : 'normal' });
			Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
		}
	});
	
	/* Tools - Text - Italic */
	jQuery("#zitFontItalic").change(function(){
		if(jQuery("#zitFontItalic").is(":checked")) {
			jQuery("#zitPreviewText").css({'font-style' : 'italic' });
			Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
		} else {
			jQuery("#zitPreviewText").css({'font-style' : 'normal' });
			Cufon.replace("#zitPreviewText", { fontFamily: jQuery("#zitFont").val() });
		}
	});

	
	/* Tools - Image -------------------- */
	jQuery('#zitUploadButton').uploadify({
		'uploader':   'http://www.sublicentre.com/zit/lib/jquery/uploadify/uploadify.swf',
		'buttonImg':  'http://www.sublicentre.com/zit/images/uploadify.gif', 
		'wmode':      'transparent',
		'width':      150,
		'height':      50,
		'fileDesc':   'Images: *.bmp, *.gif, *.jpg, *.png',
		'fileExt':    '*.bmp;*.gif;*.jpg;*.jpeg;*.png',
		'script':     'http://www.sublicentre.com/zit/lib/zit/upload.php',
		'folder':     'zit/cache',
		'auto':       true,
		'buttonText': 'Choisir l\'image',
		'cancelImg':  'http://www.sublicentre.com/zit/lib/jquery/uploadify/cancel.png',
		'onComplete': function(event, queueID, fileObj, response, data) {
			var rrr = response.toString();
			var r1 = rrr.substr(0, 1);
			var r2 = rrr.indexOf("|", 0);
			var r3 = rrr.indexOf("|", r2+1);
			if (r1.toString() == "1") {
				imageWidthOriginalBackup  = rrr.substr(r2+1, r3-r2-1);
				imageHeightOriginalBackup = rrr.substr(r3+1, 9);
				imageOriginal = 1;
				var srcNEW = fileObj.filePath;
				srcNEW = srcNEW.replace("index.php/sublideco/sublikids/", "");
				srcNEW = srcNEW.replace("index.php/sublideco/subliperso/", "");
				srcNEW = srcNEW.replace("index.php/sublimug/", "");
				srcNEW = srcNEW.replace("index.php/sublitex/", "");
				srcNEW = srcNEW.replace("index.php/sublideco/", "");
				srcNEW = srcNEW.replace("index.php/sublicaro/", "");
				srcNEW = srcNEW.replace("index.php/sublikids/", "");
				srcNEW = srcNEW.replace("index.php/subliperso/", "");
				srcNEW = srcNEW.replace("//", "/");
				srcNEW = srcNEW.replace("http://www.sublicentre.com/zit/images/clear.gif", "/zit/cache/clear.gif");
				jQuery("#zitImageZoom").css({'visibility' : 'visible'});
				jQuery('#draggableImageSrc').attr("src", srcNEW);
				jQuery('#draggableImageSrc').removeAttr("width");
				jQuery('#draggableImageSrc').removeAttr("height");
				jQuery('#draggableImageSrc').css({ "width" : "auto", "height" : "auto" });
				setTimeout(resizeImageAfterUpload, 100);
			} else {
				alert('Pas une image valide!'+response);
			}
		}
    });
	
	
	
	/* Tools - Image - Pad Top */
	jQuery('#zitPadTop').click(goPadTop3);
	jQuery("#zitPadTop").mousehold(100, goPadTop3);
	jQuery("#zitPadTop").mouseout(updateDebug);
	
	jQuery('#zitPadBottom').click(goPadBottom3);
	jQuery("#zitPadBottom").mousehold(100, goPadBottom3);
	jQuery("#zitPadBottom").mouseout(updateDebug);
	
	jQuery('#zitPadLeft').click(goPadLeft3);
	jQuery("#zitPadLeft").mousehold(100, goPadLeft3);
	jQuery("#zitPadLeft").mouseout(updateDebug);
	
	jQuery('#zitPadRight').click(goPadRight3);
	jQuery("#zitPadRight").mousehold(100, goPadRight3);
	jQuery("#zitPadRight").mouseout(updateDebug);
	
	function goPadTop3() {
		if (imageWidthOriginalBackup > 0) {
			var imagePad = parseInt(jQuery("#draggableImage").css("top").replace("px", "")) - padStep;
			var minPad = -900;
			minPad = 0 - maxHeight;
			if (imagePad < minPad) imagePad = minPad;
			jQuery("#draggableImage").css({'top' : imagePad});
		}
	}
	
	function goPadBottom3() {
		if (imageWidthOriginalBackup > 0) {
			var imagePad = parseInt(jQuery("#draggableImage").css("top").replace("px", "")) + padStep;
			var maxPad = 900 - jQuery('#draggableImageSrc').height();
			maxPad = heightSize + maxHeight;
			if (imagePad > maxPad) imagePad = maxPad;
			jQuery("#draggableImage").css({'top' : imagePad});
		}
	}
	
	function goPadLeft3() {
		if (imageWidthOriginalBackup > 0) {
			var imagePad = parseInt(jQuery("#draggableImage").css("left").replace("px", "")) - padStep;
			var minPad = -900;
			minPad = 0 - maxWidth;
			if (imagePad < minPad) imagePad = minPad;
			jQuery("#draggableImage").css({'left' : imagePad});
		}
	}
	
	function goPadRight3() {
		if (imageWidthOriginalBackup > 0) {
			var imagePad = parseInt(jQuery("#draggableImage").css("left").replace("px", "")) + padStep;
			var maxPad = 900 - jQuery('#draggableImageSrc').width();
			maxPad = widthSize + 99;
			if (imagePad > maxPad) imagePad = maxPad;
			jQuery("#draggableImage").css({'left' : imagePad});
		}
	}
	
});