/* ===========================================================
 * underOverSlider.js v0.0.1
 * ===========================================================
 * Copyright 2016 Prevu
 * ========================================================== */

(function ($) {

	"use strict"; // jshint ;_;
	/* UnderOverSlider CLASS DEFINITION
    * ====================== */

	var UnderOverSlider = function (element, options) {
		this.init(element, options);
	};

	UnderOverSlider.prototype = {
		constructor: UnderOverSlider,
		init: function (element, options) {
			var plugin = this;
			this.options = options;
			this.$container = $(element);
			this.$id = this.geneateControlId();
			this.$displayValuePlaceholderid = this.$id + 'dispval';
			this.$sliderPlaceholderId = this.$id + 'slider';
			this.$lastValueSign = 0;

			// Set init mode to prevent change events fire during controls initialization
			this.$initMode = true;

			var leftSectorLabel = this.options.leftSectorCaption && (this.options.leftSectorCaption.length > 0) 
				? this.options.leftSectorCaption : '';
			var rightSectorLabel = this.options.rightSectorCaption && (this.options.rightSectorCaption.length > 0) 
				? this.options.rightSectorCaption : '';
			
			var initialSliderDisplayValue = this.options.value && !isNaN(parseFloat(this.options.value))
				? this.coefficientToDisplayValue(parseFloat(this.options.value)) : 0;
			var maxSliderValue = this.options.maxPercent && !isNaN(parseInt(this.options.maxPercent))
				? parseInt(this.options.maxPercent) : 100;

			// Create inner html and init slider
			var innerHtml = '';

			if (this.options.controlCaption && (this.options.controlCaption.length > 0))
				innerHtml += '<div><label class="control-label" style="margin-left: 8px; margin-bottom: 0px;">' + this.options.controlCaption + '</label></div>';

			innerHtml = innerHtml +
				'<table class="overUnder-widget-table">' +
				'<tr>' +
				'<td class="overUnder-widget-tbl-cell with-border"></td>' +
				'<td class="overUnder-widget-tbl-cell hint-right" id="' + this.$displayValuePlaceholderid + '">100% higher cost on under allocation</td>' +
				'</tr>' +
				'<tr><td colspan="2"><div id="' + this.$sliderPlaceholderId + '"></div></td></tr>' +
				'<tr>' +
				'<td class="overUnder-widget-tbl-cell with-border hint-left">' + leftSectorLabel + '</td>' +
				'<td class="overUnder-widget-tbl-cell hint-right">' + rightSectorLabel + '</td>' +
				'</tr>' +
				'</table>';

			$(this.$container).html(innerHtml);
			var sliderPlaceHolder = $(this.$container).find('#' + this.$sliderPlaceholderId);
			$(sliderPlaceHolder).slider({
				'range': 'min',
				'min': -maxSliderValue,
				'max': maxSliderValue,
				'value': initialSliderDisplayValue,
				change: function(event, ui) {
					plugin.onSliderChanged(event, ui, plugin);
				},
				slide: function (event, ui) {
					plugin.onSliderSlide(event, ui, plugin);
				}
			});

			// Remember colors of the slider
			this.$inactiveColor = getComputedStyle($(sliderPlaceHolder).get(0)).backgroundColor;
			this.$activeColor = getComputedStyle($(sliderPlaceHolder).children('div').get(0)).backgroundColor;

			// Set initial slider value
			var eventParams = {
				value: initialSliderDisplayValue
			};
			this.onSliderChanged(null, eventParams, plugin);

			this.$initMode = false;

			if (this.options.initCallback && (typeof this.options.initCallback === 'function')) {
				this.options.initCallback(this);
			}
		},
		geneateControlId: function () {
 			var result = "ouSl";
			var variants = "abcdefghijklmnopqrstuvwxyz0123456789";

			for (var i = 0; i < 20; i++)
				result += variants.charAt(Math.floor(Math.random() * variants.length));

			return result;
		},
		coefficientToDisplayValue: function (coefficient) {
			if ((coefficient === undefined) || (coefficient === null))
				return 0;

			var result = 0;
			var valAsFloat = parseFloat(coefficient);

			if (isNaN(valAsFloat))
				return result;

			if (valAsFloat > 1) {
				result = Math.round((valAsFloat - 1) * 100);
			}

			if (valAsFloat < 1) {
				result = -Math.round((100 / valAsFloat - 100));
			}

			return result;
		},
		displayValueToCoefficient: function (displayValue) {
			var result = 0;

			if (displayValue > 0) {
				result = 1 + displayValue / 100;
			}

			if (displayValue < 0) {
				result = 1 / (1 - displayValue / 100);
			}

			return result;
		},
		onSliderChanged: function (event, ui, plugin) {
			var value = parseInt(ui.value);
			var coeffValue = plugin.displayValueToCoefficient(value);

			var sliderLabel = plugin.getSliderText(value, plugin.options);
			$(plugin.$container).find('#' + plugin.$displayValuePlaceholderid).html(sliderLabel);

			// Coloring of the slider
			plugin.setSliderColor(value, plugin);

			if (coeffValue > 0)
				plugin.$lastValueSign = 1;

			if (coeffValue < 0)
				plugin.$lastValueSign = -1;

			if (coeffValue == 0)
				plugin.$lastValueSign = 0;

			if (plugin.options.relatedValueControl) {
				$(plugin.options.relatedValueControl).val(coeffValue);
			}

			if (!plugin.$initMode) {
				if (plugin.options.changedCallback && (typeof plugin.options.changedCallback === 'function')) {
					plugin.options.changedCallback(this, coeffValue);
				}
			}
		},
		onSliderSlide: function (event, ui, plugin) {
			var value = parseInt(ui.value);
			var sliderLabel = plugin.getSliderText(value, plugin.options);
			$(plugin.$container).find('#' + plugin.$displayValuePlaceholderid).html(sliderLabel);

			// Coloring of the slider
			plugin.setSliderColor(value, plugin);
		},
		setSliderColor: function(value, plugin) {
			if ((value < 0) && ((plugin.$lastValueSign >= 0) || plugin.$initMode)) {
				var sliderPlaceHolder = $(plugin.$container).find('#' + plugin.$sliderPlaceholderId);
				$(sliderPlaceHolder).css("background-color", plugin.$inactiveColor);
				$(sliderPlaceHolder).children('div').css("background-color", plugin.$activeColor);
				plugin.$lastValueSign = -1;
				return;
			}

			if ((value > 0) && ((plugin.$lastValueSign <= 0) || plugin.$initMode)) {
				var sliderPlaceHolder = $(plugin.$container).find('#' + plugin.$sliderPlaceholderId);
				$(sliderPlaceHolder).css("background-color", plugin.$activeColor);
				$(sliderPlaceHolder).children('div').css("background-color", plugin.$inactiveColor);
				plugin.$lastValueSign = 1;
				return;
			}

			if ((value == 0) && ((plugin.$lastValueSign != 0) || plugin.$initMode)) {
				var sliderPlaceHolder = $(plugin.$container).find('#' + plugin.$sliderPlaceholderId);
				$(sliderPlaceHolder).css("background-color", plugin.$inactiveColor);
				$(sliderPlaceHolder).children('div').css("background-color", plugin.$inactiveColor);
				plugin.$lastValueSign = 0;
			}
		},
		getSliderText: function (sliderValuePercent, opts) {
			var result = "";
			if (sliderValuePercent === undefined)
				return;
			
			if ((sliderValuePercent > 0) && opts.valueHints && opts.valueHints.aboveZero) {
				result = opts.valueHints.aboveZero.replace("{0}", String(sliderValuePercent));
			}

			if ((sliderValuePercent < 0) && opts.valueHints && opts.valueHints.belowZero) {
				var absValue = Math.abs(sliderValuePercent);
				result = opts.valueHints.belowZero.replace("{0}", String(absValue));
			}

			if ((sliderValuePercent == 0) && opts.valueHints && opts.valueHints.equalToZero) {
				result = opts.valueHints.equalToZero.replace("{0}", String(sliderValuePercent));
			}

			return result;
		},
		getValue: function () {
			var exportData = [];

			//for (var catIndex = 0; catIndex < this.$dataset.data.length; catIndex++) {
			//	var catItem = {
			//		Id: this.$dataset.data[catIndex].Id,
			//		Name: this.$dataset.data[catIndex].Name,
			//		InPlan: this.$dataset.data[catIndex].InPlan,
			//		Positions: null
			//	}

			//	if (this.$dataset.data[catIndex].Positions && (this.$dataset.data[catIndex].Positions.length > 0)) {
			//		catItem.Positions = [];

			//		for (var posIndex = 0; posIndex < this.$dataset.data[catIndex].Positions.length; posIndex++) {
			//			var posItem = {
			//				StartDate: this.$dataset.data[catIndex].Positions[posIndex].StartDate,
			//				EndDate: this.$dataset.data[catIndex].Positions[posIndex].EndDate,
			//				Need: this.$dataset.data[catIndex].Positions[posIndex].Need
			//			}

			//			catItem.Positions.push(posItem);
			//		}

			//		exportData.push(catItem);
			//	}
			//}

			return exportData;
		},
		setValue: function (coeffValue) {
			this.$dataset.data = [];

			//if (!incomingData || !incomingData.data || (incomingData.data.length < 1)) {
			//	return;
			//}
			
			//for (var catIndex = 0; catIndex < incomingData.data.length; catIndex++) {
			//	var currentCat = incomingData.data[catIndex];

			//	if (currentCat.Positions && (currentCat.Positions.length > 0) && this.categoryExists(currentCat.Id)) {
			//		var newCatItem = {
			//			Id: currentCat.Id,
			//			Name: currentCat.Name,
			//			InPlan: currentCat.InPlan,
			//			Positions: []
			//		};

			//		for (var posIndex = 0; posIndex < currentCat.Positions.length; posIndex++) {
			//			var currentPos = currentCat.Positions[posIndex];

			//			if (currentPos.Need && (currentPos.Need > 0))
			//			{
			//				var posItem = {
			//					StartDate: currentPos.StartDate,
			//					EndDate: currentPos.EndDate,
			//					Need: currentPos.Need,
			//				};
			//				newCatItem.Positions.push(posItem);
			//			}
			//		}

			//		this.$dataset.data.push(newCatItem);
			//	}
			//}

			this.renderTable();
		},
		destroy: function () {
			var e = $.Event('destroy');
			this.$container.trigger(e);
			if (e.isDefaultPrevented()) return;
			this.$container
                .removeData('underOverSlider');
		},
	};
	/* UNDER OVER COEFFICIENT PLUGIN DEFINITION
    * ======================= */

	$.fn.underOverSlider = function (option, args) {
		return this.each(function () {
			var $this = $(this),
                data = $this.data('underOverSlider'),
                options = $.extend({}, $.fn.underOverSlider.defaults, $this.data(), typeof option == 'object' && option);

			if (!data) $this.data('underOverSlider', (data = new UnderOverSlider(this, options)));
			if (typeof option == 'string')
				data[option].apply(data, [].concat(args));
		});
	};
	$.fn.underOverSlider.defaults = {
		maxPercent: 100,
		controlCaption: null,
		leftSectorCaption: 'Under',
		rightSectorCaption: 'Over',
		valueHints: {
			aboveZero: '{0}% over',
			belowZero: '{0}% under',
			equalToZero: 'equals'
		},
		relatedValueControl: null,
		value: 0,
		initCallback: null,
		changedCallback: null,
	};

	$.fn.underOverSlider.Constructor = UnderOverSlider;

}(jQuery));