//TODO on load set scrollLeft to 0 in case timeline doesn't left align initially...


// var to hold todays date

var todaysDate;

// variable for date conversion

var dateCount;
var dateEndCount;

// variable for converted dates

var postDate;
var postEndDate;

// vars for activating pre and post loads

var activeFutureNum;
var activePastNum;

// flags to stop and start pre loads

var activeFutureFlag = true;
var activePastFlag = true;


var html = '';

// vars for past date conversion

var pastCount;
var pastCountMinus;

// vars for converted past dates

var pastDate;
var pastMinusDate;

var timeLinePos = 0;
var firstLoad = true;

// num is the amount of days ahead of the present day you require. If you want 3 days ahead of present day then num should be set to two


function getTimeline(num) {
    $('ul#timeline').css('position', 'absolute');

   
    //console.debug(ceilNum);
    
    dateCount = dateEndCount = 0;
    //$('#d-' + todaysDate).css('background-color', 'blue');
    
    

    var box = {}

    var container = {
        left: $(window).scrollLeft(),
        top: $(window).scrollTop(),
        width: $(window).width(),
        height: $(window).height()
    };

    $.isOnScreen(box, container);

    // Scrolling function      
    $('div#dragWrap').mousedown(function (event) {

        findPosOfFutureActive();
        //checkFutureDates();
        $(this)
            .data('down', true)
            .data('x', event.clientX)
            .data('scrollLeft', this.scrollLeft);
        this.onselectstart = function () { return false; };
        return false;
    }).mouseup(function (event) {
        $(this).data('down', false);
    }).mousemove(function (event) {
        if ($(this).data('down') == true) {
        	
        		$("div.eventCloud").remove();
        	
            //console.debug(activePastFlag);
            this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
            //checkFutureDates();
            findPosOfFutureActive(true);
        }
    }).mousewheel(function (event, delta) {
				
				$("div.eventCloud").remove();
				
                this.scrollLeft -= (delta * 25);

                findPosOfFutureActive(true);
				//checkFutureDates();

    }).css({ 'overflow': 'hidden' });

    $('#dragWrap').mouseout(function (event) {
        $('#dragWrap').data('down', false);
    });
    
    
	initTimeline();
}

function initTimeline() {
  var startDate = new Date();
  startDate.setDate(startDate.getDate() + dateCount);

  

  postDate = getDateString(startDate);
	
  var viewportSize = $(document).width();
  var amountNeeded = viewportSize / 200 + 2;
  var ceilNum = Math.ceil(amountNeeded);
  addFutureBoxes(ceilNum);
}

function refreshTimeline() {
	
	//dateCount = dateEndCount = 0;
	
	dateEndCount = 0;
	
  var viewportSize = $(document).width();
  var amountNeeded = viewportSize / 200 + 2;
  var ceilNum = Math.ceil(amountNeeded);
  addFutureBoxes2(ceilNum);
}



function findPosOfFutureActive(fromScroll) {

	
	//alert('Finding poss of active');
	var addActivator = $('ul#timeline li').length - 1;
	
	
	
	activeFutureNum = $('ul#timeline li')[addActivator];
	activeFutureFlag = true;
	// $(activeFutureNum).addClass('activeNum');
	/*
	checkFutureDates();
}

function checkFutureDates() {
*/
	if ($(activeFutureNum).isOnScreen() && activeFutureFlag == true) {

	    //$(activeFutureNum).css('background-color', 'green');
	    if (fromScroll == true) {
	        addFutureBoxes(3, true);
	    }
	    else {
	        addFutureBoxes(3);
	    }
	    

	    //findPosOfFutureActive();

    activeFutureFlag = false;
	}
}


