function $m(theVar){
	return document.getElementById(theVar)
}

function remove(theVar){
	var theParent = theVar.parentNode;
	theParent.removeChild(theVar);
}

function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	    obj.addEventListener(evType, fn, true)
	if(obj.attachEvent)
	    obj.attachEvent("on"+evType, fn)
}

function removeEvent(obj, type, fn){
	if(obj.detachEvent){
		obj.detachEvent('on'+type, fn);
	}else{
		obj.removeEventListener(type, fn, false);
	}
}

function isWebKit(){
	return RegExp(" AppleWebKit/").test(navigator.userAgent);
}

function cancelsys() {
	document.getElementById('filename').value = '';
	document.getElementById('cropper_main').style.display = 'none';
	document.getElementById('save_all').style.display = 'none';				
	document.getElementById('main_image').innerHTML = ' ';
	document.getElementById('category_image').innerHTML = ' ';
	document.getElementById('feature_image').innerHTML = ' ';
	document.getElementById('main_instructions').innerHTML = 'Please wait for the upload to complete.';	
}

function cancelsys2() {
	document.getElementById('save_all').style.display = 'none';				
	document.getElementById('main_image').innerHTML = ' ';
	document.getElementById('category_image').innerHTML = ' ';
	document.getElementById('feature_image').innerHTML = ' ';
	document.getElementById('main_instructions').innerHTML = 'Please wait for the upload to complete.';	
}

