var maxWidth;
var maxHeight;
var scrolling;
var xmlResult;

function init() {
	
	$('#supersize').supersized();
	
	$('ul#menu').hide().delay(500).fadeIn('slow');	
	
	$('#bike').tooltip({
		track: true,
		bodyHandler: function() { 
    	    return 'Click to take a ride on the bike'; 
	    },	
	    fade: 250
	});
	$('#door').tooltip({
		track: true,
		bodyHandler: function() { 
    	    return 'Click to enter the factory'; 
	    },	
	    fade: 250	
	});
	
	getXML();

	maxWidth = $(window).width();
	maxHeight = $(window).height();
		
	/* BINDS */
	
	// resize function for stretched
	$(window).resize(function() {
		maxWidth = $(window).width();
		maxHeight = $(window).height();
		$('.expand').animate({width: (maxWidth+30), marginLeft: '0px' }, 50);
	});

	// viewport scroll function	
	$('body').mousemove(function(e) {

		if (e.pageY < 60 && (maxHeight < $('ul#menu').height()) && !scrolling) {
			scrollTo('top');
		}
		
		if (e.pageY > (maxHeight - 60) && (maxHeight < $('ul#menu').height()) && !scrolling) {
			scrollTo('bottom');
		}
	});	
	
	$('#supersize').click(function() {
		closeItem($('.expand'));
	});	
	
}

function getXML() {
	$.ajax({
		type: "GET",
		url: "xml/content.xml",
		dataType: "xml",
		success: function(xml) {
			xmlResult = $(xml);
		}
	});
}

function resetMenu() {
	$('ul#menu').animate({top: '0px'});
}

function submitForm() {
	// 'this' refers to the current submitted form
	var str = $('#contactform').serialize();
	
	$.ajax({
		type: "POST",
		url: "contact.php",
		data: str,
		success: function(msg){
						
				if(msg == 'OK') {
					result = '<div class="notification_ok">Your message has been sent. Thank you!</div>';
				} else {
					result = msg;
				}
				$('#contactform').html(result);
		}
	});		
}

function subscribeMailingList() {

	var str = $('#contactform').serialize();
	
	$.ajax({
		type: "POST",
		url: "mailinglist.php",
		data: str,
		success: function(msg){
						
				if(msg == 'OK') {
					result = '<div class="notification_ok">You have been subscribed to the mailinglist! Thank you!</div>';
				} else {
					result = msg;
				}
				$('#contactform').html(result);
		}
	});		
	
}

function stretchItem(target) {

	if (!target.hasClass('expand')) {
		target.addClass('black');
		
		target.animate({width: (maxWidth+30), marginLeft: '0px' }, 400, function() {
			target.height('100%');
			target.find('.content').show();			
		});	

	} else {
		closeItem(target);
		return false;
	}
	
	// close all other items when opening a new one
	$('.expand').find('.content').remove();	
	$('.expand').animate({width: '186', height: '21', marginLeft: '145px'}, 300, function() {
	});			
	$('.expand').removeClass('black');			
	$('.expand').removeClass('expand');			
		
}

function closeItem(target) {

	target.find('.content').remove();
	target.animate({width: '186', height: '21', marginLeft: '145px'}, 300, function() {
		target.removeClass('black');			
		target.removeClass('expand');	
	});			
	resetMenu();
}

function loadContent(target) {

	var contentRef = target.children([0]).attr('href').substr(1);

	if (!target.hasClass('expand')) {
		xmlResult.find("project[title='" + contentRef + "']").each(function() {
			buildContent($(this), target);
			stretchItem(target);	
		});
	} else {
		stretchItem(target);		
	}		
	target.addClass('expand');	
	
}