function addFutureBoxes(totalNum, fromScroll) {
    if (fromScroll == true) {
        endDate = new Date();
        endDate.addDays(dateEndCount);
        postEndDate = getDateString(endDate);

        postDate = postEndDate;
    }
    var firstTimeLoop = true;
    var endDate = new Date();
	
	
	
	for (var i = 0; i < totalNum; i++) {
      
      if ( slide_postDate_Formatted ) {
      	endDate = slide_postDate_Formatted;
      } else {
      	endDate = new Date();
      }
       if (firstTimeLoop == true && firstLoad == true) {
           endDate.addDays(0);
           firstTimeLoop = false;
           firstLoad = false;
       }
       else {
           endDate.addDays(1);
       }
     
      
		  //endDate.setDate(endDate.getDate() + dateEndCount);
		  postEndDate = getDateString(endDate);

		  //$('ul#timeline').append('<li id="d-' + postEndDate + '">' + postEndDate + '<hr></li>');
		  $('ul#timeline').append('<li id="d-' + postEndDate + '"></li>');
		  
		 dateEndCount++;
  }
  
  dateCount = dateEndCount;
  
  //$("#output").text( 'dateCount:' + dateCount +  ' dateEndCount:' + dateEndCount );
  
  setTimeline();
  getTimelineJSON();
}


function addFutureBoxes2(totalNum) {
	
	/*
	
	var startDate = new Date();
	startDate.setDate(slide_postDate_Formatted.getDate());
    postDate = getDateString(startDate);
	
	*/

    var startDate = slide_postDate_Formatted;

	//startDate.addDays(1);
	//newDate.setDate(slide_postDate_Formatted.getDate('Ymd'));

	postDate = getDateString(startDate);
	
	
	
     //postDate = slide_postDate_Formatted;//slide_postDate; // getDateString(startDate);
	

	var firstTimeLoop = true;

	for (var i = 0; i < totalNum; i++) {

	    var newDate = slide_postDate_Formatted;

	    if (firstTimeLoop == true) {
	        newDate.addDays(0);
	        firstTimeLoop = false;
	    }
	    else {
	        newDate.addDays(1);
	    }
	    postEndDate = getDateString(newDate);
		  
		  //newDate.setDate(slide_postDate_Formatted.getDate('Ymd'));
		  
		  
		  $('ul#timeline').append('<li id="d-' + postEndDate + '"></li>');
		
		  
		  dateEndCount++;
  }
  
  dateCount = dateEndCount;
  
  //$("#output").text( 'dateCount:' + dateCount +  ' dateEndCount:' + dateEndCount );
  
  setTimeline();
  getTimelineJSON();
}

function shiftTimeline() {
	 
	 /*findPosOfDate();
}

function findPosOfDate() {
	*/
	var selector = $('li#d-' + slide_postDate);
	
	if ( selector && selector[0] ) { // selector[0] checks if the element exists...
		
		var selectorX = selector.position().left - 300;
		if ( selectorX < 0 ) selectorX = 0;
		
		
		$('div#dragWrap').animate({scrollLeft:selectorX}, { duration: 1000, complete: function(){ findPosOfFutureActive() }} );
		
	} else {
		
		
		$('ul#timeline').empty().append('<li class="timelineBuffer"></li>');
		$('div#dragWrap').animate({scrollLeft:0},200);
		//dateCount = -5;
		
		//addFutureBoxes( 20 );
		//---------------------------------------------------------------------------------------------------------------------
		refreshTimeline();
		
	}
	
}


function getDateString(time) {
    var year = time.getFullYear();
    var month = time.getMonth() + 1;
    var day = time.getDate();
    if (month < 10) {
        month = "0" + month;
    }
    if (day < 10) {
        day = "0" + day;
    }
    return year + '' + month + '' + day;
}


function getTimeString(time) {
    var hour = time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    if (minute < 10) {
        minute = "0" + minute;
    }
    /*if (second < 10) {
        second = "0" + second;
    }*/
    return hour + ':' + minute;// + ':' + second;
}

function getTimeValue(time) {
	var hour = time.getHours();
	var minute = time.getMinutes();
	minute = ~~(minute / 15) * 15;
	return ~~(hour * 60 + minute);
}

