//calcode.js
// - Javascript code for the Hell's Kitchen Entertainment Calendar
// (c)2009 Justin Schwartzbauer - All rights reserved - Used with permission


// CALENDAR SETTINGS /////////////////
var Calendar_DateSpacing = 2;  
var Calendar_MonthHeaderHeight = 50;
var Calendar_EntertainmentLogoHeight = 84;
var Calendar_NavButtonsHeight = 30;
var Calendar_EventListTop = 22;
var Calendar_EventPopUpWidth = 150;
var Calendar_EventPopUpHeight = 120;
var Calendar_PopUpShadowOffset = 4;
var Calendar_FlyerPageWidth = 650;
var Calendar_FlyerPageHeight = 650;
var Calendar_Height = 1100;   //old height 1000
var Calendar_EventShadowOffset = 15;
/////////////////////////////////////


var Calendar_Width;
var Calendar_Height;
var CurrentMonth;
var CurrentYear;
var CurrentDay;
var dateWidth;
var dateHeight;
var popupIsOpen = new Array();
var CalContainerPositionX;
var CalContainerPositionY;

function loadCalendar(containerDivID)
{
	var today = new Date();
	
	CurrentMonth = today.getMonth() + 1;
	CurrentYear = today.getFullYear();
	CurrentDay = today.getDate();
	
	fillEventList();
	
	//access the container Div
	var containerDiv = document.getElementById(containerDivID);
	if (!containerDiv)
		return;
		
	Calendar_Width = containerDiv.offsetWidth;
	Calendar_Height = Calendar_Height;
	
	//record the position of the container div
	CalContainerPositionX = findPosX(containerDiv);
	CalContainerPositionY = findPosY(containerDiv);
	
	//create the main calendar Div
	var CalendarMainDiv = createDiv("calendarMain");
	containerDiv.appendChild(CalendarMainDiv);
	CalendarMainDiv.style.width = Calendar_Width + "px";
	CalendarMainDiv.style.height = Calendar_Height + "px";
	
	//create the Feature Banner
	var featDiv = createDiv("featureBanner");
	CalendarMainDiv.appendChild(featDiv);
	featDiv.onclick = function () { showCalEvent(-1); };
	
	//create the navigation buttons
	var navLeftDiv = createDiv("btnLastMonth");
	CalendarMainDiv.appendChild(navLeftDiv);
	navLeftDiv.style.left = "20px";
	navLeftDiv.style.top = Calendar_EntertainmentLogoHeight + "px";
	navLeftDiv.onmouseover = function(){ var a = document.getElementById('btnLastMonth');  a.style.backgroundPosition = '0px 0px';}; 
	navLeftDiv.onmouseout = function(){ var a = document.getElementById('btnLastMonth'); a.style.backgroundPosition = '-40px 0px';}; 
	navLeftDiv.onclick = function(){ CurrentMonth--; if (CurrentMonth<1){CurrentMonth = 12; CurrentYear--;} loadNewMonth(); }; 
	var navRightDiv = createDiv("btnNextMonth");
	CalendarMainDiv.appendChild(navRightDiv);
	navRightDiv.style.left = (Calendar_Width-40) + "px";
	navRightDiv.style.top = Calendar_EntertainmentLogoHeight + "px";
	navRightDiv.onmouseover = function(){ var a = document.getElementById('btnNextMonth');  a.style.backgroundPosition = '-20px 0px';}; 
	navRightDiv.onmouseout = function(){ var a = document.getElementById('btnNextMonth'); a.style.backgroundPosition = '-60px 0px';}; 
	navRightDiv.onclick = function(){ CurrentMonth++; if (CurrentMonth>12){CurrentMonth = 1; CurrentYear++;} loadNewMonth(); }; 
	
	//create the Month Header
	var MonthHeaderDiv = createDiv("monthHeader");
	CalendarMainDiv.appendChild(MonthHeaderDiv);
	MonthHeaderDiv.style.width = Calendar_Width + "px";
	MonthHeaderDiv.style.height = (Calendar_MonthHeaderHeight/2) + "px";
	MonthHeaderDiv.style.top = Calendar_EntertainmentLogoHeight + Calendar_NavButtonsHeight + Calendar_DateSpacing * 4 + "px";   
	
	//create the weekday headers
	var dateWidth = (Calendar_Width - Calendar_DateSpacing * 6) / 7;
	var CurrentX = 0;
	var CurrentY = Calendar_EntertainmentLogoHeight + Calendar_NavButtonsHeight + (Calendar_MonthHeaderHeight/2) + Calendar_DateSpacing * 4;
	var i;
	var newDiv;
	for (i = 0; i < 7; i++)
	{
		newDiv = createDiv("dateHead" + i);
		newDiv.className = "weekdayHeads";
		CalendarMainDiv.appendChild(newDiv);
		newDiv.style.width = dateWidth + "px";
		newDiv.style.height = (Calendar_MonthHeaderHeight/2) + "px";
		newDiv.style.left = CurrentX + "px";
		newDiv.style.top = CurrentY + "px";
		CurrentX += (dateWidth + Calendar_DateSpacing);
		newDiv.innerHTML = "<table width='100%' height = '100%' border='0' cellspacing='0' cellpadding='0'><tr><td><div align='center'>" + getDayOfWeekString(i)+"</div></td></tr></table>";
	}
	
	//create the entertainment calendar logo image
	var EntLogo = createDiv("EntLogo");
	CalendarMainDiv.appendChild(EntLogo);
	
	//create a the date boxes
	createCalendar();
	$("#calendarDates").fadeIn("fast");

}


