{include file='include/colorbox.inc.tpl'}
{combine_script id='piwecard' load="footer" path='plugins/Piwecard/js/piwecard.js'}

{footer_script require="piwecard"}{literal}
jQuery(document).ready(function(){
	jQuery("#createECardOpen").colorbox({
		inline:true,
		href:"#addECardForm",
		width:"50%",
		minWidth:"500px",
		height:"90%",
		onComplete:function(){
			{/literal}var nbMaxRecipients = {$ecard.nb_max_recipients};{literal}	
			$("#cboxLoadedContent").css('background-color', $("#thePicturePage").css('background-color'));
			$(".ecard_defaultText").each(function(){
				defaultTextFocusOut($(this));
			});
			if (nbMaxRecipients <= 1)
				$('#ecard_add_recipient').css("display", "none");
		}
	});
	
	jQuery(document).on("focusin", ".ecard_defaultText", function() {
		defaultTextFocusIn($(this));
	});
    
    jQuery(document).on("focusout", ".ecard_defaultText", function() {
		defaultTextFocusOut($(this));
	});
	
	function defaultTextFocusIn(element) {
		if (element.val() == element[0].title) {
			element.removeClass("ecard_defaultTextActive");
			element.val("");
		}
	}
	
	function defaultTextFocusOut(element) {
		if (element.val() == "") {
			element.addClass("ecard_defaultTextActive");
			element.val(element[0].title);
		}
	}
	
	$('#ecard_add_recipient').click(function() {
		var num = $('.ecard_name_recipient').length-1;
		var newNum = new Number(num + 1);
		{/literal}var nbMaxRecipients = {$ecard.nb_max_recipients}-1;{literal}
		
		if (newNum <= nbMaxRecipients) {
			var newRecipient = $('#ecard_field_recipient_' + num).clone().attr('id', 'ecard_field_recipient_' + newNum);
			
			newRecipient.find('.ecard_mandatory_fields').remove();
			newRecipient.find('.ecard_error').css("display", "none");
			newRecipient.find('#ecard_recipient_name_' + num + '_error').attr('id', 'ecard_recipient_name_' + newNum + '_error');
			newRecipient.find('#ecard_recipient_email_' + num + '_error').attr('id', 'ecard_recipient_email_' + newNum + '_error');
			newRecipient.find('#ecard_recipient_name_' + num).attr({
													id: 'ecard_recipient_name_' + newNum,
													name: 'ecard_recipient_name[' + newNum+']',
													value: ''
			});
			newRecipient.find('#ecard_recipient_email_' + num).attr({
													id: 'ecard_recipient_email_' + newNum,
													name: 'ecard_recipient_email[' + newNum+']',
													value: ''
			});
			newRecipient.find('#ecard_recipient_name_' + newNum).removeClass("ecard_error_input");
			newRecipient.find('#ecard_recipient_email_' + newNum).removeClass("ecard_error_input");
			defaultTextFocusOut(newRecipient.find('#ecard_recipient_name_' + newNum));
			defaultTextFocusOut(newRecipient.find('#ecard_recipient_email_' + newNum));
			
			$('#ecard_field_recipient_' + num).after(newRecipient);
		}
		if (newNum == nbMaxRecipients) {
			$('#ecard_add_recipient').css("display", "none");
		}
	});
});

function piwecard_checkForm(form) {
	var titleOK = piwecard_checkField(form.ecard_title, 0, 'block');
	var messageOK = piwecard_checkField(form.ecard_message, 0, 'block');
	var senderNameOK = piwecard_checkField(form.ecard_sender_name, 0, 'block');
	var senderEMailOK = piwecard_checkField(form.ecard_sender_email, 1, 'block');
	var recipientNameOK = new Array();
	var recipientEMailOK = new Array();
	var nbAdditionalRecipients = 0;
	var allRecipientNamesOK = false;
	var allRecipientEmailsOK = false;
	
	while(document.getElementById("ecard_recipient_email_" + nbAdditionalRecipients)) {
		var id_name = "ecard_recipient_name_"+nbAdditionalRecipients;
		var id_email = "ecard_recipient_email_"+nbAdditionalRecipients;
		recipientEMailOK[nbAdditionalRecipients] = piwecard_checkField(document.getElementById(id_email), 1, 'block', true);
		if (nbAdditionalRecipients == 0) {
			recipientNameOK[0] = piwecard_checkField(form.ecard_recipient_name_0, 0, 'block');
			recipientEMailOK[0] = piwecard_checkField(form.ecard_recipient_email_0, 1, 'block');
		} else if (recipientEMailOK[nbAdditionalRecipients] && document.getElementById(id_email).value != '') {
			recipientNameOK[nbAdditionalRecipients] = piwecard_checkField(document.getElementById(id_name), 0, 'block', true);
		}
		nbAdditionalRecipients++;
	}
	
	for (var i=0; i<nbAdditionalRecipients; i++) {
		if (recipientNameOK[i] && recipientEMailOK[i]) {
			allRecipientNamesOK = true;
			allRecipientEmailsOK = true;
		} else {
			allRecipientNamesOK = false;
			allRecipientEmailsOK = false;
			break;
		}
	}
	
	if (titleOK && messageOK && senderNameOK && senderEMailOK && allRecipientNamesOK && allRecipientEmailsOK)
		return true;
	else
		return false;
}
{/literal}{/footer_script}

