var imageId = 'image';
var imageContainerId = 'image-container';
var currentImage;
var currentEffect = 'None';
var currentSize = '';
var defaultSize = '60 x 40 in';

//Sepia tone settings for all browsers
var sepiaR = 0;
var sepiaG = 0;
var sepiaB = 0;

//Sepia tone settings for Internet Explorer
var sepiaIER = 240;
var sepiaIEG = 200;
var sepiaIEB = 150;

var J = jQuery.noConflict();
J(document).ready(function() {
	var originalImage = J('#'+imageId).clone();
	
	//Size Checkbox Change
	J('input[name=canvassize]').change(function(){
		var action = J(this).val();
		
		//Reset image to original
		currentImage = J(originalImage).clone();
		J(currentImage).removeAttr("width");
		J(currentImage).width("");
		J(currentImage).height("");
		J(currentImage).css('display','none');
		J('#'+imageContainerId).append(J(currentImage));	
		switch(action) {
			case '24 x 16 in': //width:70px;
				if (currentSize == '24 x 16 in') break;
				width = 90;
				
				resizeCropImage(width);
				
				currentSize = '24 x 16 in';
				restoreEffect();
			break;
			case '24 x 24 in': //width:70px;height:70px;
				if (currentSize == '24 x 24 in') break;
				width = 90;
				height = 90;
				
				resizeCropImage(width,height);
				
				currentSize = '24 x 24 in';
				restoreEffect();
			break;
			case '28 x 18 in': //width:80px;
				if (currentSize == '28 x 18 in') break;
				width = 100;
				
				resizeCropImage(width);
				
				currentSize = '28 x 18 in';
				restoreEffect();
			break;
			case '28 x 28 in': //width:80px;height:70px;
				if (currentSize == '28 x 28 in') break;
				width = 100;
				height = 100;
				
				resizeCropImage(width,height);
				
				currentSize = '28 x 28 in';
				restoreEffect();
			break;
			case '36 x 24 in': //width:120px;
				if (currentSize == '36 x 24 in') break;
				width = 140;
				
				resizeCropImage(width);
				
				currentSize = '36 x 24 in';
				restoreEffect();
			break;
			case '36 x 36 in': //width:120px;height:120px;
				if (currentSize == '36 x 36 in') break;
				width = 140;
				height = 140;
				
				resizeCropImage(width,height);
				
				currentSize = '36 x 36 in';
				restoreEffect();
			break;
			case '42 x 28 in': //width:140px;
				if (currentSize == '42 x 28 in') break;
				width = 160;
				
				resizeCropImage(width);
				
				currentSize = '42 x 28 in';
				restoreEffect();
			break;
			case '42 x 42 in': //width:140px;height:140px;
				if (currentSize == '42 x 42 in') break;
				width = 160;
				height = 160;
				
				resizeCropImage(width,height);
				
				currentSize = '42 x 42 in';
				restoreEffect();
			break;
			case '48 x 32 in': //width:160px;
				if (currentSize == '48 x 32 in') break;
				width = 180;
				
				resizeCropImage(width);
				
				currentSize = '48 x 32 in';
				restoreEffect();
			break;
			case '48 x 48 in': //width:160px;height:160px;
				if (currentSize == '48 x 48 in') break;
				width = 180;
				height = 180;
				
				resizeCropImage(width,height);
				
				currentSize = '48 x 48 in';
				restoreEffect();
			break;
			case '54 x 36 in': //width:180px;
				if (currentSize == '54 x 36 in') break;
				width = 200;
				
				resizeCropImage(width);
				
				currentSize = '54 x 36 in';
				restoreEffect();
			break;
			case '54 x 54 in': //width:180px;height:180px;
				if (currentSize == '54 x 54 in') break;
				width = 200;
				height = 200;
				
				resizeCropImage(width,height);
				
				currentSize = '54 x 54 in';
				restoreEffect();
			break;
			case '60 x 40 in': //width:200px;
				if (currentSize == '60 x 40 in') break; 
				width = 240;
				resizeCropImage(width);
				currentSize = '60 x 40 in'; 
				restoreEffect();	
			break;
		}
		
	});
	
	//Set Default Width On Load
	J('input[name=canvassize][value='+defaultSize+']').change();
	
	//Effect Checkbox Change
	J('input[name=canvaseffect]').change(function(){
		var action = J(this).val();
		
		if (!currentImage) currentImage = '#'+imageId;
		//alert(action);
		switch(action) {
			case 'Sepia':
				if (currentEffect == 'Sepia') break;
				
				J(currentImage).pixastic("sepia",{'r':sepiaR,'g':sepiaG,'b':sepiaB});
				
				if (!Pixastic.Client.hasCanvasImageData()) {
					//BEGIN: Sepia For IE
					//J('#'+imageContainerId).before('<div id="'+J('#'+imageContainerId).attr('id')+'">'+J('#'+imageContainerId).html()+'</div>');
					//J('#'+imageContainerId).remove();
					
					//currentImage = '#'+imageId;
					
					//Set Width and Height for container
					if (!parseInt(J('#'+imageContainerId).css('width')) || parseInt(J('#'+imageContainerId).css('width')) <= 0) {
						J('#'+imageContainerId).width(J(currentImage).width());
					}
					
					if (!parseInt(J('#'+imageContainerId).css('height')) || parseInt(J('#'+imageContainerId).css('height')) <= 0) {
						J('#'+imageContainerId).height(J(currentImage).height());
					}
					
					
					//Set filter light for container
					var cont = document.getElementById(imageContainerId);
					cont.style.filter = "";
					cont.style.filter = "progid:DXImageTransform.Microsoft.Light()";
					var sepiaLight = 2;
					for (var i = 0;i<sepiaLight;i++){
						cont.filters.item("DXImageTransform.Microsoft.Light").addAmbient(sepiaIER,sepiaIEG,sepiaIEB, 73);
					}			
					
					//Set Grayscale For Image
					var im = document.getElementById(imageId);
					im.style.filter ="progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
					//im.filters.item("DXImageTransform.Microsoft.BasicImage").clear();
					im.filters.item("DXImageTransform.Microsoft.BasicImage").Invert=0;
					//END: Sepia For IE
				}
				currentEffect = 'Sepia';
			break;
			case 'BlackWhite':
				if (currentEffect == 'BlackWhite') break;
				
				if (!J(currentImage).attr('complete')) {
					//Repeat call function if image not loaded
					setTimeout("J('input[name=canvaseffect][value=BlackWhite]').change()",1);
				}else {
					if (!Pixastic.Client.hasCanvasImageData()) {
						var cont = document.getElementById(imageContainerId);
						cont.style.filter = "";
					}
					J('#'+imageContainerId).html(J(currentImage));
					J(currentImage).css('display','block');
					J(currentImage).pixastic("desaturate",{average:false});
					currentEffect = 'BlackWhite';
					currentImage = null;
				}
			
			break;
			case 'None':
				if (currentEffect == 'None') break;
				//Set to original image
				J('#'+imageContainerId).html(originalImage);
				originalImage = J(originalImage).clone();
				currentEffect = 'None';
				
				if (!Pixastic.Client.hasCanvasImageData()) {
					var cont = document.getElementById(imageContainerId);
					cont.style.filter = "";
				}
					
				restoreSize();
			break;	
		}
	});
});

