/**
* @namespace wizard tracer builder
*/
t.wizard = (function() {

	var /*tracer,*/
		preview,
		previewShort,
		previewLong,
		productRatio,
		currentImage = 0,
		current = 0,
		opacity = 0,
		flipSpeed = 2000,
		fadeSpeed = 3000,
		fading = "backward",
		recursive = false,
		frames = 0,
		scale = 1,
		tabsInit = false;

	var init = function(tracerType) {

		previewShort = product_var.actionWindowShort * 1;
		previewLong = product_var.actionWindowLong * 1;
		productRatio = product_var.actionWindowLong / product_var.actionWindowShort;

		jQuery("#steps li.first").click(function(e) {
			e.preventDefault();
			jQuery('#picture0').imgAreaSelect( {remove : true} );
			jQuery('#chooseEffect').show();
			jQuery('#tracerContainer').hide();
		});
		
		jQuery("#steps li.edit").click(function(e) {
			e.preventDefault();
			jQuery('#chooseEffect').hide();
			jQuery('#tracerContainer').show();
			jQuery('#imageSelector').show();
			jQuery('.pictureTools').show();
			jQuery('#checkout_main').hide();
			if ( tracer.effect == 'ZOOM' ) {
				clearInterval(animation);
				jQuery('#previewImg1').remove();
				jQuery('#dvView').show();
			
			} else {
				jQuery('#picture0 .thumb').crossSlideStop();
				jQuery('#picture0 .thumb').html('<div id="imgWrapper" class="iePassThrough"><img src="'+root+'/uploads/images/2013/blank.gif" width="100%" height="100%" /></div>');
				selectImage(0);
			}
		});

		jQuery("#steps li.preview").click(function(e) {
			e.preventDefault();
			if (!tracer.validate()) {
				showTab("FLIP2");
				return;
			}
			jQuery('#chooseEffect').hide();
			jQuery('#imageSelector').hide();
			jQuery('.pictureTools').hide();
			jQuery('#checkout_main').show();
			jQuery('#steps li').removeClass('current');
			jQuery('li.first').addClass('complete');
			jQuery('li.edit').addClass('complete');
			jQuery('li.preview').addClass('current');
			jQuery('#picture0').imgAreaSelect( {remove : true} );
			jQuery('#picture0').css("overflow","hidden");
			JQueryPreview(tracer, "preview");
		});





		jQuery("#addToCart form").submit(function(e) {
			e.preventDefault();
			if ( jQuery('#terms_conditions').is(':checked') === false) {
				alert('Please agree to the Terms of Service');
				return;
			}
			var parsedint = parseInt(jQuery("#quantity").val());
			if (parsedint < 1) {
				alert('Please choose a quantity greater than 0');
				return;
			}
			jQuery("#btnAddToCart").click(function(e) {e.preventDefault();});

			jQuery('#submit_data').val(JSON.stringify(tracer.getPictureData()));
			jQuery('#form_Item_Id').val(tracer.owner);
			jQuery('#form_Effect').val(tracer.getEffectID());
			//jQuery('#add_to_cart input:submit').click();
			// ******* Need to add a confirmation that the add to cart worked.
			jQuery('#steps .current').hide();
			jQuery('#steps .complete').hide();
			jQuery('#btnAddToCart').val('Please Wait...Adding Item to the Cart');
			jQuery.post(root + '/?showtemplate=false',
				jQuery('#addToCart form').serialize(),
				function(data, textStatus, jqXHR) {
					jQuery('#btnAddToCart').hide();
					jQuery('#preview').hide();	

					if ( typeof jQuery('#confirmation')[0] === "undefined" && (product_var.id == "663" || product_var.id == "739" || product_var.id == "740" || product_var.id == "743" || product_var.id == "744") ) {
						window.location = root+ '/iphone-shipping-information';
					} else {
						jQuery('#confirmation').show();
						jQuery('#checkout_main').hide();
						jQuery('#builder').hide();
						return;
					}
			});
		});
		
		jQuery('#slider').mouseup(function(e) {
			var zoomPosition = e.pageX - this.offsetLeft - this.offsetParent.offsetLeft;
			resizeImage(zoomPosition);
		});

		// new tracer
		var d = new Date;
		tracer = new Tracer("t" + d.getTime());
		tracer.previewShort =  previewShort;
		tracer.previewLong = previewLong;
		scale = previewLong / 200;
		// set orientation
		if (tracer.orientation == '') {
			if (product_var.orientation == "Landscape" || product_var.orientation == "Both" || product_var.orientation == "Both-L") {
				setOrientation("landscape");
			} else {
				setOrientation("portrait");
			}
		}
		// tabs
		jQuery("#effectSelect select").change( function(e){
			e.preventDefault();
			jQuery("#chooseEffect").hide();
			jQuery('#tracerContainer').show();
			jQuery('#steps li').removeClass('current');
			jQuery('#steps li.first').addClass('complete');
			jQuery('li.edit').addClass('current');
			jQuery('.effectName').html(jQuery(this).find("option:selected").text());
			showTab(jQuery(this).val());
			
		});
		jQuery("#toolTabs a").click( function(e){
			e.preventDefault();			
			if (jQuery(this).attr("id") == 'imagesTab'  ) {
				jQuery('#picture0 .thumb').crossSlideStop();
				jQuery('#picture0 .thumb').html('<div id="imgWrapper"><img src="'+root+'/uploads/images/2013/blank.gif"></div>');
				jQuery('#tabs').show();
				showTab(tracer.type);
			} else {
				showTool(jQuery(this).attr("id"));
			}
			
		});		
	};

	var pictureAdd = function(photo, index) {
		if( typeof(photo) === "undefined" ) 
			return;
		
		var newPicture = {
			'file': {
				'path': root+gallery[photo].filepath
			},
			'thumbnail': {
				'path': root+gallery[photo].thumbpath
			},
			'preview': {
				'path': root+gallery[photo].prevpath
			},
			'selection': {},
			'height': gallery[photo].fileproperties[1],
			'width': gallery[photo].fileproperties[0],				
			'name': gallery[photo].filename,
			'orientation': gallery[photo].fileproperties[1] / gallery[photo].fileproperties[0] < 1 ? 'landscape' : gallery[photo].fileproperties[1] / gallery[photo].fileproperties[0] > 1 ? 'portrait' : 'square',
			'scaleToFit': true
		};

		// validate
		if (!pictureValidate(newPicture)) {
			return false;
		}

		// add
		tracer.pictureAdd(newPicture, index);
		pictureSetup(index);
		
		// set view
		thumbView(index);
		selectImage(index);
		
		// show swap options
		if (tracer.pictureExists(0) && tracer.pictureExists(1)) {
			jQuery("#change1 a").show();
		}
		if (tracer.pictureExists(1) &&tracer.pictureExists(2)) {
			jQuery("#change2 a").show();
		}
		return true;
	};

	var pictureValidate = function(newPicture, index) {
		var minWidth = width / product_var.scale;
		var minHeight = height / product_var.scale;
		var imageText = 'Your Image';
		var validated = true;
		if( typeof(index) !== 'undefined' ) { imageText = 'Image '+ (1*index +1); }
		if( newPicture.width < minWidth && newPicture.height < minHeight) { 
			alert( imageText+" doesn't meet the minium height and width for this product ("+minWidth.toFixed(0)+"px X "+minHeight.toFixed(0)+"px)");
			validated = false;
		} else if( newPicture.width < minWidth ) { 
			alert( imageText+" doesn't meet the minium width for this product ("+minWidth.toFixed(0)+")");
			validated = false;		
		} else if( newPicture.height < minHeight ) { 
			alert( imageText+" doesn't meet the minium height for this product ("+minHeight.toFixed(0)+")");
			validated = false;
		}
		if( !validated && typeof(index) !== 'undefined' ) { pictureRemove(index); }
		return validated;
	}
	var pictureDraggable = function(selector, index) {
		jQuery(selector).draggable({
			containment: "parent",
			stop: function(event, ui) {
				tracer.pictures[index].thumbnail.offsetX = ui.position.left;
				tracer.pictures[index].thumbnail.offsetY = ui.position.top;
			}
		});
	};


	var pictureRemove = function(index) {
		
		// remove from the view
		jQuery("img", "#picture0").attr("src","");
		jQuery(".thumb", "#picture0").attr('style', '');
		jQuery("img", "#selectImage" + index).attr("src","");

		tracer.pictureRemove(index);

	};

	var pictureSwap = function(picture) {
//  **** Needs to be cleaned up, replace with a new tracer.display() function
		var i = 1, 
			temp = [], 
			newOrder = [];
		var swapIndex = 0, 
			isSwaped = false, 
			pictureLength = tracer.pictures.length;
		// swap 0 & 1
		if (picture == 0) {
			if (pictureLength != 3) {
				newOrder = [1, 0];
			} else {
				newOrder = [1, 0, 2];
			}
		}
		// swap 1 & 2
		else if (picture == 1) {
			newOrder = [0, 2, 1];
/*			if (tracer.pictureExists(0) && tracer.pictureExists(1) && tracer.pictureExists(2)) {
				newOrder = [0, 2, 1];
			} else if (jQuery("img", "#picture1").length > 0 && jQuery("img", "#picture2").length > 0) {
				newOrder = [1, 0];
				swapIndex = 1;
				isSwaped = true;
				pictureLength = pictureLength + 1;
			} else {
				newOrder = [1, 0, 2];
			}
*/		}

		// set tracer order
		tracer.setOrder(newOrder);

		thumbView(picture);
		thumbView(picture + 1);
		selectImage(jQuery('.selectedImage').attr('rel'));
	};

	var tracerPreview = function() {

		// validate tracer
		if (!tracer.validate()) {
			alert(tracer.type + ' requires ' + tracer.picturesRequired + ' pictures to build a preview');
			return
		}
		
	};

	var tracerEdit = function() {

		// show editor
		jQuery(".tab_contents").hide();
		jQuery(".tabs").show();
		jQuery("#tracerContainer").show();

	};

	var replaceImage = function(index) {
/*		jQuery("#tracerContainer").append("<div id='cloud'></div>");
		jQuery("#cloud").click(function(){closeLibrary();});
		jQuery("#library").show().css("position","absolute");
		jQuery(".photo").click(function(){pictureAdd(this.id,index);closeLibrary();});
*/	}
	
	var resizeImage = function(zoomPosition) {
		if( jQuery('.imgareaselect-selection').length != 0 ) {
			var picture = tracer.pictures["picture0"];
			var zoomImage = jQuery('#picture0').imgAreaSelect({ instance : true });
			var oldZoom = zoomImage.getSelection(true);
			var maxZoom = (( product_var.scale * picture.height ) / picture.preview.height) * 2;
			if( maxZoom > 4 ) { maxZoom = 4; }
			var newZoom = (4 / 3);
			var availableZoom = maxZoom - newZoom;
			if( zoomPosition > 20 && zoomPosition < 121 ) {
				newZoom = newZoom + ( availableZoom * (( 100 - (zoomPosition - 20) ) / 100) );
			} else if (  zoomPosition > 120 ) {
				zoomPosition = 120;
			} else {
				newZoom = maxZoom;
				zoomPosition = 20;
			}
			var newHeight = height / newZoom;
			var newWidth = width / newZoom;
			var centerX = oldZoom.x1 + (oldZoom.width / 2);
			var centerY = oldZoom.y1 + (oldZoom.height / 2);
			var newX1 = centerX - (newWidth / 2);
			var newY1 = centerY - (newHeight / 2);
			if( newX1 < 0 ) {
				newX1 = 0;
			} else if( newX1 + newWidth > width ) {
				newX1 = width - newWidth;
			}
			if( newY1 < 0 ) {
				newY1 = 0;
			} else if( newY1 + newHeight > height ) {
				newY1 = height - newHeight;
			}
			var newX2 = newX1 + newWidth;
			var newY2 = newY1 + newHeight;
			zoomImage.setSelection(newX1, newY1, newX2, newY2);
			zoomImage.update();
			jQuery('#slider span').css('left', zoomPosition);
			zoomTo(jQuery("#imgWrapper"), {'x1': newX1,'x2':newX2,'y1':newY1,'y2':newY2,'width':newWidth,'height':newHeight});
		}else {
			var draggableFrame = jQuery('#picture0').find('.thumb');
			var picture = tracer.pictures["picture" + jQuery('.selectedImage').attr('rel')];
			var maxHeight = product_var.scale * picture.height;
			var newHeight, newWidth;
			if( tracer.pictures["picture" + jQuery('.selectedImage').attr('rel')].preview.primaryDirection == 'width' ) {
				newWidth = width;
				newHeight = width / picture.preview.ratio;
			} else {
				newHeight = height;
				newWidth = height * picture.preview.ratio;
			}
			var availableZoom = maxHeight - newHeight;
			
			if( zoomPosition > 20 && zoomPosition < 121 ) {
				newHeight = newHeight + ( availableZoom * (( zoomPosition - 20 ) / 100) );
				newWidth = newHeight * picture.preview.ratio;
			} else if (  zoomPosition > 120 ) {
				newHeight = maxHeight;
				newWidth = newHeight * picture.preview.ratio;
				zoomPosition = 120;
			} else {
				zoomPosition = 20;
			}
			jQuery('#imgWrapper').css('width', newWidth).css('height', newHeight);
			saveZoom( { 'width': newWidth, 'height': newHeight }, zoomPosition );
		}
	}
	var closeLibrary = function(index) {
		jQuery("#cloud").remove();
		jQuery("#library").hide().css("position","relative");
		jQuery(".photo").unbind("click");

	}
	
	var selectImage = function(index) {
		jQuery("#replaceImage").attr("rel", index);

		if (!tracer.pictures["picture" + index]) {
			handleUpload(index);
			return;
		}

		var picture = jQuery('#picture0');
		var newPicture = tracer.pictures["picture" + index];

		jQuery(".picture").hide();
		jQuery("#selectEffect").hide();
		
		jQuery("#nextImage").attr("rel", (index*1)+1).unbind("click");
		jQuery("#nextImage").bind("click", function(){ selectImage(jQuery(this).attr("rel") ); });
		jQuery("#prevImage").attr("rel", index-1);
		jQuery(".selectImageBox").removeClass("selectedImage");
		jQuery(".selectImageBox").unbind("click");
		jQuery(".selectImageBox").bind("click", function(){ selectImage(jQuery(this).attr("rel") ); });
		jQuery("#selectImage"+index).addClass("selectedImage");
		jQuery("#selectImage"+index).bind("click", function(){ handleUpload( index ); });
		jQuery('#picture0').imgAreaSelect( {remove : true} );
		if( jQuery('#imgWrapper').data('uiDraggable') )	jQuery('#imgWrapper').draggable( 'destroy' );
		if( jQuery('#imgWrapper').data('uiResizable') )	jQuery('#imgWrapper').resizable( 'destroy' );

		
		picture.show().css("overflow","visible");
		if (tracer.orientation === 'landscape') {
			imgRatio = newPicture.width / newPicture.height;
			width = previewLong;
			height = previewShort;
		} else {
			imgRatio = newPicture.height / newPicture.width;
			width = previewShort;
			height = previewLong;
		}

		offsetWidth = newPicture.preview.offsetWidth;
		offsetHeight = newPicture.preview.offsetHeight;
		offsetX = newPicture.preview.offsetX * newPicture.preview.width;
		offsetY = newPicture.preview.offsetY * newPicture.preview.height;
		imgStyle = ' width:' + newPicture.preview.width + 'px;' +
				'height:' + newPicture.preview.height + 'px;' +
				'top:'+ Math.floor(offsetY)+'px;' +
				'left:'+ Math.floor(offsetX)+'px;';
		
		picture.find('.thumb').css({
			'width': width + offsetWidth *  2,
			'height': height + offsetHeight * 2,
			'left': -1 * offsetWidth,
			'top': -1 * offsetHeight
		});
		picture.find("img").attr("src",newPicture.preview.path);
		jQuery('#imgWrapper').attr("style", imgStyle);
		jQuery('#imgWrapper').draggable({
			containment:"parent",
			stop:function(event,ui){
				verifyPosition(ui.position, index);
			}
		}).resizable({  
			aspectRatio: true, 
			maxHeight: product_var. scale*newPicture.height, 
			minHeight: height, 
			minWidth: width,
			handles: "all",
			stop:function(event,ui){
				var availableZoom = (product_var. scale*newPicture.height) - height;
				var zoomPosition = (( (ui.size.height - height) / availableZoom ) * 100) + 10;
				saveZoom(ui.size, zoomPosition);
			}
		});
		jQuery('.ui-resizable-handle').css('z-index',1001).addClass('iePassThrough');
		
		if( index == (tracer.picturesRequired - 1) && tracer.effect != "ZOOM" ) {
			jQuery("#nextImage").hide();
			jQuery("#prevImage").show();
			jQuery("#btnPreview").show();
		} else if( index == 0 ) {
			if(tracer.effect == "ZOOM")
			{
				jQuery("#nextImage").unbind("click");
				jQuery("#nextImage").html("Next").bind("click", function(e){ activateZoom(e); });
				jQuery("#selectImage1 img").attr("src", root+"/uploads/images/2013/blank.gif").attr("style","");
				jQuery("#selectImage1").unbind("click");
				jQuery("#selectImage1").bind("click", function(e){ activateZoom(e); });
			}
			jQuery("#nextImage").show();
			jQuery("#prevImage").hide();
			jQuery("#btnPreview").hide();
		} else {
			jQuery("#nextImage").show();
			jQuery("#prevImage").show();
			jQuery("#btnPreview").hide();
		} 
	};
	
	var saveZoom = function( size, zoomPosition  ) {
		var index = jQuery('.selectedImage').attr('rel');
		var draggableFrame = jQuery('#picture0').find('.thumb');
		var newPicture = tracer.pictures["picture" + index];
		var img = jQuery("#imgWrapper");

		newPicture.preview.offsetWidth = (size.width - width);
		newPicture.preview.offsetHeight = (size.height - height);
		newPicture.preview.percentWidth = Math.abs(width / size.width);
		newPicture.preview.percentHeight = Math.abs(height / size.height);
		newPicture.preview.width = size.width;
		newPicture.preview.height = size.height;
		oldLeft = draggableFrame.css('left').slice(0,-2)*1;
		newLeft =  -1 * (size.width - width);
		oldTop = draggableFrame.css('top').slice(0,-2)*1;
		newTop =  -1 * (size.height - height);				
		draggableFrame.css({
			'width': width + (size.width - width) *  2,
			'height': height + (size.height - height) * 2,
			'left': newLeft,
			'top': newTop
		});
		imgLeft = img.css('left').slice(0,-2)*1 + (oldLeft - newLeft);
		imgTop = img.css('top').slice(0,-2)*1 + (oldTop - newTop);
		jQuery('#slider span').css('left', zoomPosition);
		verifyPosition({'left':imgLeft,'top':imgTop});
	}
	
	var verifyPosition = function( position ) {
		var border = jQuery("#picture0 .thumb");
		var img = jQuery("#imgWrapper");
		var index = jQuery('.selectedImage').attr('rel');
		
		var maxLeft = border.width() - img.width();
		var maxTop = border.height() - img.height();
		
		if( position.left  < 0 ) position.left = 0; 
		if( position.left  > maxLeft )  position.left = maxLeft; 
		if( position.top  < 0 ) position.top = 0; 
		if( position.top  > maxTop )  position.top = maxTop; 
		
		img.css('left', position.left);
		img.css('top', position.top);
		
		jQuery("#selectImage"+index+" img").css({
			width: Math.round( img.width() / scale ),
			left: -1 * Math.round( (maxLeft - position.left) / scale ) ,
			top: -1 * Math.round( (maxTop - position.top) / scale ) 
		});
				
		tracer.setOffset(img[0], index);
		
	}

	var moveImage = function( direction ) {
		if( jQuery('.imgareaselect-selection').length != 0 ) {
			var zoomImage = jQuery('#picture0').imgAreaSelect({ instance : true });
			var oldZoom = zoomImage.getSelection(true);
			var newZoom = {'x1': oldZoom.x1,'x2':oldZoom.x2,'y1':oldZoom.y1,'y2':oldZoom.y2,'width':oldZoom.width,'height':oldZoom.height};
			var increment = 2;
			switch( direction )
			{
				case 'center':
					newZoom.x1 = (width / 2) - (oldZoom.width / 2);
					newZoom.y1 = (height / 2) - (oldZoom.height / 2);
					break;
				case '1left':
					newZoom.x1 = newZoom.x1 - increment;
					break;
				case '1right':
					newZoom.x1 = newZoom.x1 + increment;
					break;
				case '1up':
					newZoom.y1 = newZoom.y1 - increment;
					break;
				case '1down':
					newZoom.y1 = newZoom.y1 + increment;
			}
			if( newZoom.x1 < 0 ) {
				newZoom.x1 = 0;
			} else if( newZoom.x1 + oldZoom.width > width ) {
				newZoom.x1 = width - oldZoom.width;
			}
			if( newZoom.y1 < 0 ) {
				newZoom.y1 = 0;
			} else if( newZoom.y1 + oldZoom.height > height ) {
				newZoom.y1 = height - oldZoom.height;
			}
			newZoom.x2 = newZoom.x1 + oldZoom.width;
			newZoom.y2 = newZoom.y1 + oldZoom.height;
			zoomImage.setSelection(newZoom.x1, newZoom.y1, newZoom.x2, newZoom.y2);
			zoomImage.update();
			zoomTo(jQuery("#imgWrapper"), newZoom);
		} else {
			var border = jQuery("#picture0 .thumb");
			var img = jQuery("#imgWrapper");

			var increment = 5;
			var position = {'left':img.css('left').slice(0,-2)*1 ,'top':img.css('top').slice(0,-2)*1}
			switch( direction )
			{
				case 'center':
					position.left = (border.width() - img.width()) / 2;
					position.top = (border.height() - img.height()) / 2;
					break;
				case '1left':
					position.left = position.left - increment;
					break;
				case '1right':
					position.left = position.left + increment;
					break;
				case '1up':
					position.top = position.top - increment;
					break;
				case '1down':
					position.top = position.top + increment;
			}
			verifyPosition( position );
		}
		
	}
	
	var setOrientation = function( orientation ) {
		if( orientation == 'flip' ) {
			orientation = (tracer.orientation == 'portrait') ? 'landscape' : 'portrait';
		}
		if ( orientation == "landscape" ) {
			jQuery('.imageBox').css({'width':'200px','height':previewShort / ( previewLong / 200 )+'px'});
			jQuery('.selectImageBox').width('200');
			width = previewLong;
			height = previewShort;
		} else {
			jQuery('.imageBox').css({'width': previewShort / ( previewLong / 200 )+'px','height':'200px'});
			jQuery('.selectImageBox').width(previewShort / ( previewLong / 200 ));
			width = previewShort;
			height = previewLong;
		}
		// set tracer orientation
		tracer.setOrientation(orientation);
		for( var index = 0; index < tracer.picturesRequired; index++) {
			pictureSetup(index);
		}

		// update travcer view 
		jQuery("#tracerContainer").removeClass('landscape').removeClass('portrait');
		jQuery("#tracerContainer").addClass(orientation);
		if( typeof(tracer.effect) !== "undefined" ) 
			showTab(tracer.effect);
	};

	var pictureSetup = function(index) {
		if (!tracer.pictures["picture" + index]) {
			return true;
		}
		var newPicture = tracer.pictures["picture" + index];
		if (tracer.orientation === 'landscape') {
			imgRatio = newPicture.width / newPicture.height;
		} else {
			imgRatio = newPicture.height / newPicture.width;
		}
		if( !pictureValidate(newPicture, index) ) {return false;}
		
		if ( (productRatio > imgRatio && tracer.orientation === 'landscape') || (productRatio < imgRatio && tracer.orientation === 'portrait') ) {
			thumbWidth =  width;
			thumbHeight = Math.floor(newPicture.height / (newPicture.width / width));

			// offset image
			offsetWidth = 0;
			offsetHeight = thumbHeight - height;
			percentWidth = 1;
			percentHeight = height / thumbHeight;
			imgStyle = ' width:' + thumbWidth + 'px;left:0;top:'+ Math.floor(offsetHeight / 2)+'px';
			newPicture.preview.primaryDirection = 'width';
		} else {
			thumbWidth = Math.floor(newPicture.width / (newPicture.height / height));
			thumbHeight = height;

			// offset image
			offsetWidth = thumbWidth - width;
			offsetHeight = 0;
			percentWidth = width / thumbWidth;
			percentHeight = 1;
			imgStyle = ' height:' + thumbHeight + 'px;top:0;left:'+ Math.floor(offsetWidth / 2)+'px';
			newPicture.preview.primaryDirection = 'height';
		}
		// set tracer cropX and cropY
		newPicture.preview.offsetX = Math.abs(offsetWidth / thumbWidth / 2 );
		newPicture.preview.offsetY = Math.abs(offsetHeight / thumbHeight / 2 );
		newPicture.preview.ratio = newPicture.width / newPicture.height;
		newPicture.preview.imgRatio = imgRatio;
		newPicture.preview.width = thumbWidth;
		newPicture.preview.height = thumbHeight;
		newPicture.preview.offsetWidth = offsetWidth;
		newPicture.preview.offsetHeight = offsetHeight;
		newPicture.preview.percentWidth = Math.abs(percentWidth);
		newPicture.preview.percentHeight = Math.abs(percentHeight);
	}
	var activateZoom = function(e) {
		e.preventDefault();
		jQuery("#nextImage").hide();
		jQuery("#prevImage").show();
		jQuery("#btnPreview").show();
		jQuery("#selectImage1").unbind("click");
		jQuery("#prevImage").attr("rel", 0);
		jQuery(".selectImageBox").removeClass("selectedImage");
		jQuery(".selectImageBox").unbind("click");
		jQuery("#selectImage0").bind("click", function(){ selectImage(jQuery(this).attr("rel") ); });
		jQuery("#selectImage1").addClass("selectedImage").bind("click", function(){ activateZoom() ; });

		var zoomX1 = width / 4;
		var zoomY1 = height / 4; 
		var zoomX2 = zoomX1 + width / 2;
		var zoomY2 = zoomY1 + height / 2; 

		// show preview
		var picture = jQuery("#picture0").show().css("overflow","hidden");
		var newPicture = tracer.pictures["picture0"];
		
		var minZoom = (4 / 3);
		var maxZoom = (( product_var.scale * newPicture.height ) / newPicture.preview.height) * 2;
		if( maxZoom > 4 ) { maxZoom = 4; }

		// set zoomee
		if( jQuery('#imgWrapper').data('uiDraggable') )	jQuery('#imgWrapper').draggable( 'destroy' );
		if( jQuery('#imgWrapper').data('uiResizable') )	jQuery('#imgWrapper').resizable( 'destroy' );
		jQuery("#selectImage1 img").attr('src', newPicture.preview.path);

		// make a new zoomer
		jQuery('#picture0').imgAreaSelect({
			handles: true,
			aspectRatio: width + ':' + height,
			x1: zoomX1,
			y1: zoomY1,
			x2: zoomX2,
			y2: zoomY2,
			maxHeight: height / minZoom,
			maxWidth: width / minZoom,
			minHeight: height / maxZoom,
			minWidth: width / maxZoom,
			onSelectEnd: function(img, selection) {
				zoomTo(img, selection);
			},
			onInit: function(img, selection) {
				zoomTo(img, selection);
			},
			onSelectChange: function(img, selection) {
				zoomTo(img, selection);
			}
		});		
		jQuery('.imgareaselect-selection').parent().css('z-index', 20);

	}
	
	var showTab = function(effect) {
		//showTool("imagesTab");
		if( effect == "" || effect === undefined ) {
			effect = jQuery('#effectSelect select').val();
		}
		
		// Destroy old objects and create new ones -- ajprog
		if( jQuery(".wizard .view").data('uiDroppable') )	jQuery(".wizard .view").droppable( "destroy" );
		if( jQuery(".photo").data('uiDraggable') ) 			jQuery(".photo").draggable( "destroy" );
		
		jQuery(".wizard .view").droppable({
			hoverClass : "drophover",
			accept : ".photo",
			fit : "pointer",
			drop : function (event, ui) {
				pictureAdd(ui.draggable.context.id, jQuery(this).attr("rel") );
			}
		});
		jQuery(".photo").draggable({
			containment : "#tracerContainer",
			appendTo : "#tracerContainer",
			helper : "clone",
			revert : "true"
		});
		tracer.setType( effect );

		jQuery('#picture0').imgAreaSelect( {remove : true} );
		jQuery("#selectImage1 .selectTitle").html("Image 2");
		jQuery("#nextImage").html("Next");

		// remove settings from other tracer types draggable
		jQuery(".selectImageBox").hide();
		if (tracer.type == "ZOOM") {
			pictureRemove(1);
			pictureRemove(2);
			if ( tracer.pictureExists(0) == false ){
				handleUpload(0);
			}
			jQuery("#selectImage0").show();
			jQuery("#selectImage1").show();
			jQuery("#selectImage1 .selectTitle").html("Zoomed Image");
			thumbView(0);
		} else if (tracer.picturesRequired == 2 ) {
			pictureRemove(2);
			if ( tracer.pictureExists(0) == false ){
				handleUpload(0);
			}
			jQuery("#selectImage0").show();
			thumbView(0);
			/*
			if (tracer.pictureExists(1) == false && Object.keys(gallery)[1] != undefined) {
				pictureAdd(Object.keys(gallery)[1],1);
			}			
			*/
			jQuery("#selectImage1").show();
			thumbView(1);
		} else {
			if ( tracer.pictureExists(0) == false ){
				handleUpload(0);
			}
			jQuery("#selectImage0").show();
			thumbView(0);		
			jQuery("#selectImage1").show();
			thumbView(1);			
			jQuery("#selectImage2").show();
			thumbView(2);
		}
		if (tracer.pictureExists(0) != false) {
			selectImage(0);
		}
		jQuery(".change a").hide();
		if (tracer.pictureExists(0) && tracer.pictureExists(1)) {
			jQuery("#change1 a").show();
		}
		if (tracer.pictureExists(1) && tracer.pictureExists(2)) {
			jQuery("#change2 a").show();
		}
	};

	var showTool = function(tab) {
		jQuery(".toolContents").hide();
		jQuery("#toolTabs li").removeClass("selected");
		jQuery("#"+tab).closest("li").addClass("selected");
		jQuery(jQuery("#"+tab).attr("href")).show();
		switch(tab) {
			case "uploadTab":
				jQuery(".builder").hide();
				jQuery(".upload_images").show()
				break;
			case "imagesTab":
				jQuery(".upload_images").hide()
				jQuery(".builder").show();
				break;
			case "productTab":
				if (!tracer.validate()) {
					showTab("FLIP2");
				}
				jQuery("#tabs").hide();
				jQuery('#picture0').imgAreaSelect( {remove : true} );
				JQueryPreview(tracer, "preview");
				break;
		}		
	}
	
	var thumbView = function(index) {

		if (!tracer.pictures["picture" + index]) {
			return true;
		}

		var newPicture = tracer.pictures["picture" + index];


		jQuery("#selectImage"+index+" img").attr("src", newPicture.thumbnail.path);
		jQuery("#selectImage"+index+" img").css({
			width: Math.round( newPicture.preview.width / scale ),
			left: -Math.round( (( (1 - (newPicture.preview.offsetX + newPicture.preview.percentWidth)) * newPicture.preview.width) / scale)  ) ,
			top: -Math.round( (( (1 - (newPicture.preview.offsetY + newPicture.preview.percentHeight))  * newPicture.preview.height) / scale)  ) 
		});		
	};
	
	var zoomTo = function(img, selection) {

		if (!selection.width || !selection.height)
		return;

		tracer.pictures['picture0'].selection = selection;
		var zoomScale =  jQuery(".imageBox").css("width").replace("px", "") / selection.width;
		var thumbTop = jQuery("#picture0 .view .thumb").css("top").replace("-", "").replace("px", "");
		var imageTop = jQuery("#imgWrapper").css("top").replace("-", "").replace("px", "");

		var thumbLeft = jQuery("#picture0 .view .thumb").css("left").replace("-", "").replace("px", "");
		var imageLeft = jQuery("#imgWrapper").css("left").replace("-", "").replace("px", "");

		thumbTop = parseInt(thumbTop);
		imageTop = parseInt(imageTop);
		thumbLeft = parseInt(thumbLeft);
		imageLeft = parseInt(imageLeft);

		jQuery('#selectImage1 img').css({
			width: Math.round(zoomScale * jQuery("#imgWrapper").width()),
			left: -Math.round(zoomScale * (selection.x1 + (thumbLeft - imageLeft)) ),
			top: -Math.round(zoomScale * (selection.y1 + (thumbTop - imageTop)) )
		});
	};
	return {
		"init": init,
		"moveImage": moveImage,
		"pictureAdd": pictureAdd,
		"pictureSwap": pictureSwap,
		"pictureRemove": pictureRemove,
		"tracerPreview": tracerPreview,
		"tracerEdit": tracerEdit,
		"setOrientation": setOrientation,
		"selectImage": selectImage,
		"activateZoom": activateZoom,
		"replaceImage": replaceImage,
		"resizeImage": resizeImage
	}
} ());
/**
* @namespace wizard tracer builder
*/