function loadNewMonth()
{
	$("#calendarDates").fadeOut("fast", function () {createCalendar(); $("#calendarDates").fadeIn("fast"); } );
}

function bumpEvtUp(evtNum)
{
	//get access to the main calendar div
	var CalendarMainDiv = document.getElementById("calendarMain");
	
	//delete the event Popup if it already exists
	$("#EventPopUp"+evtNum).remove();
	
	popupIsOpen[evtNum] = true;
	
	//get the event link object
	var eventObj = document.getElementById("eventLink"+evtNum);
	if (eventObj)
	{
		//create the PopUp
		EventPopUp = createDiv("EventPopUp"+evtNum);
		EventPopUp.className = "EventPopUp";
		CalendarMainDiv.appendChild(EventPopUp);
	
		var Left = findPosX(eventObj) - CalContainerPositionX;
		var Top = findPosY(eventObj) + eventObj.offsetHeight - CalContainerPositionY;
		
		EventPopUp.style.width = Calendar_EventPopUpWidth + "px";
		EventPopUp.style.height = Calendar_EventPopUpHeight + "px";
		EventPopUp.style.top = Top + "px";
		EventPopUp.style.left = Left + "px";
		EventPopUp.style.display = "none";
		EventPopUp.style.zIndex = "2";
		EventPopUp.innerHTML = "<table height = '100%' width = '100%'><tr><td><b>"+EventList[evtNum].time+"</b><span style='font-size: 12px'><br>"+EventList[evtNum].eStyle+"<br><b>"+EventList[evtNum].cover+"</b></span><hr style = 'border:1px dotted #FFFFFF'><span style='font-size: 10px'>Click for more info</span></td></tr></table>";
		$("#EventPopUp"+evtNum).show("fast",function(){bumpEvtUpAddShadow(evtNum,Top,Left)});
		
	}
	
}
function bumpEvtUpAddShadow(evtNum,Top,Left)
{
	if (!popupIsOpen[evtNum]) 
		return;
	
	//get access to the main calendar div
	var CalendarMainDiv = document.getElementById("calendarMain");
	
	//delete the Popup shadow if it already exists
	$("#EventPopUpShadow"+evtNum).remove();
	
	//create the Shadow
	PopUpShadow = createDiv("EventPopUpShadow"+evtNum);
	PopUpShadow.className = "EventPopUpShadow";
	CalendarMainDiv.appendChild(PopUpShadow);

	PopUpShadow.style.width = Calendar_EventPopUpWidth + "px";
	PopUpShadow.style.height = Calendar_EventPopUpHeight + "px";
	PopUpShadow.style.top = Top + Calendar_PopUpShadowOffset + "px";
	PopUpShadow.style.left = Left + Calendar_PopUpShadowOffset + "px";
	PopUpShadow.style.zIndex = "1";
	$("#EventPopUpShadow"+evtNum).css("opacity","0.4");

	
}
function bumpEvtDn(evtNum)
{
	popupIsOpen[evtNum] = false;
	
	//delete the Popup Shadow if it already exists
	$("#EventPopUpShadow"+evtNum).remove();
	
	$("#EventPopUp"+evtNum).hide("fast", function(){bumpEvtDnKill(evtNum)});
	
}
function bumpEvtDnKill(evtNum)
{
	if (popupIsOpen[evtNum]) 
		return;
		
	//delete the Popup Shadow if it already exists
	$("#EventPopUpShadow"+evtNum).remove();
	//delete the event Popup if it already exists
	$("#EventPopUp"+evtNum).remove();
}


