$.namespace('azkaban');

$(function() {

	var border = 20;
	var header = 30;
	var timeWidth = 60;
	var lineHeight = 40;
	var numDays = 7;
	var today = new Date();
	var totalHeight = (border * 2 + header + 24 * lineHeight);
	var monthConst = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
	var dayOfWeekConst = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
	var hourMillisConst = 3600 * 1000;
	var dayMillisConst = 24 * hourMillisConst;

	$("#svgDivCustom").svg({onLoad:
		function (svg) {

			var totalWidth = $("#svgDivCustom").width();

			$("#svgDivCustom").find("svg").eq(0).removeAttr("width");

			var dayWidth = Math.floor((totalWidth - 3 * border - timeWidth) / numDays);


			//Outer g
			var gMain = svg.group({transform: "translate(" + border + ".5," + border + ".5)", stroke : "#999", strokeWidth: 1});
			var defaultDate = new Date(today.setDate(today.getDate() - today.getDay()));
			today = new Date();
			var svgDate = defaultDate;

			//Used to filter projects or flows out
			var filterProject = new Array();
			var filterFlow = new Array();

			$(".nav-prev-week").click(function (event) {
				svgDate = new Date(svgDate.valueOf() - 7 * dayMillisConst);
				loadSvg(svgDate);
				event.stopPropagation();
			});
			$(".nav-next-week").click(function (event) {
				svgDate = new Date(svgDate.valueOf() + 7 * dayMillisConst);
				loadSvg(svgDate);
				event.stopPropagation();
			});
			$(".nav-this-week").click(function (event) {
				svgDate = defaultDate;
				loadSvg(svgDate);
				event.stopPropagation();
			});



			loadSvg(svgDate);

			function loadSvg(firstDay)
			{
				//svg.configure({viewBox: "0 0 " + totalWidth + " " + totalHeight, style: "width:100%"}, true);
				svg.remove(gMain);
				gMain = svg.group({transform: "translate(" + border + ".5," + border + ".5)", stroke : "#999", strokeWidth: 1});
				svg.text(gMain, timeWidth, header - 8, monthConst[firstDay.getMonth()], {fontSize: "20", style: "text-anchor: end;", fill : "#F60", stroke : "none"});
				//time indicator group
				var gLeft = svg.group(gMain, {transform: "translate(0," + header + ")"});
				//Draw lines and hours
				for(var i = 0; i < 24; i++)
				{
					svg.line(gLeft, 0, i * lineHeight, timeWidth, i * lineHeight);
					//Gets the hour text from an integer from 0 to 23
					var hourText = getHourText(i);
					//Move text down a bit? TODO: Is there a CSS option for top anchor?
					svg.text(gLeft, timeWidth, i * lineHeight + 15, hourText, {fontSize: "14", style: "text-anchor: end;", fill : "#333", stroke : "none"});
				}

				//var firstDay = new Date();//(new Date()).valueOf();
				firstDay = new Date(firstDay.getFullYear(), firstDay.getMonth(), firstDay.getDate()).valueOf();
				var isThisWeek = -1;
				//Draw background
				for(var deltaDay = 0; deltaDay < numDays; deltaDay++)
				{
					//Day group
					var gDay = svg.group(gMain, {transform: "translate(" + (border + timeWidth + deltaDay * dayWidth) + "," + header + ")"});

					//This is temporary.
					var date = new Date(firstDay + dayMillisConst * deltaDay);
					var day = date.getDate();

					//Draw box around
					var isToday = date.getFullYear() == today.getFullYear() && date.getMonth() == today.getMonth() && date.getDate() == today.getDate();
					if(isToday)
					{
						isThisWeek = deltaDay;
					}
					svg.rect(gDay, 0, -header, dayWidth, 24 * lineHeight + header, {fill : "none", stroke : "#F60"});
					//Draw day title
					svg.text(gDay, 6, -8, day + " " + dayOfWeekConst[date.getDay()], {fontSize: "20", fill : isToday?"#06C":"#F60", stroke : "none"});

					//Draw horizontal lines
					for(var i = 0; i < 24; i++)
					{
						svg.line(gDay, 0, i * lineHeight, dayWidth, i * lineHeight);
					}
				}

				if(isThisWeek != -1)
				{
					var date = new Date(firstDay + dayMillisConst * isThisWeek);
					var day = date.getDate();
					var gDay = svg.group(gMain, {transform: "translate(" + (border + timeWidth + isThisWeek * dayWidth) + "," + header + ")"});
					svg.rect(gDay, 0, -header, dayWidth, 24 * lineHeight + header, {fill : "none", stroke : "#06F"});
				}

				var gDayView = svg.group(gMain, {transform: "translate(" + (border + timeWidth) + "," + header + ")"});
				//A list of all items
				var itemByDay = new Array();
				for(var deltaDay = 0; deltaDay < numDays; deltaDay++) {
					itemByDay[deltaDay] = new Array();
				}

				function filterApplies(item) {
					for(var i = 0; i < filterProject.length; i++) {
						if(item.projectname == filterProject[i].projectname) {
							return true;
						}
					}
					for(var i = 0; i < filterFlow.length; i++) {
						if(item.projectname == filterFlow[i].projectname && item.flowname == filterFlow[i].flowname) {
							return true;
						}
					}
					return false;
				}

				//Function that re-renders all loaded items
				function renderDays() {
					//Clear items inside the day view
					svg.remove(gDayView);
					gDayView = svg.group(gMain, {transform: "translate(" + (border + timeWidth) + "," + header + ")"});

					//Add day groups
					for(var deltaDay = 0; deltaDay < numDays; deltaDay++) {
						var gDay = svg.group(gDayView, {transform: "translate(" + (deltaDay * dayWidth) + ")"});
						var data = itemByDay[deltaDay];
						//Sort the arrays to have a better view
						data.sort(function (a, b){
							if(a.length == dayMillisConst) return -1;
							if(b.length == dayMillisConst) return 1;
							//Smaller time in front
							var timeDiff = a.time - b.time;
							if(timeDiff == 0) {
								//Larger length in front
								return b.length - b.length;
							}
							return timeDiff;
						});
						//Sort items to columns
						var columns = new Array();
						columns.push(new Array());
						//Every item is parsed through here into columns
						for(var i = 0; i < data.length; i++) {
							//Apply filters here
							if(filterApplies(data[i])) {
								continue;
							}

							var foundColumn = false;
							//Go through every column until a place can be found
							for(var j = 0; j < columns.length; j++) {
								if(!intersectArray(data[i], columns[j])) {
									//Found a place
									columns[j].push(data[i]);
									foundColumn = true;
									break;
								}
							}
							//No place, create new column
							if(!foundColumn) {
								columns.push(new Array());
								columns[columns.length - 1].push(data[i]);
							}
						}

						//Actually drawing them
						for(var i = 0; i < columns.length; i++) {
							//Split into columns
							var gColumn = svg.group(gDay, {transform: "translate(" + (i * dayWidth / columns.length) + ")", style: "opacity: 0.8"});
							for(var j = 0; j < columns[i].length; j++) {
								//Draw item
								var item = columns[i][j];
								var startTime = new Date(item.time);
								var startY = Math.floor(startTime.getHours() * lineHeight + startTime.getMinutes() * lineHeight / 60);
								var endTime = new Date(item.time + item.length );
								var endY = Math.floor(startY + (item.length * lineHeight) / hourMillisConst);
								//var anchor = svg.a(gColumn);
								var itemUrl = contextURL + "/manager?project=" + item.projectname + "&flow=" + item.flowname;
								var gItem = svg.link(gColumn, itemUrl, {transform: "translate(0," + startY + ")"});

								//Pass the item into the DOM data store to be retrieved later on
								$(gItem).data("item", item);

								//Replace the context handler
								gItem.addEventListener('contextmenu', handleContextMenu);

								//Add a tooltip on mouse over
								gItem.addEventListener('mouseover', handleMouseOver);
								//Remove the tooltip on mouse out
								gItem.addEventListener('mouseout', handleMouseOut);

								//$(gItem).attr("style","color:red");
								var rect = svg.rect(gItem, 0, 0, Math.ceil(dayWidth / columns.length), Math.floor(endY - startY), 0, 0, {fill : "#7E7", stroke : "#444", strokeWidth : 1});
								//Draw text
								//svg.text(gItem, 6, 16, item.flowname, {fontSize: "13", fill : "#000", stroke : "none"});
							}
						}
					}
				}

				function processItem(item)
				{
					var firstTime = item.time;
					var startTime = firstDay;
					var endTime = firstDay + numDays * dayMillisConst;
					var period = item.period;

					// Shift time until we're past the start time
					if (period > 0) {
						// Calculate next execution time efficiently
						// Take into account items that ends in the date specified, but does not start on that date
						var periods = Math.floor((startTime - (firstTime + item.length)) / period);
						//Make sure we don't subtract
						if(periods < 0){
							periods = 0;
						}
						firstTime += period * periods;
						// Increment in case we haven't arrived yet. This will apply to most of the cases
						while (firstTime + item.length < startTime) {
							firstTime += period;
						}
					}

					// Bad or no period
					if (period <= 0) {
						// Single instance case
						if (firstTime >= startTime && firstTime < endTime) {
							addItem({flowname : item.flowname, projectname: item.projectname, time: firstTime, length: item.length});
						}
					}
					else {
						if(period <= hourMillisConst) {
							addItem({flowname : item.flowname, projectname: item.projectname, time: firstTime, length: endTime - firstTime});
						}
						else{
							// Repetitive schedule, firstTime is assumed to be after startTime
							while (firstTime < endTime) {
								addItem({flowname : item.flowname, projectname: item.projectname, time: firstTime, length: item.length});
								firstTime += period;
							}
						}
					}
				}

				function addItem(item)
				{
					var itemStartTime = new Date(item.time);
					var itemEndTime = new Date(item.time + item.length);
					var itemStartDate = new Date(itemStartTime.getFullYear(), itemStartTime.getMonth(), itemStartTime.getDate());
					var itemEndDate = new Date(itemEndTime.getFullYear(), itemEndTime.getMonth(), itemEndTime.getDate());

					//Cross date item, cut it to only today's portion and add another item starting tomorrow morning
					if(itemStartDate.valueOf() != itemEndDate.valueOf() && itemEndTime.valueOf() != itemStartDate + dayMillisConst)
					{
						var nextMorning = itemStartDate.valueOf() + dayMillisConst;
						var excess = item.length - (nextMorning - itemStartTime.valueOf());
						item.length = nextMorning - itemStartTime.valueOf();
						var item2 = {time: nextMorning, length: excess, projectname: item.projectname, flowname: item.flowname};
						addItem(item2);
					}

					//Now the item should be only in one day
					var index = (itemStartDate.valueOf() - firstDay) / dayMillisConst;
					if(index >= 0 && index < numDays)
					{
						//Add the item to the rendering list
						itemByDay[index].push(item);
					}
				}

				function handleContextMenu(event) {
					var requestURL = $(this).attr("href");
					var item = $(this).data("item");
					var menu = [
						{title: "Job \"" + item.flowname + "\" From Project \"" + item.projectname + "\""},
						{title: "View Job", callback: function() {window.location.href=requestURL;}},
						{title: "View Job in New Window", callback: function() {window.open(requestURL);}},
						{title: "Hide Job", callback: function() {filterFlow.push(item); renderDays();}},
						{title: "Hide All Jobs From the Same Project", callback: function() {filterProject.push(item); renderDays();}}
					];
					contextMenuView.show(event, menu);
					event.preventDefault();
					event.stopPropagation();
					return false;
				}

				function handleMouseOver(event) {
					//Create the new tooltip
					var requestURL = $(this).attr("href");
					var item = $(this).data("item");
					var offset = $("svg").offset();
					var thisOffset = $(this).offset();

					var tooltip = svg.group({transform: "translate(" + (thisOffset.left - offset.left + 2) + "," + (thisOffset.top - offset.top - 2) + ")"});
					var rect = svg.rect(tooltip, 0, -20, measureText(svg, item.flowname, {fontSize: "13"}) + 4, 20, {fill : "#FFF", stroke : "none"});
					svg.text(tooltip, 2, -5, item.flowname, {fontSize: "13", fill : "#000", stroke : "none"});


					//Store tooltip
					$(this).data("tooltip", tooltip);
				}

				function handleMouseOut(event) {
					//Clear the fade interval
					$($(this).data("tooltip")).fadeOut(750, function(){ svg.remove(this); });
				}

				//Asynchronously load data
				var requestURL = contextURL + "/schedule";
				$.ajax({
					type: "GET",
					url: requestURL,
					data: {"ajax": "loadFlow"},
					dataType: "json",
					success: function (data)
					{
						var items = data.items;

						//Sort items by day
						for(var i = 0; i < items.length; i++)
						{
							items[i].length = hourMillisConst; //TODO: parseInt(items[i].length);
							items[i].time = parseInt(items[i].time);
							items[i].period = parseInt(items[i].period);
							processItem(items[i]);
						}
						//Trigger a re-rendering of all the data
						renderDays();
					}
				});
			}
		}, settings : {
			"xmlns" : "http://www.w3.org/2000/svg", 
			"xmlns:xlink" : "http://www.w3.org/1999/xlink", 
			"shape-rendering" : "optimize-speed",
			"style" : "width:100%;height:" + totalHeight + "px"
		}});

	function dayMatch(d1, d2) {
		return d1.getDate() == d2.getDate() && d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth();
	}

	function getHourText(hour) {
		return (hour==0 ? "12 AM" : (hour<12 ? hour + " AM" : (hour==12 ? "12 PM" : (hour-12) + " PM" )));
	}

	function intersectArray(a, arry) {
		for(var i = 0; i < arry.length; i++) {
			var b = arry[i];
			if(a.time < b.time + b.length && a.time + a.length > b.time) {
				return true;
			}
		}

		return false;
	}

	function measureText(svg, text, options) {
		var test = svg.text(0, 0, text, options);
		var width = test.getComputedTextLength();
		svg.remove(test);
		return width;
	}
});