// ***************************************************
// * jQuery.dbh.components: jquery.dbh.ScrollUp.js
// * version: 1.0
// * © 2011 Derek Hughes
// ***************************************************

(function($) 
{
	//-----------------------------------------------------
	// InitializeVertScroller
	//-----------------------------------------------------
	$.fn.InitializeVertScroller = function(callerSettings) 
	{
		var container;
		var settings;
		var	scrollerHeight;

		// Make an object that we can pass as a parameter for all semi global variables
		var passVars = new Object();
		passVars.defaultSpeed = 1;						// Scroll Speed (larger is faster 1-10)
		passVars.pauseDur = 50;							// Time to pause marquee when paragraph reaches the top of container
		passVars.pauseTmp = passVars.pauseDur;			// Temporary pause variable
		passVars.enableScroll = true;					// Flag to enable or disbale mouse over / out scroll
		passVars.boxDisplayed = false;					// Flag to enable or disbale Calendar Message Box Displayed scroll
		passVars.scrollSpeed = passVars.defaultSpeed;	// Variable to hols current speed
		passVars.pausespeed = 0;						// Variable to hold speed when scroller is paused

		var settings = $.extend(
		{
			position: null,
			top: null,
			bottom: null,
			left: null,
			right: null,
			width: 250,
			height: 200,
			popWidth: 600,
			popHeight: 500,
			border: 1,
			borderColor: "#000000",
			borderStyle: "solid",
			scrollerBackground: "#FFFFFF",
			scrollerBackgroundRoll: "#CCCCCC",
			eventBackground: "#CCCCCC",
			eventBackgroundRoll: "#CCCCCC",
			pauseLength: 10000,
			title: "Upcoming Events",
			qty: 1,
			lastControl: null
		},callerSettings||{});

		container = "#" + this[0].id; 			

		scrollAreaBase = this[0].id + "ScrollArea";	scrollArea = "#" + scrollAreaBase;


		$(container).height(settings.height);
		$(container).css("width", settings.width + "px");

		$(container).css("border", settings.border + "px");
		$(container).css("border-color", settings.borderColor);
		$(container).css("border-style", settings.borderStyle);
		$(container).css("background-color", settings.scrollerBackground);


		if (settings.position != null)		$(container).css("position", settings.position);
		if (settings.top != null)			$(container).css("top", settings.top + "px");
		if (settings.bottom != null)		$(container).css("bottom", settings.bottom + "px");
		if (settings.left != null)			$(container).css("left", settings.left + "px");
		if (settings.right != null)			$(container).css("right", settings.right + "px");
		if (settings.width != null)			$(container).css("width", settings.width + "px");
		if (settings.height != null)		$(container).css("height", settings.height + "px");

		$(container).html('<div id="' + scrollAreaBase + '" style="position: absolute; width: 98%;"></div>');

		// Set scrolled area position to 0
		$(scrollArea).css("top", "0").css("left", "4");

		// Add Title line to scroll area
		$(scrollArea).append($('<p id="eventTitle" class="calendar_date">' + settings.title + '</p>'));


		// Get the scroller contents vie cross domain ajax using JSONP
		GetScrollerInfo(settings, scrollArea, passVars);

		// Get the height of the DIV container.
		scrollerHeight = $(container).height();
	
		//height of Scroller content (much of which is hidden from view)
		actualheight = $(scrollArea).height();
	
		if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1)
		{ 
			alert ("This browser is not compatible with auto scroll");
			//if Opera or Netscape 7x, add scrollbars to scroll and exit
			$(scrollArea).css("height", scrollerHeight + "px");
			$(scrollArea).css("overflow", "overflow");
			return
		}
	
		// Setup the mouse event handelers
		$(container).bind('mouseover', function(event)
		{	
			passVars.scrollSpeed = passVars.pausespeed;
			$(container).css("background-color", settings.scrollerBackgroundRoll);
		});

		$(container).bind('mouseout',  function(event)
		{
			passVars.scrollSpeed = passVars.defaultSpeed; 
			$(container).css("background-color", settings.scrollerBackground);
			if (passVars.pauseTmp < passVars.pauseDur) passVars.pauseTmp = 2;
		});

		// Setup the timer event handeler
		setInterval(function() { ScrollVertical(container, scrollArea, passVars); }, 30);
	}
	

	//-----------------------------------------------------
	// ScrollVertical
	//-----------------------------------------------------
	function ScrollVertical(container, scrollArea, passVars)
	{
		var	scrollerHeight;

		//height of marquee content (much of which is hidden from view)
		actualheight = $(scrollArea).height();
	
		// Check all paragraphs to see if one of them is at the top of container
		paragraphAtTop = false;
		tmp1 = $(scrollArea).css("top"); tmp1 = parseInt(tmp1) * -1;
		$("p.calendar_title").each(function(n)
		{
			tmp2 = parseInt(this.offsetTop);
			if (tmp1 == tmp2)
			{
				paragraphAtTop = true;
			}

		});

		// Check to see if paragraph is at the top of container
		if (paragraphAtTop == true)
		{
			// Disable scrolling
			passVars.enableScroll = false;

			// Decrement pause counter
			passVars.pauseTmp--;

			// Check to see if we are done with the pause
			if (passVars.pauseTmp < 1)
			{
				passVars.enableScroll = true;
				passVars.pauseTmp = passVars.pauseDur;
			}
			
		}

				
		if ( (passVars.enableScroll == true) && (passVars.boxDisplayed == false) )
		{
			// Check to see if scroller has reached the end of its height
			var intTop = $(scrollArea).css("top");

			if (parseInt(intTop) > (actualheight*(-1)+8)) 
			{
				// No so keep scrolling
				$(scrollArea).css("top", parseInt($(scrollArea).css("top")) - passVars.scrollSpeed + "px");
			}
			else 
			{
				// Get the height of the container
				scrollerHeight = $(container).height();
		
				//Yes so reset to original position
				$(scrollArea).css("top", parseInt(scrollerHeight) + "px");
			}
		}
	}

	//-----------------------------------------------------
	// GetScrollerInfo
	//-----------------------------------------------------
	function GetScrollerInfo(settings, scrollArea, passVars)
	{
		var url = "http://www.huntsvillear.org/manage_calendar/!calendar_ajax.php?callback=?";
		$(function()
		{
			$.get(url, function(data, textStatus)
				{
					$.each(data, function(index, info)
					{
						var calHtml  = "";
						calHtml += "<a class='calendar_link' href='#'>";
						calHtml += "<div class='calendar_date'>" + info.date +  "</div>";
						calHtml += "<div class='calendar_desc'>" + info.title + "</div>";
						calHtml += "<div class='calendar_time'>" + info.time + "</div>";
						calHtml += "</a>";
						
						if (info.where != "")
						calHtml += "Location: " + info.where + "</a><br><br>";
						
						eventId = "#event" + index;
						$(scrollArea).append($('<p id="event' + index + '"></p>').html(calHtml).addClass("calendar_title").bind('click', function(event)
						{
							// Stop scroller while the calendar info window is being displayed
							passVars.boxDisplayed = true;

							// Format display info and put in cal info box
							ScrollerItemClicked(info, index, settings, passVars);
						}));

						$(eventId).css("background-color", "#008800");

					});
				},
				"json"
			);              
		});
	}	


















	//**********************************************************************************************************************
	//  ShadeScreenCreateMessageWindow 
	//**********************************************************************************************************************
	function ShadeScreenCreateMessageWindow(vis, settings, passVars) 
	{
		// Pass true to gray out screen, false to ungray
		var zindex = 15000;
		var opacity = .80;

		if ($("#waitScreenObject").length < 1)
		{
			// The dark layer doesn't exist. So we'll create it here and apply some basic styles.
			$("body").append($('<div id="waitScreenObject"></div>'));
			$("#waitScreenObject").css("position", "absolute").css("top", "0px").css("left", "0px");
			$("#waitScreenObject").css("overflow", "hidden").css("display", "none");
			$("#waitScreenObject").css("backgroundColor", "#000000");
			$("#waitScreenObject").css("zIndex", zindex).css("opacity", opacity );

			// Create the message div
			$("body").append($('<div id="waitScreenMsg"></div>'));
			$("#waitScreenMsg").css("position", "absolute").css("top", "50px").css("left", "100px").css("width", settings.popWidth+ "px").css("height", settings.popHeight+ "px");
			$("#waitScreenMsg").css("overflow", "hidden").css("display", "none").css("border", "3px");
			$("#waitScreenMsg").css("textAlign", "center").css("backgroundColor", "#FFFFFF");
			$("#waitScreenMsg").css("fontSize", "20px").css("fontWeight", "bolder").css("color", "#800000");
			$("#waitScreenMsg").css("zIndex", zindex + 1);
			$("#waitScreenMsg").bind('click', function(event) 
			{
				ShadeScreenCreateMessageWindow(false, settings, passVars);
				passVars.enableScroll = true;
				passVars.boxDisplayed = false;
			});
		}
		
		if (vis) 
		{
			// Calculate the page width and height 
			var pageHeight = $(document).height();
			var pageWidth = $(document).width();
                    
			$("#waitScreenObject").css("display", "block");
			$("#waitScreenObject").css("width", pageWidth).css("height", pageHeight);

			// Calculate left position to center message div
			var centerLeft = (pageWidth - $("#waitScreenMsg").width()) / 2;
			$("#waitScreenMsg").css("left", centerLeft).css("display", "block");
		} 
		else 
		{
			$("#waitScreenObject").css("display", "none");
			$("#waitScreenMsg").css("display", "none");
		}
	}


	//-----------------------------------------------------
	// ScrollerItemClicked
	//-----------------------------------------------------
	function ScrollerItemClicked(info, index, settings, passVars)
	{

		// Shade the screen and display the cal info box
		ShadeScreenCreateMessageWindow(true, settings, passVars);

		// Calc inner div width
		var innerWidth = $("#waitScreenMsg").width() - 10;

		// Make html
		var ht = "";
		ht += '		<div id="calendarDivTitle">' + info.title + '</div>';
		ht += '		<div id="calendarDivDate">' + info.date + '</div>';
		ht += '		<div id="calendarDivDesc">' + info.desc + '</div>';
		ht += '		<div id="calendarDivTime">' + info.time + '</div>';

		if (info.contact != "")	ht += '		<div id="calendarDivContact">Contact: ' + info.contact + '</div>';
		if (info.phone != "")	ht += '		<div id="calendarDivPhone">Phone: ' + info.phone + '</div>';
		if (info.email != "")	ht += '		<div id="calendarDivEmail">Email: ' + info.email + '</div>';

		// Add inner html to cal info box
		$("#waitScreenMsg").html(ht);	

	}



})(jQuery);