﻿/*
tabSlideOUt v1.3
 
By William Paoli: http://wpaoli.building58.com
To use you must have an image ready to go as your tab
Make sure to pass in at minimum the path to the image and its dimensions:
 
example:
 
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab
imageHeight: '133px',                         //height of tab image
imageWidth: '44px',                           //width of tab image
});
or you can leave out these options
and set the image properties using css
 
*/
(function($) {
	$.fn.tabSlideOut = function(callerSettings) {
		var settings = $.extend({
			tabHandle: '.handle',
			speed: 300,
			action: 'click',
			tabLocation: 'left',
			fixedPosition: false,
			onLoadSlideOut: false
		}, callerSettings || {});

		settings.tabHandle = $(settings.tabHandle);
		var obj = this;
		if (settings.fixedPosition === true) {
			settings.positioning = 'fixed';
		} else {
			settings.positioning = 'absolute';
		}

		//ie6 doesn't do well with the fixed option
		if (document.all && !window.opera && !window.XMLHttpRequest) {
			settings.positioning = 'absolute';
		}

		obj.css({
			'line-height': '1',
			'position': settings.positioning
		});

		obj.find(".close_button").click(function(event) {
			if (obj.hasClass('open')) {
				slideIn();
			}
		});

		var properties = {
			containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
			containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
			tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
			tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
		};

		//set calculated css
		if (settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
			settings.tabHandle.css({
				'right': 0
			});
		}

		if (settings.tabLocation === 'top') {
			obj.css({
				'top': '-' + properties.containerHeight
			});
			settings.tabHandle.css({
				'bottom': '-' + properties.tabHeight
			});
		}

		if (settings.tabLocation === 'bottom') {
			obj.css({
				'bottom': '-' + properties.containerHeight,
				'position': 'fixed'
			});
			settings.tabHandle.css({
				'top': '-' + properties.tabHeight
			});

		}

		if (settings.tabLocation === 'left' || settings.tabLocation === 'right') {
			obj.css({
				'height': properties.containerHeight
			});

			settings.tabHandle.css({
				'top': 0
			});
		}

		if (settings.tabLocation === 'left') {
			obj.css({
				'left': '-' + properties.containerWidth
			});
			settings.tabHandle.css({
				'right': '-' + properties.tabWidth
			});
		}

		if (settings.tabLocation === 'right') {
			obj.css({
				'right': '-' + properties.containerWidth
			});
			settings.tabHandle.css({
				'left': '-' + properties.tabWidth
			});

			//$('html').css('overflow-x', 'hidden');
		}

		//functions for animation events

		settings.tabHandle.click(function(event) {
			event.preventDefault();
		});

		var slideIn = function() {

			if (settings.tabLocation === 'top') {
				obj.animate({
					top: '-' + properties.containerHeight
				}, settings.speed).removeClass('open');
			} else if (settings.tabLocation === 'left') {
				obj.animate({
					left: '-' + properties.containerWidth
				}, settings.speed).removeClass('open');
			} else if (settings.tabLocation === 'right') {
				obj.animate({
					right: '-' + properties.containerWidth
				}, settings.speed).removeClass('open');
			} else if (settings.tabLocation === 'bottom') {
				obj.animate({
					bottom: '-' + properties.containerHeight
				}, settings.speed).removeClass('open');
			}

		};

		var slideOut = function() {
			if (settings.tabLocation == 'top') {
				obj.animate({
					top: '-3px'
				}, settings.speed).addClass('open');
			} else if (settings.tabLocation == 'left') {
				obj.animate({
					left: '3px'
				}, settings.speed).addClass('open');
			} else if (settings.tabLocation == 'right') {
				obj.animate({
					right: '3px'
				}, settings.speed).addClass('open');
			} else if (settings.tabLocation == 'bottom') {
				obj.animate({
					bottom: '-3px'
				}, settings.speed).addClass('open');
			}
		};

		var clickScreenToClose = function() {
			obj.click(function(event) {
				event.stopPropagation();
			});

			$(document).click(function() {
				slideIn();
			});
		};

		var clickAction = function() {
			settings.tabHandle.click(function(event) {
				if (obj.hasClass('open')) {
					slideIn();
				} else {
					slideOut();
				}
			});

			clickScreenToClose();
		};

		var hoverAction = function() {
			obj.hover(function() {
				slideOut();
			}, function() {
				slideIn();
			});

			settings.tabHandle.click(function(event) {
				if (obj.hasClass('open')) {
					slideIn();
				}
			});
			clickScreenToClose();

		};

		var slideOutOnLoad = function() {
			slideIn();
			setTimeout(slideOut, 500);
		};

		//choose which type of action to bind
		if (settings.action === 'click') {
			clickAction();
		}

		if (settings.action === 'hover') {
			hoverAction();
		}

		if (settings.onLoadSlideOut) {
			slideOutOnLoad();
		};

	};
})(jQuery);

initFeedbackSlider = function(options) {

	var settings = $.extend({
		sliderId: 'feedbackForm',
		portalId: '{3BEC5DDD-DC75-4D08-8F5D-75102DAD8324}',
		serverBase: 'http://goldbroiler/delivergo/service/common.api',
		fixedPosition: true,
		sliderOptions: {}
	}, options || {});

	var $slider = $("#" + settings.sliderId);
	$slider.show();

	$slider.tabSlideOut(options.sliderOptions);

	$slider.find("#message").HandleDefaultText().LimitChars(500, "messageLengthInfo");

	validateEmail = function($element) {
		var $this = $element;
		var email = $this.val();

		$this.removeClass("validator_valid validator_invalid");
		$("#email_validator_info").removeClass("validator_info_valid validator_info_invalid");
		if (email != 0 && $this.CheckEmailAddress()) {
			$this.addClass("validator_valid");
			$("#email_validator_info").addClass("validator_info_valid");
			return true;
		}
		$this.addClass("validator_invalid");
		$("#email_validator_info").addClass("validator_info_invalid");
		return false;

	};

	$slider.find("#email").HandleDefaultText().keyup(function() {
		validateEmail($(this));
	});

	$slider.find("#feedback_submit").hover(function() {
		$(this).addClass("ui-state-hover");
	}, function() {
		$(this).removeClass("ui-state-hover");
	}).click(function() {

		if (!validateEmail($slider.find("#email"))) {
			return false;
		}

		var data = {
			feedback: {
				IdPortal: settings.portalId,
				UserId: $slider.find("#email").val(),
				Comment: $slider.find("#message").val()
			}
		}

		$.ajax({
			url: "AjaxProxy.ashx?u=" + settings.serverBase + "/PortalService.svc/json/TryRegisterFeedback",
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			type: "POST",
			data: JSON.stringify(data),
			success: function(result) {
			if (!result) {
					var dialog = '<div id="dialog" title="Fehler">Ihr Feedback wurde bereits verarbeitet!</div>';
					$(dialog).dialog({
						modal: true,
						resizable: false,
						buttons: {
							"Ok": function() {
								$(this).dialog("close");
							}
						}
					});
				} else {

					var dialog = '<div id="dialog" title="Feedback erhalten">Vielen Dank für Ihr Feedback!</div>';
					$(dialog).dialog({
						modal: true,
						resizable: false,
						buttons: {
							"Ok": function() {
								$(this).dialog("close");
							}
						}
					});
				}
			}
		});
		return false;
	});
}

