var output = '';
var archiveOutput = '';
var intervalID;
var myHTMLOutput;
var myNavOutput;
var archivesOutput;
var image;
var feature_url;
var archive_url;
var featureTitle;
var subtitle;
var date;
var type;
var myNavData;
var mydata;
var activeID;
var eventType;
var pic;
var archiveTitle;
var archiveDate;
var archiveEndDate;
var archiveType;
var archiveData;
var newID;
var prevColor;
var lang;

function buildFeatures(featureTitle, subtitle, date, endDate, type, image, id){
	// Build HTML string and return
	output = '';
	output += '<div id="f'+id+'" class="feature">';
	output += '<div class="featureImage '+type+'"><a href="'+feature_url+'"><img src="'+image+'"/></a></div>';
	output += '<div class="featureDetails"><div id="colorSwatch" class="'+type+'"><img src="/sites/all/themes/labo/images/feature_color_black_triangle.gif"/></div>';
	output += '<span class="featureArtist"><a href="'+feature_url+'">'+featureTitle+'</a></span><br/>';
	if(subtitle.length > 0){output += '<span class="featureTitle">'+subtitle+'</span>';}

	
	if(date == endDate.substr(0, date.length)){
		output += '<span class="featureDate">'+endDate+'</span>';
	}else{
		output += '<span class="featureDate">'+date+' &raquo; '+endDate+'</span>';
	}
	
	
	output += '</div></div>';
	return output;
}
function buildArchives(pic, archiveTitle, archiveDate, archiveEndDate, archiveType, counter, archive_url){
	// Build HTML string and return
	var bgColor = '';
	if(archiveType == 'production'){
	bgColor = '#00CCCC';
	}else if(archiveType == 'workshop'){
	bgColor = '#ff99cc';
	}else if(archiveType == 'event'){
	bgColor = '#339966';
	}
	archiveOutput = '';
	archiveOutput += '<div class="archivesItem" id="a'+counter+'"><a href="'+archive_url+'">';
	archiveOutput += '<div class="archivesImage '+archiveType+'"><img src="'+pic+'" width="225px"/></div>';
	archiveOutput += '<div class="archivesText" style="background:'+bgColor+'">';
	archiveOutput += '<span class="archivesTitle">'+archiveTitle+'</span><br/>';

	if(archiveDate == archiveEndDate.substr(0, archiveDate.length)){
		archiveOutput += '<span class="archivesDate">'+archiveEndDate+'</span>';
	}else{
		archiveOutput += '<span class="archivesDate">'+archiveDate+' &raquo; '+archiveEndDate+'</span>';
	}
	
	archiveOutput += '</div></a></div>';
	return archiveOutput;
}	 
function cycle(){
	$('#navLinks a.nextNav').click();
	intervalID = setTimeout(cycle, 8000);
}
function parseDate(phpDate, addYear){
// 2008-01-01T00:00:00
	lang = $('html')[0].lang;
	var newDate ='';
	var year = phpDate.substring(0, 4);
	var month = phpDate.substring(5,7);
	var rawDay = phpDate.substring(8,10);
	
	var daySuffix = '';
	var day = '';
	
	if (rawDay.indexOf('0') ==0){
		day = rawDay.substring(1,2);
	} else{
		day = rawDay;
	}
	if (lang == 'en'){
		if (day==1) {suffix="st";}
		else if (day==2) {daySuffix="nd";}
		else if (day==3) {daySuffix="rd";}
		else if (day==21) {daySuffix="st";}
		else if (day==22) {daySuffix="nd";}
		else if (day==23) {daySuffix="rd";}
		else if (day==31) {daySuffix="st";}
		else {daySuffix="th";}

		var longMonth = '';
		if (month == 1){longMonth = 'January';}
		else if (month == 2){longMonth = 'February';}
		else if (month == 3){longMonth = 'March';}
		else if (month == 4){longMonth = 'April';}
		else if (month == 5){longMonth = 'May';}
		else if (month == 6){longMonth = 'June';}
		else if (month == 7){longMonth = 'July';}
		else if (month == 8){longMonth = 'August';}
		else if (month == 9){longMonth = 'September';}
		else if (month == 10){longMonth = 'October';}
		else if (month == 11){longMonth = 'November';}
		else if (month == 12){longMonth = 'December';}
	}else if (lang =='fr'){
		if (day==1) {daySuffix="re";}

		var longMonth = '';
		if (month == 1){longMonth = 'janvier';}
		else if (month == 2){longMonth = 'f&eacute;vrier';}
		else if (month == 3){longMonth = 'mars';}
		else if (month == 4){longMonth = 'avril';}
		else if (month == 5){longMonth = 'mai';}
		else if (month == 6){longMonth = 'juin';}
		else if (month == 7){longMonth = 'juillet';}
		else if (month == 8){longMonth = 'ao&ucirc;t';}
		else if (month == 9){longMonth = 'septembre';}
		else if (month == 10){longMonth = 'octobre';}
		else if (month == 11){longMonth = 'novembre';}
		else if (month == 12){longMonth = 'd&eacute;cembre';}
	
		// newDate = day+daySuffix+' '+longMonth;
		newDate = day+' '+longMonth;
	}
	// newDate = day+daySuffix+' '+longMonth;
	newDate = day+' '+longMonth;
	if (addYear == true){ 
		newDate += " "+year;
	}
	return newDate;
}