function getTimePeriod(time) {
	var hour = time.getHours();
	if ( hour < 12 ) {
		return 'morning';
	} else if ( hour < 18 ) {
		return 'afternoon';
	} else {
		return 'evening';
	}
}

function getCategoryPin( categoryName, multipleEvents ) {
	var imageName;
	switch ( categoryName ) {
		case 'Art' : 
			imageName = 'art';
			break;
		case 'Comedy' : 
			imageName = 'comedy';
			break;
		case 'Dance' : 
			imageName = 'dance';
			break;
		case 'Festivals' : 
			imageName = 'festival';
			break;
		case 'Film' : 
			imageName = 'film';
			break;
		case 'Heritage' : 
			imageName = 'heritage';
			break;
		case 'Music' : 
			imageName = 'music';
			break;
		case 'Theatre' : 
			imageName = 'theatre';
			break;
		case 'More' :
			imageName = 'more';
			break;

default:

    imageName = 'art';

    break;
	}
	return 'pins/timeline_pin_' + (multipleEvents ? 'multi_' : '') + imageName + '.png';
}



function getTimelineJSON(firstload) {
	var theDate;
	var selector;
	var dayData;
	var formatDate;
	var dateHTML;
	

	$.getJSON('/Ajax/GetTimeline.ashx',
    {

        startDate: postDate,
        endDate: postEndDate,
        venueid: slide_ven
    },
    function (data) {
        $.each(data, function (index, day) {
            theDate = new Date(parseInt(day.Date.substr(6)));
            selector = 'li#d-' + getDateString(theDate);
            dayData = getDayData(day);

            formatDate = stripDate(day.Date);
            dateHTML = '<div class="timelineDate"><span class="timelineDateDisplay">' + formatDate.format('D dS M') + '</span></div>';

            $(selector).css('width', dayData.panelWidth);
            $(selector).append(dateHTML);
            $(selector).append(dayData.html);
        });

        setTimeline();
        checkCats();
        setTimelineFilters();
        fixPNGs(); 

        // function for IE 6,7,8 as it cannot handle opacity correctly with pngs

    });
}