/* This method is used to flip image START*/
function GetImageSize(url) {
    var ImageSize = new Object();

    var $tempImg = jQuery('<img/>');
    $tempImg.attr('src', url);
    ImageSize.height = $tempImg.attr('height');
    ImageSize.width = $tempImg.attr('width');
    return ImageSize;
}
function JQueryPreview(tracer, prefix) {

	var $DivImgPreview;
/*
	jQuery('#DivFrontPage').css('height', '383').css('width', '350').css('float', 'left');
	if ( tracer.preview_image2 != undefined && tracer.preview_image2 != ''  ) {
		jQuery('#DivInsidePage').css('height', '383');
		jQuery('#DivInsidePage').css('width', '350');
		jQuery('#DivInsidePage .Preview2').css('margin-top', 0);
		if ( tracer.text != undefined ) {
			jQuery('#dvInsideText').css('top', tracer.text.top).css('left', tracer.text.left);
		}
	}
	//jQuery('#DivFrontPage').css('background-image', 'url(' + imgTemplateUrl + ')');
	//jQuery('#DivFrontPage').css('background-color', 'Gray');
*/
//	jQuery('#DivFrontPage').html(jQuery('#Preview1').html());
//	jQuery('#DivFrontPage .DivPreviewEffect').attr('id', 'DivImgPreview').html('');
//	jQuery('#DivFrontPage .Preview1').css('margin-top', 0);

	//    jQuery('#DivInsidePage').css('height',insidePageTemplateHeight);
	//    jQuery('#DivInsidePage').css('width',insidePageTemplateWidth);
	//jQuery('#DivInsidePage').css('background-image', 'url(' + imgInsideTemplateUrl + ')');
	$DivImgPreview = jQuery('#picture0 .thumb');
/*
	var dvImgPreviewHeight = 0;
	var dvImgPreviewWidth = 0;
	if ( tracer.orientation != "landscape" ) {
		dvImgPreviewHeight = tracer.previewLong;
		dvImgPreviewWidth =  tracer.previewShort;
		dvImgPreviewX = product_var.portraitActionWindowMarginX;
		dvImgPreviewY = product_var.portraitActionWindowMarginY;
	} else {
		dvImgPreviewHeight = tracer.previewShort;
		dvImgPreviewWidth = tracer.previewLong;
		dvImgPreviewX = product_var.landscapeActionWindowMarginX;
		dvImgPreviewY = product_var.landscapeActionWindowMarginY;
	}
	$DivImgPreview.css('height', dvImgPreviewHeight+"px");
	$DivImgPreview.css('width', dvImgPreviewWidth+"px");

	//    $DivImgPreview.css('top','144px'); // TODO
	//    $DivImgPreview.css('left','300px'); // TODO

	if (tracer.showJqueryPreviewer == "true") {
		$DivImgPreview.css('top', dvImgPreviewY + 'px');
		$DivImgPreview.css('left', dvImgPreviewX + 'px');
	}
*/
	if (tracer.type == "2FLIP") {
		imgData0 = encodeURIComponent(JSON.stringify(tracer.pictures.picture0.preview));
		imgData1 = encodeURIComponent(JSON.stringify(tracer.pictures.picture1.preview));

		$DivImgPreview.crossSlide({
				fade: 1
			},[{src: root + "/static/uploadify/crop.php?file="+imgData0,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 1.4
				},{ 
				src: root+ "/static/uploadify/crop.php?file="+imgData1,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 1.4
			}]
		);
	} else if (tracer.type == "3FLIP") {
		imgData0 = encodeURIComponent(JSON.stringify(tracer.pictures.picture0.preview));
		imgData1 = encodeURIComponent(JSON.stringify(tracer.pictures.picture1.preview));
		imgData2 = encodeURIComponent(JSON.stringify(tracer.pictures.picture2.preview));

		$DivImgPreview.crossSlide({
				fade: 1
			},[{
				src: root + "/static/uploadify/crop.php?file="+imgData0,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 1.4
			},{
				src: root + "/static/uploadify/crop.php?file="+imgData1,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 1.4
			},{
				src: root + "/static/uploadify/crop.php?file="+imgData2,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 1.4
			}]
		);
	} else if (tracer.type == "2ZOOM") {
		imgData0 = encodeURIComponent(JSON.stringify(tracer.pictures.picture0.preview));
		imgData1 = encodeURIComponent(JSON.stringify(tracer.pictures.picture1.preview));

		$DivImgPreview.crossSlide({
				fade: 1
			},[{
				src: root + "/static/uploadify/crop.php?file="+imgData0,
				from: '50% 50% 1x',
				to: '50% 50% 1.5x',
				time: 0.4
			},{
				src: root + "/static/uploadify/crop.php?file="+imgData1,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 0.4
			},{
				src: root + "/static/uploadify/crop.php?file="+imgData0,
				from: '50% 50% 1.5x',
				to: '50% 50% 1x',
				time: 0.4
			},{
				src: root + "/static/uploadify/crop.php?file="+imgData1,
				to: '50% 50% 1x',
				from: '50% 50% 1x',
				time: 0.4
			}]
		);
	} else if (tracer.type == "ZOOM") {
		var image_width, image_height;
		jQuery('#productOverlay').hide();
		jQuery('#loading').show();
		jQuery('#picture0').append("<div id='previewImg1' style='display:none;position:absolute;'><img width='100%' height='100%' src='"+root + "/static/uploadify/crop.php?file="+encodeURIComponent(JSON.stringify(tracer.pictures.picture0.preview))+"' /></div>");
		
		if ( tracer.orientation == "landscape" ) {
			image_width = tracer.previewLong;
			image_height = tracer.previewShort;
		}
		else {
			image_width = tracer.previewShort;
			image_height = tracer.previewLong;
		}

		var fromX = tracer.pictures['picture0'].selection.x1 / image_width;
		var fromY = tracer.pictures['picture0'].selection.y1 / image_height;
		var new_ratio = image_width / tracer.pictures['picture0'].selection.width;		
		var new_width = image_width*new_ratio;
		var new_height = image_height*new_ratio;
		animation = setInterval(function(){ zoomEffect(image_width, image_height, new_width, new_height,fromX,fromY); }, 6000);
	}
}