function handleFeatureXML (xml) {
		
		// Build an HTML string
		myHTMLOutput = '';
		myNavOutput = '<a href="#" class="prevNav"><img src="/sites/all/themes/labo/images/navLeftArw.png"></a>&nbsp;';
		
		var id = 1;
		
		$('feature',xml).each(function() {
			image = $(this).find("pic").text();
			featureTitle = $(this).find("feature_title").text();
			subtitle = $(this).find("subtitle").text();
			date = $(this).find("date").text();
			endDate = $(this).find("endDate").text();
			feature_url = "/" + $('html')[0].lang + $(this).find("url").text();
			type = $(this).find("type").text();
			var longDate = parseDate(date, false);
		    var longEndDate = parseDate(endDate, true);
		// Build row HTML data and store in string
			myNavData = '';
			if (id == 1){myNavData += ' <a href="#" class="'+type+'" id="'+id+'">'+id+'</a> ';
			}else{myNavData += '| <a href="#" class="'+type+'" id="'+id+'">'+id+'</a> ';}
			mydata = buildFeatures(featureTitle, subtitle, longDate, longEndDate, type, image, id);
			myHTMLOutput = myHTMLOutput + mydata;
			myNavOutput = myNavOutput + myNavData;
			id++;
		});
		if (id == 1) {
			$.get("/" + $('html')[0].lang + "/xml/home_feature_default.xml",{}, handleFeatureXML);
			return;
		}
		
		myNavOutput += ' &nbsp;<a href="#" class="nextNav"><img src="/sites/all/themes/labo/images/navRightArw.png"></a>';
		activeID = 1;
		// Update the DIV called Content Area with the HTML string
		$("#mainCarousel").append(myHTMLOutput);
		if(id > 2){$("#navLinks").append(myNavOutput);}
		$(".feature").hide();
		$("#f1").show();
		
		eventType = $('#navLinks #1').attr("className");
		if(eventType == "workshop"){
			$("#navLinks #1").css('color', '#ff99cc');}
		else if (eventType == "production"){
			$('#navLinks #'+activeID).css('color', '#00CCCC');
		}else if (eventType == 'event'){
			$('#navLinks #'+activeID).css('color', '#339966');
		}
		
		if(id > 2){intervalID = setTimeout(cycle, 5000);}
		$('#navLinks a').click(function() {
			clearInterval(intervalID);
			$('#navLinks a').css('color', '#fff');
			var $this = $(this);
			var x = $this.attr("className");
			var y = $this.attr("id");
			if(x=="prevNav"){
				$('#f'+activeID).fadeOut('slow', function() {
					activeID--;
					if(activeID < 1){
						activeID = id-1;
					}
					$('#f'+activeID).fadeIn('slow');
					eventType = $('#navLinks #'+activeID).attr("className");
					if(eventType == "workshop"){
						$('#navLinks #'+activeID).css('color', '#ff99cc');
					}else if (eventType == "production"){
						$('#navLinks #'+activeID).css('color', '#00CCCC');
					}else if (eventType == 'event'){
						$('#navLinks #'+activeID).css('color', '#339966');
					}
				});
			}else if (x=="nextNav"){
				$('#f'+activeID).fadeOut('slow', function() {
					activeID++;
					if(activeID == id){activeID = 1;}
					$('#f'+activeID).fadeIn('slow');
					eventType = $('#navLinks #'+activeID).attr("className");
					if(eventType == "workshop"){
						$('#navLinks #'+activeID).css('color', '#ff99cc');
					}else if (eventType == "production"){
						$('#navLinks #'+activeID).css('color', '#00CCCC');
					}else if (eventType == 'event'){
						$('#navLinks #'+activeID).css('color', '#339966');
					}
				});
			}else{
				if(x == "workshop"){
					$this.css('color', '#ff99cc');
				}else if (x == "production"){
					$this.css('color', '#00CCCC');
				}else if (x == 'event'){
					$this.css('color', '#339966');
				}
			
				$('#f'+activeID).fadeOut('slow', function() {
					$('#f'+y).fadeIn('slow');
					activeID = y;
				});
			} 
		});
		
	}
	function handleArchiveXML(xml){
		var counter = 1;
		archivesOutput = '';
		
		$('archiveItem', xml).each(function() {
			//alert($(this))	;
			 pic = $(this).find("pic").text();
			 archiveTitle = $(this).find("archiveTitle").text();
			 archiveDate = $(this).find("archiveDate").text();
			 archiveEndDate = $(this).find("archiveEndDate").text();
			 archiveType = $(this).find("type").text();			
			 archive_url = "/" + $('html')[0].lang + $(this).find("url").text();			
			//Build row HTML data and store in string
			
			
			var archiveLongDate = parseDate(archiveDate, false);
		    var archiveLongEndDate = parseDate(archiveEndDate, true);
			 archiveData = buildArchives(pic, archiveTitle, archiveLongDate, archiveLongEndDate, archiveType, counter, archive_url);
			 archivesOutput = archivesOutput + archiveData;
			 counter++;
		});
		
		$("#archivesItems").append(archivesOutput);
		if(counter>3){
		$("div.scrollable").scrollable({size:2,clickable:false}).circular();
		}else{
		$('#arrowHolder').hide();
		}
		$(".archivesItem").mouseenter(function(){
			newID = $(this).attr("id");
			prevColor = $("#"+newID+" .archivesText").css("background-color");
			$("#"+newID+" .archivesText").css('background-color','#000');
		}).mouseleave(function(){
			$("#"+newID+" .archivesText").css('background-color', prevColor);
		});

	}