function getDayData(day) {
	
	var c, d, e;
	
	var events = day.Events.length;
	var cats, dates;
	var xp, yp;
	
	var eventMins;
	var eventTime;
	var eventPeriod; // morning/afternoon/evening
	var catId;
	var catName;
	var catPin;
	var eventId;
	
	var duplicates = [];
	
	// first loop is finding the maximum minutes of all events within the current panel, so you know how wide to make the panel.
	// consider looping through here and finding minMins, to know when first event is...
     
	var mins;

	// minMins is the time of your first event on the whole day
	// maxMins is the time of your first last in the whole day.

	var maxMins = 0;
	var minMins = 24 * 60;
	
	var dayHTML = '';
	
	for ( e = 0; e < events; e++ ) {
		
		catName = day.Events[e].Categories[0].Name;
		
		if ( duplicates[ catName ] == undefined ) {
			duplicates[ catName ] = [];
		}
		
		dates = day.Events[e].Dates.length;
		
		for ( d = 0; d < dates; d++ ) {
			
			var eventDate = new Date(parseInt(day.Events[e].Dates[d].substr(6)));
			mins = getTimeValue(eventDate);
			minMins = Math.min( mins, minMins );
			maxMins = Math.max( mins, maxMins );
			
			if ( duplicates[ catName ][ getTimeString(eventDate) ] == undefined ) {
				duplicates[ catName ][ getTimeString(eventDate) ] = [];
			}
			
			duplicates[ catName ][ getTimeString(eventDate) ].push( day.Events[e].Id );
			
		}
	}

if (events == 0) {

    // if no events make panel small ( 3 hrs wide)

		minMins = 0;
		maxMins = 3 * 60;
	}
	
	var totalMins = (maxMins-minMins);
	var panelWidth = totalMins * 28/60; // the magic number, 1 pixel gaps!!!!
	
	if ( events ) {
	
		for ( i = 0; i < 24; i+= 6 ) {
			var splitMins = i * 60;
			if ( splitMins > minMins && splitMins < maxMins ) {
			    xp = 3 + ((splitMins - minMins) / totalMins * panelWidth);

			    //dayHTML += "<div style='position:absolute;top:0px;left:" + xp + "px; width:1px; height:300px; background:#ccc;'>" + i + ":00</div>";

				dayHTML += "<div class='timelineSplit' style='left:" + xp + "px;'></div>";
			}
		}
		
		/* Position key 
		
			position1: Art
			position2: Comedy
			position3: Dance
			position4: More (was festivals)
            position5: film
            position6: BLANK?
            position7: heritage
            position8: music
            position9: theatre

		*/
		var positions = {
		    position1: 8,
            position2: 38,
            position3: 68,
            position4: 218,
            position5: 98,
            position6: 125,
            position7: 128,
            position8: 158,
            position9: 188
        };

		for ( e = 0; e < events; e++ ) {
			// only 1 cat per event!
			catId = day.Events[e].Categories[0].Id;
			catName = day.Events[e].Categories[0].Name;

            yp = positions['position' + catId];
//			if (catName == 'Heritage' || catName == 'Theatre' || catName == 'Music') {
//                
//			    //yp = -52 + catId * 30;
//			}
//			else {
//			    yp = -22 + catId * 30;
//			}

            //(e * -20);

			dates = day.Events[e].Dates.length;

			//dayHTML += dates +' Dates: ';

			for ( d = 0; d < dates; d++ ) {
				
				eventDate = new Date(parseInt(day.Events[e].Dates[d].substr(6)));
				eventMins = getTimeValue(eventDate);
				eventTime = getTimeString(eventDate);
				eventPeriod = getTimePeriod(eventDate);
				eventId = day.Events[e].Id;
				
				xp = 3 + ((eventMins-minMins) / totalMins * panelWidth);
				
				var eventIds = duplicates[ catName ][ getTimeString(eventDate) ];
				
				// deal with overlapping events
				if ( eventIds == 'pinned' ) {
					// do nothing... already pinned 
				} else if ( eventIds.length > 1) {
					
					catPin = getCategoryPin( catName, true );
					
					dayHTML += "<div style='position:absolute; top:" + yp +  "px;left:" + xp +  "px; width:10px;' class='" + catName + ' ' + eventPeriod + "'>";
					dayHTML += "<a href='javascript:getTimelineMultiplePopup(\"" + catName + "\",[" + eventIds + "],\"" + day.Events[e].Dates[d] + "\");'><img src='" + catPin + "' alt='event' border='0'></a>";
					dayHTML += '</div>';
					
					duplicates[ catName ][ getTimeString(eventDate) ] = 'pinned'; // hardy language! array becomes a string, voila.
				} else {
					
					catPin = getCategoryPin( catName, false );

					dayHTML += "<div style='position:absolute; top:" + yp + "px;left:" + xp + "px; width:10px;' class='" + catName + ' ' + eventPeriod + "'>";
					dayHTML += "<a href='javascript:getTimelineSinglePopup(\"" + catName + "\"," + eventId + ",\"" + day.Events[e].Dates[d] + "\");'><img src='" + catPin + "'></a>";
					dayHTML += '</div>';
				}
				
			
			}
		}
	
	}
	
	var dayData = {};
	dayData.html = dayHTML;
	dayData.panelWidth = panelWidth + 15;
	
	return dayData;
	
}


function setTimeline() {

    var timelineWidth = 0;
    $('ul#timeline li').each(function () {
        timelineWidth += $(this).width() + 10;
    });
    $('ul#timeline').width(timelineWidth);

}

var timelineX;
var timelineY;

$(document).mousemove(function(e){
	timelineX = e.pageX;
	timelineY = e.pageY
}); 



function getTimelineSinglePopup( categoryName, eventId, eventTime ) {
    $("div.eventCloud").remove();

    //alert( 'getTimelineSinglePopup' + categoryName + ' ' + eventId + ' ' + eventTime + ' ' + timelineX + ' ' + timelineY);

	var globalOps = {
		leftPos: timelineX,
		topPos: timelineY,
        cat: categoryName,
        date: eventTime
	}
	requestInfoPop(eventId, globalOps);
}