function restoreSize() {
	//Save Current Size
	size = currentSize;
		
	//Set Size Of The originalImage
	currentSize = '';
		
	//Apply Saved Width and Height
	J('input[name=canvassize][value='+size+']').change();
}

function restoreEffect(){
	//Save Current Effect
	effect = currentEffect;
			
	//Set Effect Of The originalImage
	currentEffect = "None";
			
	//Apply Saved Effect
	J('input[name=canvaseffect][value='+effect+']').change();
}

function resizeCropImage(width,height){
	//Reset Container
	J('#'+imageContainerId).width('');
	J('#'+imageContainerId).height('');
	J('#'+imageContainerId).css('overflow','');
		
	//Resize And Crop Image
	if (height) {
		//Default Start Positions To Crop Image
		cropHeight = 0;
		cropWidth = 0;
		if ((J(currentImage).width() > J(currentImage).height()) && height) {
			J(currentImage).height(height);
			cropWidth = Math.round((parseInt(J(currentImage).width())-width)/2);
		}else {
			J(currentImage).width(width);
			cropHeight = Math.round((parseInt(J(currentImage).height())-height)/2);
		}

		//Crop Image
		J('#'+imageContainerId).width(width);
		J('#'+imageContainerId).height(height);
		J('#'+imageContainerId).css('overflow','hidden');
		if (cropWidth) {
			J(currentImage).css('margin-left',-cropWidth);
		}
		if (cropHeight) {
			J(currentImage).css('margin-top',-cropHeight);
		}
		
	//Only Resize Image
	} else {
		J(currentImage).width(width);
		J(currentImage).height("");
	}
	J('#'+imageContainerId).html(J(currentImage));
	J(currentImage).css('display','block');
}