//VARS///////////////////////////////////////////////////////////////////////////////////////////////////////////
var imgUploaded = '';
var idTemplate = '';
var imgTemplate = '';
var txtFirstName = '';
var txtLastName = '';
var txtNumber = '';
var txtTeam = '';
var txtPosition = '';
var hitCount = 0;

//MAIN///////////////////////////////////////////////////////////////////////////////////////////////////////////
jQuery(document).ready(function() {
								
	jQuery('#download_image').bind('click',onPrintImageClick);
	jQuery('#update_image').bind('click',function(){jQuery("form#design_form").submit();});

	jQuery("#uploadify").uploadify({
		'uploader'       : 'jquery/uploadify/scripts/uploadify.swf',
		'script'         : 'jquery/uploadify/scripts/uploadify.php',
		'checkScript' 	 : 'jquery/uploadify/scripts/check.php',
		'cancelImg'      : 'jquery/uploadify/cancel.png',
		'folder'         : 'uploads',
		'queueID'        : 'fileQueue',
		'auto'           : true,
		'multi'          : false,
		'queueSizeLimit' : 999,
		'fileDesc'		 : 'You can only upload .jpg files that are less than 2MB. Your image will be automatically re-sized to fit the hockey card, however optimal size is 240 x 336 pixels.',
		'fileExt'		 : '*.jpg',
		'sizeLimit'		 : 2048000,
		'onComplete'	 : function(event, queueID, fileObj, response, data){
			jQuery('#image_placeholder_text').hide();
			jQuery("#image_overlay_position").fadeIn('fast',function(){
				jQuery('#uploaded_image_container').image(fileObj.filePath + '?' + Math.random(),'uploaded_image',function(){
					imgUploaded = '..' + fileObj.filePath;
					jQuery('#uploaded_image').show();
					jQuery('#image_overlay_position').fadeOut('fast',function(){
						jQuery('#upload_complete_text').show();
						jQuery('#upload_complete').bind('click',onUploadCompleteClick);
					});
				})
			});
		} 
	});
	
	function onUploadCompleteClick(){
		
		setInputs();
		resetForm();
		getFormValues();
		
		jQuery('#info_overlay').fadeIn('fast',function(){
			jQuery("#upload_form").slideUp("fast",function(){
				jQuery("#design_form").slideDown("fast",function(){
					jQuery('#change_uploaded_image').show();
					jQuery('#template1').bind('click', function(){jQuery("form#design_form").submit();});
					jQuery('#template2').bind('click', function(){jQuery("form#design_form").submit();});
					jQuery('#template3').bind('click', function(){jQuery("form#design_form").submit();});
					jQuery('#template4').bind('click', function(){jQuery("form#design_form").submit();});
				});
			});
		});
	}
	
	jQuery("#design_form").submit(function(){
		setInputs();
		getFormValues();
		jQuery('#template_overlay').fadeIn('fast',function(){	
			jQuery('#info_overlay').fadeIn('fast',function(){	
				jQuery('#image_overlay_position').fadeIn('fast',function(){	
					if(txtPosition=="0") txtPosition="";
					jQuery.post("ajax/init_image.php",{
						uploaded_image: imgUploaded,
						template_id: idTemplate,
						template_image: imgTemplate,
						first_name: txtFirstName,
						last_name: txtLastName,
						jersey_number: txtNumber,
						team_name: txtTeam,
						position_name: txtPosition
					},function(data){
						jQuery("#uploaded_image").fadeOut("fast",function(){
							jQuery("#uploaded_image").remove();
							jQuery('#uploaded_image_container').image(data.image,'uploaded_image',function(){
								jQuery('#uploaded_image').fadeIn('fast',function(){
									jQuery("#image_overlay_position").fadeOut('fast',function(){
										jQuery('#template_overlay').fadeOut('fast',function(){
											jQuery('#info_overlay').fadeOut('fast',function(){
												jQuery('#first_name').blur(function(){jQuery("form#design_form").submit();});
												jQuery('#last_name').blur(function(){jQuery("form#design_form").submit();});
												jQuery('#position_name').change(function(){jQuery("form#design_form").submit();});
												jQuery('#team_name').change(function(){jQuery("form#design_form").submit();});
												jQuery('#jersey_number').bind('keydown',[jQuery('#position_name')],onNumericTextFieldKeyDown).blur(function(){jQuery("form#design_form").submit();});
											});
										});
									});
								});
							});
						});
					},"json");
				});
			});
		});
		return false;
	});
	
}); //END ON DOC READY