function getTimelineMultiplePopup( categoryName, eventIdList, eventTime ) {
	//alert( 'getTimelineMultiplePopup ' + eventIds.join(',') );
	$("div.eventCloud").remove();
	showMultiplePop('events', { eventIds: eventIdList.join(','), eventDate: eventTime, eventCategory: categoryName,leftPos: timelineX,
		topPos: timelineY} );
	
	
	/*$("div.eventCloud").remove();
	var globalOps = {
		leftPos: timelineX,
		topPos: timelineY,
    cat: categoryId
	}
	requestInfoPop(eventId, globalOps);*/
}




function setTimelineFilters() {
	//alert( slide_morn  + ' ' + slide_after + ' ' + slide_eve );
	
	if ( slide_morn ) {
	    $('.morning').removeClass('timeFilterOn').not('.noClick').css('opacity', 1).children('a').css('cursor', 'pointer');
		//$('.morning').css('visibility', 'visible' );
	} else {
    $('.morning').addClass('timeFilterOn').not('.noClick').css('opacity', 0.3).children('a').css('cursor', 'default');
		//$('.morning').css('visibility', 'hidden' );
	}
	
	if ( slide_after ) {
	    $('.afternoon').removeClass('timeFilterOn').not('.noClick').css('opacity', 1).children('a').css('cursor', 'pointer');;
		//$('.afternoon').css('visibility', 'visible' );
	} else {
	    $('.afternoon').addClass('timeFilterOn').not('.noClick').css('opacity', 0.3).children('a').css('cursor', 'default');
		//$('.afternoon').css('visibility', 'hidden' );
	}
	
	if ( slide_eve ) {
	    $('.evening').removeClass('timeFilterOn').not('.noClick').css('opacity', 1).children('a').css('cursor', 'pointer');;
		//$('.evening').css('visibility', 'visible' );
	} else {
	    $('.evening').addClass('timeFilterOn').not('.noClick').css('opacity', 0.3).children('a').css('cursor', 'default');
		//$('.evening').css('visibility', 'hidden' );
	}

    $('#timeline li div').each(function () {
	$(this).click(function () {
            if($(this).hasClass('timeFilterOn')){
                return false;
            }
        });
    });
}

function resetTimeline() {
    var filters = GetFilters();
    slide_postDate_Formatted = (filters.startdate.length == 12) ? new Date(getDateFromFormat(filters.startdate, "yyyyMMddHHmm")) : new Date(getDateFromFormat(filters.startdate, "yyyyMMdd"));
    firstTimeLoop = true;
    firstLoad = true;
}

function checkCats() {
    $('#timeline li div').removeClass('noClick').not('.timeFilterOn').not('.timelineDate').css('opacity', 1);

    $('#timeline li div').children('a').css('cursor', 'pointer');
    $('.dropChecks').find('input').each(function () {
        if ($(this).is(':checked') == false && $(this).next().text() != 'Everything') {
           hideThese($(this).next().text());
        }
     });

}

function hideThese(passedCats) {
    $('#timeline li div').each(function () {
        if ($(this).hasClass(passedCats)) {
            $(this).css('opacity', 0.3).addClass('noClick');
            $(this).children('a').css('cursor', 'default');

        }
        $(this).click(function () {
            if($(this).hasClass('noClick')){
                return false;
            }
        });
    });

}

function fixPNGs() {
    if (jQuery.browser.msie && jQuery.browser.version < 9) {
        var i;
        //alert(document.images.length);
        for (i in document.images) {
            if (document.images[i].src) {
                var imgSrc = document.images[i].src;
                if (imgSrc.substr(imgSrc.length - 4) === '.png' || imgSrc.substr(imgSrc.length - 4) === '.PNG') {
                    document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
                }
            }
        }
    }
}