<div style="display:none">
	<div id="addECardForm">
		<form method="post" onsubmit="return piwecard_checkForm(this);">
			<fieldset>
				<legend>{'piwecard_send_stage1'|@translate}</legend>
				<div class="ecard_field">
					<div class="ecard_error" id="ecard_title_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
					<span class="ecard_label">{'Title'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
					<span class="ecard_input_right"><input name="ecard_title" type="text" id="ecard_title" class="ecard_defaultText" title="{$ecard.title}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></span>
				</div>
				<div class="ecard_field">
					<div class="ecard_error" id="ecard_message_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
					<span class="ecard_label">{'piwecard_message'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
					<span class="ecard_input_right"><textarea name="ecard_message" id="ecard_message" class="ecard_defaultText" title="{$ecard.message}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></textarea></span>
				</div>
			</fieldset>
			<fieldset>
				<legend>{'piwecard_send_stage2'|@translate}</legend>
				<div class="ecard_field">
					<div class="ecard_error" id="ecard_sender_name_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
					<div class="ecard_error" id="ecard_sender_email_error">{'piwecard_error'|@translate} {'piwecard_error_email'|@translate}</div>
					<span class="ecard_label">{'piwecard_sender'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
					<span class="ecard_name"><input name="ecard_sender_name" type="text" id="ecard_sender_name" maxlength="100" value="{$ecard.sender_name}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></span>
					<span class="ecard_email"><input name="ecard_sender_email" type="text" id="ecard_sender_email" maxlength="100" {$ecard.changemail} value="{$ecard.sender_email}"  onblur="piwecard_checkField(this, 1, 'block');" onfocus="remove_error_style(this);"></span>
				</div>
				<div class="ecard_field" id="ecard_field_recipient_0">
					<div class="ecard_error" id="ecard_recipient_name_0_error">{'piwecard_error'|@translate} {'piwecard_error_text'|@translate}</div>
					<div class="ecard_error" id="ecard_recipient_email_0_error">{'piwecard_error'|@translate} {'piwecard_error_email'|@translate}</div>
					<span class="ecard_label">{'piwecard_recipient'|@translate}<span class="ecard_mandatory_fields">*</span> :</span>
					<span class="ecard_name ecard_name_recipient"><input name="ecard_recipient_name[0]" type="text" id="ecard_recipient_name_0" class="ecard_defaultText" maxlength="100" title="{$ecard.recipient_name}" onblur="piwecard_checkField(this, 0, 'block');" onfocus="remove_error_style(this);"></span>
					<span class="ecard_email"><input name="ecard_recipient_email[0]" type="text" id="ecard_recipient_email_0" class="ecard_defaultText" maxlength="100" title="{$ecard.recipient_email}" onblur="piwecard_checkField(this, 1, 'block');" onfocus="remove_error_style(this);"></span>
				</div>
				<a href="javascript:void(0)" id="ecard_add_recipient">{'piwecard_add_recipient'|@translate}</a>
			</fieldset>
			<fieldset>
				<legend>{'piwecard_send_stage3'|@translate}</legend>
				<div class="ecard_field">
					<span class="ecard_label"><label for="ecard_copy">{'piwecard_sender_copy'|@translate} :</label></span>
					<span><input type="checkbox" id="ecard_copy" name="ecard_copy" {$ecard.copy}/></span>
					<div class="clear"></div>
				</div>
				<div class="ecard_field">
					<span class="ecard_label">{'piwecard_email_format'|@translate} : </span>
						<span>
						{foreach from=$ecard_email_format item=ecard_email_format}
							<input type="radio" name="ecard_email_format" id="ecard_email_format_{$ecard_email_format.id}" value="{$ecard_email_format.id}" {$ecard_email_format.selected}><label for="ecard_email_format_{$ecard_email_format.id}"> {$ecard_email_format.name} </label>
						{/foreach}
					</span>
				</div>
					<div class="ecard_field">
						{if isset($ecard_validity)}
							<span class="ecard_label">{'piwecard_validity_label'|@translate} :</span>
							<span>
								{foreach from=$ecard_validity item=ecard_validity}
									<input type="radio" name="ecard_validity" id="ecard_validity_{$ecard_validity.id}" value="{$ecard_validity.id}" {$ecard_validity.selected}><label for="ecard_validity_{$ecard_validity.id}"> {$ecard_validity.name} </label>
								{/foreach}
							</span>
						{else}
							<input type="hidden" name="ecard_validity" id="ecard_validity" value="{$ecard_validity_hidden}">
						{/if}
					</div>
			</fieldset>
			<fieldset>
				<legend>{'piwecard_send_stage4'|@translate}</legend>
				<div class="ecard_submit">
					<input type="submit" name="ecard_submit" value="{'piwecard_send'|@translate}" />
				</div>
			</fieldset>
			<div>
				<span class="ecard_mandatory_fields">* {'piwecard_send_mandatory_fields'|@translate}</span>
			</div>
		</form>
	</div>
</div>
<div>
	<a href="#" class="createECardOpen" id="createECardOpen" title="{'piwecard_send_link'|@translate}">{'piwecard_send_link'|@translate}</a>
</div>