jQuery("#steps li.previeww").click(function(e) {
e.preventDefault();
			
			JQueryPreview(tracer, "previeww");
		});

function zoomEffect(image_width, image_height, width, height, offsetX, offsetY)
{
	jQuery('#previewImg1').show();
	jQuery('#dvView').hide();
	jQuery('#loading').hide();
	jQuery('#productOverlay').show();
	jQuery('#previewImg1').css({'width':image_width, 'height':image_height,'top':0,'left':0});
	jQuery('#previewImg1').delay(1000).animate({'width':width, 'height':height,'top':-1*offsetY*height,'left':-1*offsetX*width}, 2000).delay(1000).animate({'width':image_width, 'height':image_height,'top':0,'left':0}, 2000);
}



/** 
    function for handling uploads.
**/
function handleUpload(index) {

        jQuery("#file_uploader_overlay").show().css('left', (window.innerWidth - 715) / 2);
	
	jQuery('#file_upload-queue').html('');
        //if browser is IE, we will use uploadify plug-in to upload images. due to uploadifve doesn't support IE at the time.
        if (navigator.userAgent.indexOf("MSIE") != -1) {
            if (jQuery('#uploadify-file_upload').length > 0) {
                jQuery('#file_upload').uploadify('destroy');
            }
            jQuery('#file_upload').uploadify({
                'swf': '/js/uploadify/uploadify.swf',
                'uploader': '/static/uploadify/uploadify.php',
                'fileDesc': 'Image Files',
		'multi': false,
                'removeCompleted': true,
                'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
                'buttonText': "Upload Photo",
		'buttonClass'  : 'secondaryButton',
                //'formData': { 'userId': jQuery('#userId').val(), 'imageId': requestor, 'productId': jQuery('#productId').val() },
                'onUploadSuccess': function (file, response) {
                    data = jQuery.parseJSON(response);
                    if (data.filesize > 0) {
			AddToGallery( JSON.parse(response));
			if( t.wizard.pictureAdd(data.id,index) ) {	jQuery("#file_uploader_overlay").hide(); }
                    } else {
                        jQuery("#error_message_overlay p.error_message").html(data.ErrorMessage);
                        //jQuery("#error_message_overlay").dialog("open")
                    }
                }
            });
        } 

        //anything else will use uploadifive.
        else {
            if (jQuery('#uploadifive-file_upload').length > 0) {
                jQuery('#file_upload').uploadifive('destroy');
            }
            jQuery('#file_upload').uploadifive({
                'uploadScript': '/static/uploadify/uploadify.php?time='+new Date().getTime(),
                'fileDesc': 'Image Files',
                'removeCompleted': true,
                'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
                'buttonText': "Upload Photo",
		'multi': false,
		'buttonClass'  : 'secondaryButton',
		'onUploadComplete': function (file, response) {
                    data = jQuery.parseJSON(response);
                    if (data.filesize > 0) {
			AddToGallery( JSON.parse(response));
			if( t.wizard.pictureAdd(data.id,index) ) {    jQuery("#file_uploader_overlay").hide(); }
                    } else {
                        jQuery("#error_message_overlay p.error_message").html(data.ErrorMessage);
                        //jQuery("#error_message_overlay").dialog("open")
                    }
                }
            });
        }

        //select an image from gallery overlay. 
        jQuery('.select_btn', '#gallery_overlay').click( function () {
            jQuery.ajax({
                url: '/Product/Builder/SelectMedia',
                type: 'POST',
                dataType: 'json',
                data: { "Path": jQuery(this).attr('path'), 'imageId': requestor, 'productId': jQuery('#productId').val() },
                success: function (data) {
                    if (data.filesize > 0) {
                        postUploadUIUpdate(data.File, requestor);
                    } else {
                        jQuery("#error_message_overlay p.error_message").html(data.ErrorMessage);
                        //jQuery("#error_message_overlay").dialog("open")
                    }
                }
            });

            return false;
        })


        if (navigator.userAgent.indexOf("Chrome") != -1) {
            jQuery(".uploadifive-button input[type=file]:last").css("left", "-275px");
        } else if (navigator.userAgent.indexOf("Firefox") != -1 && navigator.appVersion.indexOf("Macintosh") != -1) {
            jQuery(".uploadifive-button input[type=file]:last").css({ "left": "-230px", "top": "0px" });
        } else if (navigator.userAgent.indexOf("Firefox") != -1) {
            jQuery(".uploadifive-button input[type=file]:last").css({ "left": "-175px", "top": "0px" });
        }
        return false;
}


/* END */