function validate(large_name, main_name, cat_name, feat_name, main_w, main_h, cat_w, cat_h, feat_w, feat_h, client, path) {
	if (large_name == 'err') {
		$m('cropper_main').style.display = "none";
		alert("Your image must have a width of at least 300.");
	}
	else {
		
		//Begin Crop System
		
		function cat_preview(img, selection) {
			var scaleX = cat_w / selection.width; 
			var scaleY = cat_h / selection.height; 
			
			//$('#category + div + div > img ').css({ 
			$(document.getElementById('category_crop')).css({
				width: Math.round(scaleX * main_w) + 'px', 
				height: Math.round(scaleY * main_h) + 'px',
				marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
				marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
			});
			
			$('#cat_x1').val(selection.x1);
			$('#cat_y1').val(selection.y1);
			$('#cat_x2').val(selection.x2);
			$('#cat_y2').val(selection.y2);
			$('#cat_w').val(selection.width);
			$('#cat_h').val(selection.height);
		}
		
		
		function feat_preview(img, selection) {
			var scaleX = feat_w / selection.width; 
			var scaleY = feat_h / selection.height; 
			
			//$('#category + div + div > img ').css({ 
			$(document.getElementById('feature_crop')).css({
				width: Math.round(scaleX * main_w) + 'px', 
				height: Math.round(scaleY * main_h) + 'px',
				marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
				marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
			});
			
			$('#feat_x1').val(selection.x1);
			$('#feat_y1').val(selection.y1);
			$('#feat_x2').val(selection.x2);
			$('#feat_y2').val(selection.y2);
			$('#feat_w').val(selection.width);
			$('#feat_h').val(selection.height);
		
		}
				
			//Save All Function 
			$('#save_all').click(function() {
				
				var cat_x1 = $('#cat_x1').val();
				var cat_y1 = $('#cat_y1').val();
				var cat_x2 = $('#cat_x2').val();
				var cat_y2 = $('#cat_y2').val();
				var cat_w = $('#cat_w').val();
				var cat_h = $('#cat_h').val();
				var feat_x1 = $('#feat_x1').val();
				var feat_y1 = $('#feat_y1').val();
				var feat_x2 = $('#feat_x2').val();
				var feat_y2 = $('#feat_y2').val();
				var feat_w = $('#feat_w').val();
				var feat_h = $('#feat_h').val();
				
				createResize(document.iteminfo,'cropmod_upload.php?subtype=createslices&large_name='+large_name+'&main_name='+main_name+'&cat_name='+cat_name+'&feat_name='+feat_name+'&itemid='+client+'&cat_x1='+cat_x1+'&cat_y1='+cat_y1+'&cat_x2='+cat_x2+'&cat_y2='+cat_y2+'&cat_w='+cat_w+'&cat_h='+cat_h+'&feat_x1='+feat_x1+'&feat_y1='+feat_y1+'&feat_x2='+feat_x2+'&feat_y2='+feat_y2+'&feat_w='+feat_w+'&feat_h='+feat_h);
				
				document.getElementById('filename').value = '';
				document.getElementById('cropper_main').style.display = 'none';
				document.getElementById('save_all').style.display = 'none';				
				document.getElementById('main_image').innerHTML = ' ';
				document.getElementById('category_image').innerHTML = ' ';
				document.getElementById('feature_image').innerHTML = ' ';
				document.getElementById('main_instructions').innerHTML = 'Please wait for the upload to complete.';		
				
			});
			
		
			//Initiate System		
			
			//Load Image in Category Crop Div
			document.getElementById('category_image').innerHTML = '<img id="category_crop" src="'+path+large_name+'" style="position: relative;" alt="Category Crop" /> <br />';
			
			//Apply Crop System to that Div
			$('#main_crop').imgAreaSelect({ aspectRatio: '1:'+cat_h/cat_w, onSelectChange: cat_preview });
			
			//Change Instructions
			document.getElementById('main_instructions').innerHTML = 'Please create a category display image.';
			
			//Show Create Button
			document.getElementById('create_cat').style.display = "";
			
		
		//Create Click Function for Cat's Create	
		$('#create_cat').click(function() {	
										
			var cat_x1 = $('#cat_x1').val();
			var cat_y1 = $('#cat_y1').val();
			var cat_x2 = $('#cat_x2').val();
			var cat_y2 = $('#cat_y2').val();
			var cat_w = $('#cat_w').val();
			var cat_h = $('#cat_h').val();
			
			if(cat_x1=="" || cat_y1=="" || cat_x2=="" || cat_y2=="" || cat_w=="" || cat_h=="") {
				
				alert("You must make a selection first");
				return false;
				
			}				
			
			//Hide Create Button
			document.getElementById('create_cat').style.display = "none";			
			
			//Load Image in Feature Crop Div
			document.getElementById('feature_image').innerHTML = '<img id="feature_crop" src="'+path+large_name+'" style="position: relative;" alt="Feature Crop" /> <br />';
			
			//Apply Crop System to that Div
			$('#main_crop').imgAreaSelect({ aspectRatio: '1:'+feat_h/feat_w, onSelectChange: feat_preview, hide:true });
			
			//Change Instructions
			document.getElementById('main_instructions').innerHTML = 'Please create a feature display image.';
			
			//Show Create Button
			document.getElementById('create_feat').style.display = "";
			
			
				//Create Clck Function for Feature Create Button			
				$('#create_feat').click(function() {
												 
					var feat_x1 = $('#feat_x1').val();
					var feat_y1 = $('#feat_y1').val();
					var feat_x2 = $('#feat_x2').val();
					var feat_y2 = $('#feat_y2').val();
					var feat_w = $('#feat_w').val();
					var feat_h = $('#feat_h').val();
					
					if(feat_x1=="" || feat_y1=="" || feat_x2=="" || feat_y2=="" || feat_w=="" || feat_h=="") {
						
						alert("You must make a selection first");
						return false;
						
					}	
			
					//Hide Create Button
					document.getElementById('create_feat').style.display = "none";	
					
					//Clear Cop Selection
					feat_preview($('#main_crop'), '');
					
					//Destroy Crop
					$('#main_crop').imgAreaSelect({ aspectRatio: '1', hide: true, disable: true });
					
					//Change Instructions
					document.getElementById('main_instructions').innerHTML = 'You are done! Please save your work.';
					
					//Show Save Button
					document.getElementById('save_all').style.display = "";
					
				});
			
		});
				
	}
}



