$(document).ready(function() {
	var interval = 5000;
	var active = 'active';
	var marketsMap = $('#marketsMap');
	var marketsImages = $('#marketsImages');
	var marketsText = $('#marketsText');
	var marketsName = $('#marketsName');
	var marketsCaption = $('#marketsCaption');
	var marketsButtons = $('#marketsButtons');
	var children = marketsImages.children();
	var first = children.first();
	var last = children.last();
	var caption = false;
	var name = false;
	var link = false;
	
	/* init the images, and load first one */
	marketsImages.children().addClass('marketImage');
	first.addClass(active).siblings().removeClass(active);
	setMarketText(first);
	
	// initialize the buttons
	$.each(children, function(index, child) {
		marketsButtons.append('<a class="indexButton" href="#">' + (index + 1) + '</a>');
		marketsButtons.children().first().addClass(active);
	});
	
	/* Buttons onclick function */
	$('.indexButton').live('click', function(e) {
		e.preventDefault();
		
		clearTimeout(loopMarketImages); // disable auto-loop

		var index = $(this).index();
		var chosen = $(children.get(index));
		
		$(this).addClass(active).siblings().removeClass(active); // reset buttons
		chosen.addClass(active).siblings().removeClass(active);
		
		setMarketText(chosen);
	});
	
	$('.marketImage').live('hover', function(e) {
		e.preventDefault();
		
		clearTimeout(loopMarketImages); // disable auto-loop
		
		var index = $(this).index();
		var button = $(marketsButtons.children().get(index));
		$(this).addClass(active).siblings().removeClass(active);
		button.addClass(active).siblings().removeClass(active);
		
		setMarketText($(this));
	});
	
	$('.marketImage').live('click', function(e) {
		var group = $(this).attr('data-group');
		
		if($('#' + group).length > 0) {
			e.preventDefault(); // disable normal link behavior
			$('#' + group + ' > li > a').trigger('click');
		} // else, go on to the page its normally linked to
	});
	
	$.fn.loopMarketImages = function() {
		var next = $(marketsButtons.children('.' + active)).next();
		
		if(next.length < 1) next = marketsButtons.children().first();
		
		var index = $(next).index();
		var chosen = $(children.get(index));
		
		$(next).addClass(active).siblings().removeClass(active); // reset buttons
		chosen.addClass(active).siblings().removeClass(active);
		
		setMarketText(chosen);
	}
	
	var loopMarketImages = setInterval('$.fn.loopMarketImages()', interval);
	
	function setMarketText(element) {
		caption = element.data('caption');
		name = element.data('name');
		link = element.attr('href');
		marketsName.html(name);
		marketsCaption.html(caption + '<a class="more" href="' + link + '">More &raquo;</a>');		
	}
});