//CUSTOM FUNCTIONS///////////////////////////////////////////////////////////////////////////////////////////////////////////////
function getFormValues(){
	imgUploaded = imgUploaded;
	idTemplate = jQuery("input[@name=radio_templates]:checked").val();
	imgTemplate = '../img/overlay_style'+idTemplate+'.png';
	txtFirstName = jQuery('#first_name').val();
	txtLastName = jQuery('#last_name').val();
	txtNumber = jQuery('#jersey_number').val();
	txtTeam = jQuery('#team_name').val();
	txtPosition = jQuery('#position_name').val();
}

function disableForm(){
	jQuery('.radio_template_check').attr("checked", false); 
	jQuery('#first_name').attr('disabled',true);
	jQuery('#last_name').attr('disabled',true);
	jQuery('#team_name').attr('disabled',true);
	jQuery('#jersey_number').attr('disabled',true);
	jQuery('#position_name').attr('disabled',true);
}

function resetForm(){
	jQuery('.radio_template_check').attr("checked", false); 
	jQuery('#first_name').val(""); 
	jQuery('#last_name').val(""); 
	jQuery('#jersey_number').val(""); 
	jQuery('#team_name').val(""); 
	jQuery('#position_name option:contains("0")').attr("selected", true);
}

function onNumericTextFieldKeyDown(event){
	if (event.keyCode == 46 || event.keyCode == 8 ){
		hitCount = hitCount - 1;
		if(hitCount==0) event.data[0].attr('disabled',true);
	}else {
		if (event.keyCode < 48 || event.keyCode > 57 ){
			event.preventDefault();
		}else{
			hitCount = hitCount + 1;
			event.data[0].attr('disabled',false);
		}
	}
}

function onPrintImageClick(event){
	$("#uploaded_image_container").print();
	return( false );
}

function setInputs(){
	var id = parseInt(jQuery("input[@name=radio_templates]:checked").val());
	switch(id){
		case 1:
			jQuery('#jersey_number_row').show();
			jQuery('#team_name_row').hide();
			jQuery('#info_text').html('3. Enter Your first, last, jersey number and position name.');
			postLastName = jQuery('#jersey_number');
			break;
		case 2:
			jQuery('#jersey_number_row').hide();
			jQuery('#team_name_row').hide();
			jQuery('#info_text').html('3. Enter Your first, last and position name.');
			postLastName = jQuery('#position_name');
			break;
		case 3:
			jQuery('#jersey_number_row').hide();
			jQuery('#team_name_row').show();
			jQuery('#info_text').html('3. Enter Your first, last, team and position name.');
			postLastName = jQuery('#team_name');
			break;
		case 4:
			jQuery('#jersey_number_row').hide();
			jQuery('#team_name_row').show();
			jQuery('#info_text').html('3. Enter Your first, last, team and position name.');
			postLastName = jQuery('#team_name');
			break;
		default:
			jQuery('#team_name_row').hide();
			jQuery('#jersey_number_row').hide();
			jQuery('#info_text').html('3. Enter Your first, last and position name.');
			break;
		
	}
}

//GLOBAL FUNCTIONS///////////////////////////////////////////////////////////////////////////////////////////////////////////////
jQuery.fn.image = function(src, id, f){ 
	return this.each(function(){ 
		var i = new Image(); 
		i.src = src;
		i.onload = f;
		i.id = id;
		this.appendChild(i);
	}); 
}

jQuery.fn.print = function(){
 if (this.size() > 1){
	 this.eq( 0 ).print();
	 return;
 } else if (!this.size()){
	 return;
 }
 var strFrameName = ("printer-" + (new Date()).getTime());
 var jFrame = $( "<iframe name='" + strFrameName + "'>" );
 jFrame.css("width","1px").css("height","1px").css("position","absolute").css("left","-9999px").appendTo($("body:first"));
 var objFrame = window.frames[ strFrameName ];
 var objDoc = objFrame.document;
 var jStyleDiv = $( "<div>" ).append($( "style" ).clone());
 objDoc.open();
 objDoc.write( "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" );
 objDoc.write( "<html>" );
 objDoc.write( "<body>" );
 objDoc.write( "<head>" );
 objDoc.write( "<title>" );
 objDoc.write( document.title );
 objDoc.write( "</title>" );
 objDoc.write( jStyleDiv.html() );
 objDoc.write( "</head>" );
 objDoc.write( this.html() );
 objDoc.write( "</body>" );
 objDoc.write( "</html>" );
 objDoc.close();
 objFrame.focus();
 objFrame.print();
 setTimeout(function(){jFrame.remove();},(60 * 1000));
}