function cropperUpload(form,url_action){
	var html_show_loading = '<img class="loader" src="images/cropper/load.gif">';
	var html_error_htt = 'error';
	var id_element = 'main_image';
	var detectWebKit = isWebKit();
	form = typeof(form)=="string"?$m(form):form;
	var erro="";
	
	if(form==null || typeof(form)=="undefined"){
		erro += "The form of 1st parameter does not exists.\n";
	}else if(form.nodeName.toLowerCase()!="form"){
		erro += "The form of 1st parameter its not a form.\n";
	}
	
	if(erro.length>0){
		alert("Error in call ajaxUpload:\n" + erro);
		return;
	}
	
	var iframe = document.createElement("iframe");
	iframe.setAttribute("id","ajax-temp");
	iframe.setAttribute("name","ajax-temp");
	iframe.setAttribute("width","0");
	iframe.setAttribute("height","0");
	iframe.setAttribute("border","0");
	iframe.setAttribute("style","width: 0; height: 0; border: none;");
	form.parentNode.appendChild(iframe);
	window.frames['ajax-temp'].name="ajax-temp";
	var doUpload = function(){
		removeEvent($m('ajax-temp'),"load", doUpload);
		var cross = "javascript: ";
		
		cross += "window.parent.$m('main_image').innerHTML = document.body.innerHTML; parent.validate(document.getElementById('large_imgname').value, document.getElementById('main_imgname').value, document.getElementById('category_imgname').value, document.getElementById('feature_imgname').value, document.getElementById('main_width').value, document.getElementById('main_height').value, document.getElementById('category_width').value, document.getElementById('category_height').value, document.getElementById('feature_width').value, document.getElementById('feature_height').value, document.getElementById('client_id').value, document.getElementById('file_path').value); void(0);";
		
		$m('ajax-temp').src = cross;
		
		if(detectWebKit){
        	remove($m('ajax-temp'));
			validate();
        }else{
			setTimeout(function(){ remove($m('ajax-temp'))}, 250);
        }
    }
	addEvent($m('ajax-temp'),"load", doUpload);
	form.setAttribute("target","ajax-temp");
	form.setAttribute("action",url_action);
	form.setAttribute("method","post");
	form.setAttribute("enctype","multipart/form-data");
	form.setAttribute("encoding","multipart/form-data");
	if(html_show_loading.length > 0){
		$m('main_image').innerHTML = html_show_loading;
	}
	form.submit();
	
	form.setAttribute("target","_self");
	form.setAttribute("action", "");
}


function resetzoom() {

	$(function() {																	
		var jhdopts =																
		{																			
			zoomWidth: 150,														
			zoomHeight: 150,													
			zoomType:'reverse'												
		}																	
		$(".jqzoom").jqzoom(jhdopts);										
	});															

}

function assignnames(large, main, cat, feat) {
	document.getElementById('item_image').value = main;
	document.getElementById('item_closeup_image').value = large;
	document.getElementById('item_category_image').value = cat;
	document.getElementById('item_feature_image').value = feat;
}

function createResize(form,url_action){
	var html_show_loading = 'loading images preview... <img class="loader" src="images/cropper/miniload.gif">';
	var id_element = 'full_preview';
	var detectWebKit = isWebKit();
	
	form = typeof(form)=="string"?$m(form):form;
	var erro="";
	
	if(form==null || typeof(form)=="undefined"){
		erro += "The form of 1st parameter does not exists.\n";
	}else if(form.nodeName.toLowerCase()!="form"){
		erro += "The form of 1st parameter its not a form.\n";
	}
	
	if(erro.length>0){
		alert("Error in call ajaxUpload:\n" + erro);
		return;
	}
	
	var iframe = document.createElement("iframe");
	iframe.setAttribute("id","ajax-temp2");
	iframe.setAttribute("name","ajax-temp2");
	iframe.setAttribute("width","0");
	iframe.setAttribute("height","0");
	iframe.setAttribute("border","0");
	iframe.setAttribute("style","width: 0; height: 0; border: none;");
	form.parentNode.appendChild(iframe);
	window.frames['ajax-temp2'].name="ajax-temp2";
	var doUpload = function(){
		removeEvent($m('ajax-temp2'),"load", doUpload);
		var cross = "javascript: ";
		
		cross += "window.parent.$m('full_preview').innerHTML = document.body.innerHTML; parent.resetzoom(); parent.assignnames(document.getElementById('final_large_imgname').value, document.getElementById('final_main_imgname').value, document.getElementById('final_category_imgname').value, document.getElementById('final_feature_imgname').value); void(0);";
		
		$m('ajax-temp2').src = cross;
		
		if(detectWebKit){
        	remove($m('ajax-temp2'));
			validate();
        }else{
			setTimeout(function(){ remove($m('ajax-temp2'))}, 250);
        }
    }
	
	addEvent($m('ajax-temp2'),"load", doUpload);
	
	form.setAttribute("target","ajax-temp2");
	form.setAttribute("action",url_action);
	form.setAttribute("method","post");
	form.setAttribute("enctype","multipart/form-data");
	form.setAttribute("encoding","multipart/form-data");
	if(html_show_loading.length > 0) {
		$m('full_preview').innerHTML = html_show_loading;
	}
	form.submit();
	
	form.setAttribute("target","_self");
	form.setAttribute("action", "");
}