function createCalendar()
{
	//get access to the main calendar div
	var CalendarMainDiv = document.getElementById("calendarMain");

	//change the month title
	var MonthHeaderDiv = document.getElementById("monthHeader");
	MonthHeaderDiv.innerHTML = "<table width='100%' height = '100%' border='0' cellspacing='0' cellpadding='0'><tr><td><div align='center'>" + getMonthNameString(CurrentMonth) +",&nbsp;"+ CurrentYear + "</div></td></tr></table>";

	//delete the calendar dates if they already exist
	var CalendarDiv = document.getElementById("calendarDates");
	if (CalendarDiv)
		CalendarMainDiv.removeChild(CalendarDiv);
	
	//calculate the height of the entire header area
	var headerHeight = (Calendar_MonthHeaderHeight + Calendar_NavButtonsHeight + Calendar_DateSpacing * 6 + Calendar_EntertainmentLogoHeight);  
	
	//create the calendar dates Div
	CalendarDiv = createDiv("calendarDates");
	CalendarMainDiv.appendChild(CalendarDiv);
	CalendarDiv.style.display = "none";
	CalendarDiv.style.width = Calendar_Width + "px";
	var CalendarDatesHeight = (Calendar_Height - headerHeight);
	CalendarDiv.style.height = CalendarDatesHeight + "px";
	CalendarDiv.style.top = headerHeight + "px";
	
	//start the calendar date positioning
	dateWidth = (Calendar_Width - Calendar_DateSpacing * 6) / 7;
	dateHeight = (CalendarDatesHeight - Calendar_DateSpacing * 5) / 6;
	var firstDay = getDayOfWeek(1, CurrentMonth, CurrentYear);
	var CurrentX = firstDay * (dateWidth + Calendar_DateSpacing);
	var CurrentY = 0;

	
	//add the dates
	var today = new Date();
	var dateNumberDiv;
	var newDiv;
	var eventsDiv;
	var d;
	var eventList;
	var eventHTML;
	var ei;
	
	
	//*******************************************************
	//** This is Dan's idea...  (c)2010 Dan DeMuth's Brain
	
	//turn off the god damn back button on current month
	if ((CurrentMonth == (today.getMonth() + 1)) && (CurrentYear == today.getFullYear()))
		document.getElementById("btnLastMonth").style.visibility = "hidden";
	else
		document.getElementById("btnLastMonth").style.visibility = "visible";
	
	//*******************************************************
	
	
	for (d = 1; d <= daysInMonth(CurrentMonth, CurrentYear); d++)
	{
		newDiv = createDiv("date" + d);
		newDiv.className = "calendarDateBox";
		CalendarDiv.appendChild(newDiv);
		newDiv.style.width =dateWidth + "px";// dateWidth + "px"
		newDiv.style.height =dateHeight + "px";//dateHeight + "px"
		newDiv.style.left = CurrentX + "px";
		newDiv.style.top = CurrentY + "px";
		
		//the date # boxes
		dateNumberDiv = createDiv("dateNum"+d);
		dateNumberDiv.className = "dateNumberBox";
		newDiv.appendChild(dateNumberDiv);
		dateNumberDiv.innerHTML = d;
		
		//the events
		eventsDiv = createDiv("events" + d);
		newDiv.appendChild(eventsDiv);
		eventsDiv.style.position = "absolute";
		eventsDiv.style.width = dateWidth-Calendar_DateSpacing * 4 + "px";
		eventsDiv.style.height = (dateHeight-Calendar_EventListTop) + "px";
		eventsDiv.style.left = Calendar_DateSpacing * 2 + "px";
		eventsDiv.style.top = Calendar_EventListTop + "px";
		
		var thisEvent;
		eventsOnDay = getEventsOn(d, CurrentMonth, CurrentYear);
		if (eventsOnDay[0] > 0 )
		{
			eventHTML = "";
			for (ei = 1; ei <= eventsOnDay[0]; ei++)
			{
				thisEvent = eventsOnDay[ei];
				eventHTML += "<a class = 'eventLink' id = 'eventLink" + thisEvent + "' href = 'javascript: showCalEvent("+thisEvent+");'  onmouseover = 'javascript:bumpEvtUp(" + thisEvent + ");' onmouseout = 'javascript:bumpEvtDn(" + thisEvent + ");'>" + EventList[thisEvent].title + "</a><p style='font-size:5px'></p>";
			}
			eventsDiv.innerHTML = eventHTML;
		}
		
		
		//highlight today
		if ((CurrentMonth == (today.getMonth() + 1)) && (CurrentYear == today.getFullYear()) && (d == today.getDate()))
		{
			newDiv.style.backgroundColor = "#fffdef";
			dateNumberDiv.style.backgroundColor = "#F9F4D7";
			dateNumberDiv.style.color = "#000000";
		}
		
		//increment the position fot the next date box
		CurrentX += dateWidth + Calendar_DateSpacing;
		if (CurrentX >= Calendar_Width)
		{
			CurrentX = 0;
			CurrentY += dateHeight + Calendar_DateSpacing;
		}
	}

}

