var customerservice = new Customerservice();



/**
 * Customerservice
 * @extends Page
 * @constructor
 */
function Customerservice()
{
	// Call the prototype's constructor
	Page.call(this);

	// Private
	var self			= this,
		dom				= new DOM();

	this.activateCustomerserviceFormValidation 	= activateCustomerserviceFormValidation;
	this.showCustomerImageGallery				= showExampleImageGallery;
	this.activateCustomerserviceInfoboxes		= activateCustomerserviceInfoboxes;
	this.callMeNow								= callMeNow;

	// Constructor
	self.addEventListener(Page.LOADED, activateCustomerserviceFormValidation);
	self.addEventListener(Page.LOADED, showExampleImageGallery);
	self.addEventListener(Page.LOADED, activateCustomerserviceInfoboxes);
	self.addEventListener(Page.LOADED, callMeNow);
	

	/**
	 * activate the validation of the customerservice form
	 */
	function activateCustomerserviceFormValidation()
	{
		if (!dom.getById("customerservice_form")) 
		{
			return false;
		}

		/**
		 * 	Fields
		 */
		var customerserviceForm	= new Form(dom.getById("customerservice_form")),
		customerserviceFormRows	= new FormRows(),
		customerserviceFormNotices	= new FormNotices();

		customerserviceForm.addEventListener(Form.FIELD_ADDED, customerserviceFormRows.add);
		customerserviceForm.addEventListener(Form.VALIDATION_COMPLETE, customerserviceFormNotices.update);

		// Lastname
		var lastNameField = new InputField(dom.getById("customerservice_lastname"));
		
		lastNameField.addRequirement(new FormatRequirement(FormatRequirement.NOT_EMPTY, new Notice(getVousOuTu("U heeft", "Je hebt") + " " + getVousOuTu("uw", "je") + " achternaam niet ingevuld", [getVousOuTu("U heeft", "Je hebt") + " " + getVousOuTu("uw", "je") + " ", dom.create("a", {href : "#" + lastNameField.getElement().id, onclick: lastNameField.focus}, ["achternaam"]), " niet ingevuld"])));
		lastNameField.addEventListener(Field.VALIDATION_COMPLETE, customerserviceFormRows.update);
		customerserviceForm.addField(lastNameField);

		// E-mail address
		var emailAddressField = new InputField(dom.getById("customerservice_email"));
		emailAddressField.addRequirement(new FormatRequirement(FormatRequirement.NOT_EMPTY, new Notice(getVousOuTu("U heeft", "Je hebt") + " " + getVousOuTu("uw", "je") + " e-mailadres niet ingevuld", [getVousOuTu("U heeft", "Je hebt") + " " + getVousOuTu("uw", "je") + " ", dom.create("a", {href : "#" + emailAddressField.getElement().id, onclick: emailAddressField.focus}, ["e-mailadres"]), " niet ingevuld"])));
		emailAddressField.addRequirement(new FormatRequirement(FormatRequirement.EMAIL_ADDRESS, new Notice(getVousOuTu("U heeft", "Je hebt") + " geen geldig e-mailadres ingevuld", [getVousOuTu("U heeft", "Je hebt") + " geen geldig ", dom.create("a", {href : "#" + emailAddressField.getElement().id, onclick: emailAddressField.focus}, ["e-mailadres"]), " ingevuld"])));

		emailAddressField.addEventListener(Field.VALIDATION_COMPLETE, customerserviceFormRows.update);
		customerserviceForm.addField(emailAddressField);

		// Subject
		var subjectField = new InputField(dom.getById("customerservice_subject"));
		
		subjectField.addRequirement(new FormatRequirement(FormatRequirement.NOT_EMPTY, new Notice(getVousOuTu("U heeft", "Je hebt") + " geen onderwerp ingevuld", [getVousOuTu("U heeft", "Je hebt") + " geen ", dom.create("a", {href : "#" + subjectField.getElement().id, onclick: subjectField.focus}, ["onderwerp"]), " ingevuld"])));
		subjectField.addEventListener(Field.VALIDATION_COMPLETE, customerserviceFormRows.update);
		customerserviceForm.addField(subjectField);

		// question
		var questionField = new InputField(dom.getById("customerservice_messagebody"));
		
		questionField.addRequirement(new FormatRequirement(FormatRequirement.NOT_EMPTY, new Notice(getVousOuTu("U heeft", "Je hebt") + " geen vraag ingevuld", [getVousOuTu("U heeft", "Je hebt") + " geen ", dom.create("a", {href : "#" + questionField.getElement().id, onclick: questionField.focus}, ["vraag"]), " ingevuld"])));
		questionField.addEventListener(Field.VALIDATION_COMPLETE, customerserviceFormRows.update);
		customerserviceForm.addField(questionField);
	}

	// Highlight form rows
	$(document).ready(function(){
		rowHighlighting($("#customerservice_form")); //Marijn edit: refactor and jquery solotion
	})

	/**
	 * Adds and updates validation and icons to form rows
	 */
	function FormRows()
	{
		var fields = {};

		this.add		= add;
		this.update		= update;
		this.loading	= loading;

		function add(event)
		{
			if (event.target in fields == false && (event.target instanceof InputField || event.target instanceof SelectField || event.target instanceof DateField))
			{
				var field = (fields[event.target] = event.target);

				// Get the row
				field.row = dom.extend(field.getElement().parentNode);

				if (field.row.hasClass("validation") == false)
				{
					field.row.addClass("validation");

					// Create and append notifier
					field.notifier = dom.create("span", {className : "validation"}, [
						dom.create("img", {src : "/images/default/validation_neutral_icon.png"})
					]);

					field.row.appendChild(fields[field].notifier);

					// Set notices
					field.failedNotice = null;
					field.passedNotice = null;

					// Validate (if the field has a value)
					if ((event.target instanceof InputField || event.target instanceof SelectField || event.target instanceof DateField) && field.getElement().value != "")
					{
						field.validate(Field.VALIDATION_TRIGGER_FIELD_ADDED);
					}
				}
			}
		}

		function update(event)
		{
			var field = fields[event.target];

			if (field == undefined)
			{
				throw new Error("Unknown field.");
			}

			// If there's a notice present, remove it
			if (field.notifier.lastChild && field.notifier.lastChild.nodeType == 3)
			{
				field.notifier.removeChild(field.notifier.lastChild);
			}

			// Clear the classes, if present
			field.row.removeClass("failed");
			field.row.removeClass("passed");

			// Validation failed, update the notifier
			if (field.getValid() == false)
			{
				field.passedNoticeNotice = null;

				if (field.failedNotice == null || field.getValidationTrigger() == Field.VALIDATION_TRIGGER_BLUR || field.getValidationTrigger() == Field.VALIDATION_TRIGGER_CHANGE || field.getValidationTrigger() == Field.VALIDATION_TRIGGER_SUBMIT)
				{
					if (field.getFailedNotice() != null)
					{
						field.failedNotice = field.getFailedNotice().getPlainText();
					}
				}

				field.row.addClass("failed");

				field.notifier.getFirstByTagName("img").src = "/images/default/validation_failed_icon.png";

				if (field.failedNotice != null)
				{
					field.notifier.appendChild(dom.createText(field.failedNotice));
				}
			}
			// Passed validation
			else if (field.getValid() == true)
			{
				field.failedNotice = null;
			
				if (field.getPassedNotice() != null)
				{
					field.passedNotice = field.getPassedNotice().getPlainText();
				}

				field.row.addClass("passed");

				field.notifier.getFirstByTagName("img").src = "/images/default/validation_passed_icon.png";

				if (field.passedNotice != null)
				{
					field.notifier.appendChild(dom.createText(field.passedNotice));
				}
			}
			// No validation required
			else if (field.getValid() == null)
			{
				field.notifier.getFirstByTagName("img").src = "/images/default/validation_neutral_icon.png";
			}
		}

		function loading(event)
		{
			var field = fields[event.target];

			if (field == undefined)
			{
				throw new Error("Unknown field.");
			}

			if (event.type == Field.VALIDATION_STARTED)
			{
				field.row.addClass("loading");
			}
			else if (event.type == Field.VALIDATION_COMPLETE)
			{
				field.row.removeClass("loading");
			}
		}
	}

	/**
	 * Show notices on validation update
	 */
	function FormNotices()
	{
		// Private
		var list = dom.create("ul", {id : "customerservice_validationerrors"});

		// Public
		this.update = update;

		//clear errorlist
		function clear()
		{
			list.remove();

			while (list.firstChild) 
			{
				list.removeChild(list.firstChild);
			}
		}

		//on update make error list if notices exist
		function update(event)
		{
			clear();

			var notices = event.target.getFailedNotices();

			if (notices.length > 0)
			{
				for (var i = 0; i < notices.length; i++)
				{
					list.appendChild(dom.create("li", null, notices[i].getHTML()));
				}

				var parentContainer = dom.getById("customerservice_submit");
				parentContainer.insertBefore(list,dom.getById("customerservice_send").getFirstByTagName("input"));
			}
		}
	}

	/**
	 * Show the customer images gallery using an popupBox
	 * @param {Object} event The trigger event.
	 * @param {Number} currentImage The current image.
	 */
	function showExampleImageGallery()
	{
		if (!dom.getById("show_example"))
		{
			return false;
		}

		var socket			= new Socket(),
			requestResult	= null,
			popupBox		= null,
			userAgent		= new UserAgent(),
			images,fullSize,thumbnails,enlargeLink;

		var link = dom.getById("show_example");
		
		link.onclick = function()
		{
			//reset current image
			currentImage = 0;

			if (userAgent.getUserAgent() == UserAgent.UA_MSIE && userAgent.getVersion() == "6.0")
			{
				//location.hash is changed to "#" to force IE6 to display the page from the top after using the back button.			
				location.hash = "#";
			}

			popupBox = new PopupBox(
				"Even geduld " + getVousOuTu("alstublieft", "alsjeblieft") + "...",
				[
					dom.create(
						"div",
						{
							className : "popupbox_content_loading"
						},
						[
							"Wordt geladen..."
						]
					)
				],
				"customer_image_gallery"
			);

			previousImage = function()
			{
				if (currentImage == 0)
				{
					currentImage = images.length - 1;
				}
				else
				{
					currentImage--;
				}
				setCurrent(currentImage);
				return false;
			}

			nextImage = function()
			{
				if (currentImage == images.length - 1)
				{
					currentImage = 0;
				}
				else
				{
					currentImage++;
				}
				setCurrent(currentImage);
				return false;
			}

			images = new Array(
				"9905",
				"9907",
				"9908",
				"9909",
				"9972");
			

			var content = [dom.create(
				"div",
				{
					id : "navigation_gallery"
				}
				,
				[
					dom.create(
						"ul",
						{},
						[
							dom.create(
								"li",
								{
									className: "navigation_gallery_previous"
								},
								[
									dom.create(
										"a",
										{
											id		: "navigation_gallery_previous",
											title	: "Vorige",
											onclick	: previousImage,
											href	: "#"
										},
										["Vorige"]
									)
								]
							),
							dom.create(
								"li",
								{
									className: "navigation_gallery_next"
								},
								[
									dom.create(
										"a",
										{
											id		: "navigation_gallery_next",
											title	: "Volgende",
											onclick	: nextImage,
											href	: "#"
										},
										["Volgende"]
									)
								]
							)
						]
					)
				]

			),
				dom.create(
				"div",
				{
					id : "customer_image_gallery_thumbnails"
				}
				,
				[
					dom.create(
						"ul",
						{
							className: "customer_image_gallery_thumbnails"
						},
						[
							dom.create(
								"li",
								{
									className: "current"
								},
								[
									dom.create(
										"a",
										{
											id		: "customer_image_thumbnail_link_0",
											className: "image",
											onclick	: function(event)
													{
														var clickedImage = 0;
														if (clickedImage != currentImage)
														{
															currentImage = clickedImage;
															setCurrent(currentImage);
														}
														return false;
													},
											href	: "#"
										},
										[
											dom.create(
												"img",
												{
													src : "/images/image.php?id="+images[0]+"&dimensionid=3&shopid="+controller.getParameter("shopid")
												},
												null
											)
										]
									)
								]
							),
							
							dom.create(
								"li",
								{},
								[
									dom.create(
										"a",
										{
											id		: "customer_image_thumbnail_link_1",
											className: "image",
											onclick	: function(event)
													{
														var clickedImage = 1;
														if (clickedImage != currentImage)
														{
															currentImage = clickedImage;
															setCurrent(currentImage);	
														}
														return false;
													},
											href	: "#"
										},
										[
											dom.create(
												"img",
												{
													src : "/images/image.php?id="+images[1]+"&dimensionid=3&shopid="+controller.getParameter("shopid")
												},
												null
											)
										]
									)
								]
							),
							
							dom.create(
								"li",
								{},
								[
									dom.create(
										"a",
										{
											id		: "customer_image_thumbnail_link_2",
											className: "image",
											onclick	: function(event)
													{
														var clickedImage = 2;
														if (clickedImage != currentImage)
														{
															currentImage = clickedImage;
															setCurrent(currentImage);	
														}
														return false;
													},
											href	: "#"
										},
										[
											dom.create(
												"img",
												{
													src : "/images/image.php?id="+images[2]+"&dimensionid=3&shopid="+controller.getParameter("shopid")
												},
												null
											)
										]
									)
								]
							),
							
							dom.create(
								"li",
								{},
								[
									dom.create(
										"a",
										{
											id		: "customer_image_thumbnail_link_3",
											className: "image",
											onclick	: function(event)
													{
														var clickedImage = 3;
														if (clickedImage != currentImage)
														{
															currentImage = clickedImage;
															setCurrent(currentImage);	
														}
														return false;
													},
											href	: "#"
										},
										[
											dom.create(
												"img",
												{
													src : "/images/image.php?id="+images[3]+"&dimensionid=3&shopid="+controller.getParameter("shopid")
												},
												null
											)
										]
									)
								]
							),
							
							dom.create(
								"li",
								{},
								[
									dom.create(
										"a",
										{
											id		: "customer_image_thumbnail_link_4",
											className: "image",
											onclick	: function(event)
													{
														var clickedImage = 4;
														if (clickedImage != currentImage)
														{
															currentImage = clickedImage;
															setCurrent(currentImage);	
														}
														return false;
													},
											href	: "#"
										},
										[
											dom.create(
												"img",
												{
													src : "/images/image.php?id="+images[4]+"&dimensionid=3&shopid="+controller.getParameter("shopid")
												},
												null
											)
										]
									)
								]
							)
						]
					)
				]
			),
			dom.create(
				"div",
				{
					id			: "customer_image_gallery_fullsize",
					className	: "preload"
				},
				[
					dom.create(
						"img",
						{
							src	: "/images/image.php?id="+images[0]
						},
						null
					)
				]
			)];
			
			popupBox.setTitle("Producten bedrukken of graveren voorbeelden");
			popupBox.setContent(content, true);
			enlargeLink = dom.getById("image_enlarge",false);

			popupBox.show();

			function setCurrent(currentImage)
			{
				thumbnails = dom.getById("customer_image_gallery_thumbnails",true);
				fullSize = dom.getById("customer_image_gallery_fullsize",true);
				thumbnailChildnodes = dom.getById("customer_image_gallery_thumbnails",true).getElementsByTagName("li");

				// Clear the "current" class from the other thumbnails and set it to this thumbnail
				for (var i = 0, thumbnailsLength = thumbnailChildnodes.length; i < thumbnailsLength; i++)
				{
					dom.extend(thumbnailChildnodes[i]);
					thumbnailChildnodes[i].removeClass("current");
				}
	
				dom.extend(dom.getById("customer_image_thumbnail_link_"+currentImage,true).parentNode);
				dom.getById("customer_image_thumbnail_link_"+currentImage,true).parentNode.addClass("current");
				fullSize.firstChild.src = "/images/image.php?id=" + images[currentImage];
				return false;
			}

			return false;
		}
	}

	/**
	 * Show the emailaddress notice using an ActionBox
	 */
	function activateCustomerserviceInfoboxes()
	{
		if(!dom.getById("actionbox_emailaddress") && !dom.getById("actionbox_ordernumber"))
		{
			return false;
		}

		var actionBox = new ActionBox(
			"Even geduld " + getVousOuTu("alstublieft", "alsjeblieft") + "...",
			[
				dom.create(
					"div",
					{
						className : "actionbox_content_loading"
					},
					[
						"Wordt geladen..."
					]
				)
			],
			true
		);

		var emailaddressActionboxIcon = dom.getById("actionbox_emailaddress");
		var ordernumberActionboxIcon = dom.getById("actionbox_ordernumber");

		emailaddressActionboxIcon.onclick = (function()
		{
			return function(event)
			{
				if (event == undefined)
					{
						event = window.event;
						event.cancelBubble = true;
						window.event.cancelBubble = true;
					}

				if (event.target == undefined)
				{
					event.target = event.srcElement;
				}

				if (event.stopPropagation)
				{
					event.stopPropagation();
				}

				actionBox.setTitle("Informatie");
				actionBox.setContent("Wij gebruiken je e-mailadres alleen om je op de hoogte te houden van de afhandeling van je bestelling. Alleen na je uitdrukkelijke toestemming sturen wij jou onze nieuwsbrief toe.");
				actionBox.show(event.target);
				actionBox.setPosition((event.pageX ? event.pageX : event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft), (event.pageY ? event.pageY : event.clientY + document.documentElement.scrollTop + document.body.scrollTop));
				return false;
			}
		})();

		ordernumberActionboxIcon.onclick = (function()
		{
			return function(event)
			{
				if (event == undefined)
					{
						event = window.event;
						event.cancelBubble = true;
						window.event.cancelBubble = true;
					}

				if (event.target == undefined)
				{
					event.target = event.srcElement;
				}

				if (event.stopPropagation)
				{
					event.stopPropagation();
				}

				actionBox.setTitle("Informatie");
				actionBox.setContent("Met je ordernummer kunnen wij je sneller en beter helpen. Je vind je ordernummer op de factuur en in de orderbevestiging.");
				actionBox.show(event.target);
				actionBox.setPosition((event.pageX ? event.pageX : event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft), (event.pageY ? event.pageY : event.clientY + document.documentElement.scrollTop + document.body.scrollTop));
				return false;
			}
		})();
	}
	/**
	 * "Call me now" pop-up window
	 */
	function callMeNow()
	{
		if (dom.getById("customerservice_callme_form"))
		{
			dom.getById("customerservice_callme_form").target = "window_callmenow";

			dom.getById("customerservice_callme_form").onsubmit = function()
			{
				var callMeNowWindow = window.open("", "window_callmenow", "width=350, height=400");

				if (callMeNowWindow.opener == null)
				{
					callMeNowWindow.opener = window;
				}
			}
		}
	}

}
// Inheritance
Customerservice.prototype = new Page();
controller.setPageObject(customerservice);