function buildContent(contentObj, target) {
	
	var title = contentObj.attr('title');
	var description = contentObj.find('description').text();
	var image = contentObj.find('image').text();

	var htmlInsert = '';

	htmlInsert += '<div class="content">';
	
	if (title == 'gallery') {
		
		htmlInsert += '		<div id="gallery">';

		xmlResult.find("project[title='gallery']").find("image").each(function() {
			htmlInsert += '		<a class="thumbnail" href="' + $(this).text() + '" onclick="return false;"><img src="' + $(this).attr('thumb') + '" /></a>';
		});
		
		htmlInsert += '			';
		htmlInsert += '		</div>';
        					
	} else if (title == 'contact') {
	
		htmlInsert += '		<div class="description left"><p>' + description + '</p></div>';
	
		htmlInsert += '<div id="contact-wrapper">' +
		'	<form method="post" action="javascript:submitForm();" id="contactform">' +
		'		<div>' +
		'		    <label for="name"><strong>Name:</strong></label>' +
		'			<input type="text" size="50" name="contactname" id="contactname" value="" class="required" />' +
		'		</div>' +
		'		<div>' +
		'			<label for="email"><strong>Email:</strong></label>' +
		'			<input type="text" size="50" name="email" id="email" value="" class="required email" />' +
		'		</div>' +
		'		<div>' +
		'			<label for="email"><strong>Subject:</strong></label>' +
		'			<input type="text" size="50" name="subject" id="subject" value="" class="required" />' +
		'		</div>' +
		'		<div>' +
		'			<label for="message"><strong>Message:</strong></label>' +
		'			<textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>' +
		'		</div>' +
		'  	 <input type="submit" value="Send Message" name="submit" class="submit" />' +
		'	</form>' +
		'</div>';
			
	} else if (title == 'mailinglist') {
	
		htmlInsert += '		<div class="description left"><p>' + description + '</p></div>';
	
		htmlInsert += '<div id="contact-wrapper">' +
		'	<form method="post" action="javascript:subscribeMailingList();" id="contactform">' +
		'		<div>' +
		'		    <label for="name"><strong>Name:</strong></label>' +
		'			<input type="text" size="50" name="contactname" id="contactname" value="" class="required" />' +
		'		</div>' +
		'		<div>' +
		'			<label for="email"><strong>Email:</strong></label>' +
		'			<input type="text" size="50" name="email" id="email" value="" class="required email" />' +
		'		</div>' +
		'  	 <input type="submit" value="Subscribe" name="submit" class="submit" />' +
		'	</form>' +
		'</div>';	} else if (title == 'live') {

		htmlInsert += '		<div class="side_image"><img src="' + image + '" /></div>';
		htmlInsert += '		<div class="description right">';
		htmlInsert += '<p><span class="date">Date:</span><span class="time">Time:</span><span class="venue">Location:</span><br /></p>';
		
		xmlResult.find("project[title='live']").find("gig").each(function() {
		
			var date = $(this).find('date').text();
			var time = $(this).find('time').text();
			var venue = $(this).find('venue').text();
			var url = $(this).find('url').text();
			var city = $(this).find('city').text();
			
			htmlInsert += '		<span class="date">' + date + '</span>';
			htmlInsert += '		<span class="time">' + time + '</span>';
			if (url != '') {
				htmlInsert += '<a href="' + url + '" target="_new"><span class="venue">' + venue + '</span></a> ';
			} else {
				htmlInsert += '<span class="venue">' + venue + '</span> ';
			}
			htmlInsert += '<span class="city">&nbsp;- ' + city + '</span><br />';
		});		
		
		htmlInsert += '</div>';
				
	} else {
	
		if (image != '') {
			htmlInsert += '		<div class="side_image"><img src="' + image + '" /></div>';
			htmlInsert += '		<div class="description right"><p>' + description + '</p></div>';
		} else {
			htmlInsert += '		<div class="description"><p">' + description + '</p></div>';
		}
		
	}
	htmlInsert += '</div>';
	target.append(htmlInsert);
	
	target.find('.content').hide();
	
	if (title == 'gallery') {
        $('#gallery a').lightBox({
        overlayBgColor: '#000',
		overlayOpacity: 0.9,
		imageLoading: 'images/lightbox-ico-loading.gif',
		imageBtnClose: 'images/lightbox-btn-close.gif',
		imageBtnPrev: 'images/lightbox-btn-prev.gif',
		imageBtnNext: 'images/lightbox-btn-next.gif',
		containerResizeSpeed: 350,
		txtImage: 'Imagem',
		txtOf: 'de'});
	} else if (title =='live') {
		target.find('content').css("column-count", "2");
	} else if (title == 'contact') {
		$("#contactform").validate();	
	}
	
}

function scrollTo(direction) {

	var offset = maxHeight - $('ul#menu').height();

	if (direction == 'top') {
		scrolling = true;
		$('ul#menu').animate({top: 0}, 300, function() {
			scrolling = false;
		});
		return false;
	}

	if (direction == 'bottom') {
		scrolling = true;
		$('ul#menu').animate({top: offset - 50}, 300, function() {
			scrolling = false;
		});
		return false;
	}
	
	
}

/* FIRE IN THE HOLE! */

$(document).ready(function() {

	init();
	
	$('.menu').Menu();	
	
		
});