function getEventsOn(TheDay, TheMonth, TheYear)
{
	var i;
	var f;
	var s = new Array();
	s[0] = 0;
	
	for (i = 0; i < EventList.length; i++)
	{
		if ((EventList[i].event_year == TheYear) && (EventList[i].event_month == TheMonth) && (EventList[i].event_day == TheDay))
		{
			s[0]++;
			s[s[0]] = i;
		}
	}
	
	return s;
}

function showCalEvent(evtNum)
{
	//dim the rest of the page
	var evtGreyOut = createDiv("evtGreyOut");
	var cssObj = {'opacity' : '0.0'}
	$("#evtGreyOut").css(cssObj);
	
	$("#evtGreyOut").fadeTo("slow", 0.6, function(){ finishShowCalEvent(evtNum) });
	
}
function finishShowCalEvent(evtNum)
{
	//determine dimensions
	var evtW = Calendar_FlyerPageWidth;
	var evtH = Calendar_FlyerPageHeight;
	var evtT = CalContainerPositionY + Calendar_NavButtonsHeight + Calendar_EntertainmentLogoHeight + Calendar_MonthHeaderHeight;
	var evtL = CalContainerPositionX + (Calendar_Width - Calendar_FlyerPageWidth) / 2;
	if (evtL < Calendar_EventShadowOffset)
		evtL = Calendar_EventShadowOffset;
		
	//create the event shadow
	var evtDisplayShadow = createDiv("evtDisplayShadow");
	evtDisplayShadow.style.width = evtW + Calendar_EventShadowOffset * 2 + "px";
	evtDisplayShadow.style.height = evtH + Calendar_EventShadowOffset * 2 + "px";	
	evtDisplayShadow.style.top = evtT - Calendar_EventShadowOffset + "px";
	evtDisplayShadow.style.left = evtL - Calendar_EventShadowOffset + "px";
	var cssObj = {'opacity' : '0.5'}
	$("#evtDisplayShadow").css(cssObj);
	
	//create the event display 
	var evtDisplay = createDiv("evtDisplay");
	evtDisplay.style.width = evtW + "px";
	evtDisplay.style.height = evtH + "px";	
	evtDisplay.style.top = evtT + "px";
	evtDisplay.style.left = evtL + "px";
	
	//close button
	var btnCloseEvtDisplay = createDiv("btnCloseEvtDisplay");
	evtDisplay.appendChild(btnCloseEvtDisplay);
	btnCloseEvtDisplay.style.left = "623px";
	btnCloseEvtDisplay.style.top = "5px";
	btnCloseEvtDisplay.onclick = function () { CloseCalEvent(); };
	
	//the Flyer
	var evtFlyer = createDiv("evtFlyer")
	evtDisplay.appendChild(evtFlyer);
	evtFlyer.style.backgroundImage = "url(http://hellskitcheninc.com/eCal/flyer/" + EventList[evtNum].imageName + ")";
	
	//info section
	if (EventList[evtNum].description)
		var descString = EventList[evtNum].description;
	else
		var descString = ""
	
	var isURL = true;
	var URLdescString = EventList[evtNum].bandURLdescriptor;
	var URLString = EventList[evtNum].bandURL;
	
	if ( (URLdescString == "N/A") || (URLString == "N/A") )
		isURL = false;

		
	
	
	var evtInfo = createDiv("evtInfo")
	evtDisplay.appendChild(evtInfo);
	var infoHTML = "<hr style = 'border:1px dotted #000000'><span style = 'font-size: 18px'>" + EventList[evtNum].title + "</span><br>";
	infoHTML+= "<span style = 'font-style: italic'>" + EventList[evtNum].eStyle + "</span><br><br>";
	infoHTML+= "<span style = 'font-size: 14px'>" + EventList[evtNum].time + "<br>" + EventList[evtNum].cover + "</span><br><hr style = 'border:1px dotted #000000'><br>";
	
	if (isURL)
		infoHTML+= descString + "<br><br>" + URLdescString + "<br><a target='_blank' href = '" + URLString + "'>" + URLString + "</a>";
	else
		infoHTML+= descString
	
	evtInfo.innerHTML = infoHTML;
	

}

function CloseCalEvent()
{
	$("#evtDisplay").remove();
	$("#evtDisplayShadow").remove();
	$("#evtGreyOut").fadeOut("slow", function(){ finishCloseCalEvent() });
	
	
}
function finishCloseCalEvent()
{
	$("#evtGreyOut").remove();	

}


function getDayOfWeek(TheDay, TheMonth, TheYear) 
{
	//returns...
    //0 - sunday
    //1 - monday
    //2 - tuesday
    //3 - wednesday
    //4 - thursday
    //5 - friday
    //6 - saturday
	
    var mcode;
    var monthdays = new Array(5, 1, 1, 4, 6, 2, 4, 0, 3, 5, 1, 3);

    mcode = monthdays[TheMonth - 1];
    var DayOfWeek = ((Math.floor(TheYear * 1.25) + mcode + TheDay) % 7);
    if (((TheYear % 4) == 0) && (TheMonth < 3))
	{
        DayOfWeek = (DayOfWeek + 6) % 7;
	}
	return DayOfWeek;

}

function getDayOfWeekString(weekCode) 
{
	var s;
    switch (weekCode)
	{
    case 0:
        s = "Sunday";
		break;
    case 1:
        s = "Monday";
		break;
    case 2:
        s = "Tuesday";
		break;
    case 3:
        s = "Wednesday";
		break;
    case 4:
        s = "Thursday";
		break;
    case 5:
        s = "Friday";
		break;
    case 6:
        s = "Saturday";
		break;
    default:
        s = "(invalid)";
		break;
	}
	return s;
    
}
function getMonthNameString(TheMonth) 
{
	var s;
    switch (TheMonth)
	{
    case 1:
        s = "January";
		break;
    case 2:
        s = "February";
		break;
    case 3:
        s = "March";
		break;
    case 4:
        s = "April";
		break;
    case 5:
        s = "May";
		break;
    case 6:
        s = "June";
		break;
	case 7:
        s = "July";
		break;
    case 8:
        s = "August";
		break;
    case 9:
        s = "September";
		break;
    case 10:
        s = "October";
		break;
    case 11:
        s = "November";
		break;
    case 12:
        s = "December";
		break;	
    default:
        s = "(invalid)";
		break;
	}
	return s;
    
}

function daysInMonth(TheMonth, TheYear)
{
     return 32 - new Date(TheYear, TheMonth - 1, 32).getDate();
}