jQuery(function($){
	var gallery = $('div#gallery');
	var primary = gallery.find('img').eq(0);
	var icons = gallery.find('div.g_articles');
	var title = gallery.find('[purpose="title"]');
	var caption = gallery.find('[purpose="caption"]');
	var text = gallery.find('[purpose="text"]');
	var more = gallery.find('[purpose="more"]');
	var loaded = 0;
	var timeout;
	var preload = function(src, onload, data){
		var temp = new Image();
		temp.data = data;
		temp.onload = onload;
		temp.src = src;
		return temp;
	};
	var onTimeout = function(index){
		window.clearTimeout(timeout);
		if(index > 4) index = 0;
		
		icons
			.find('a')
			.removeClass('selected')
			.eq(index)
			.addClass('selected');
		
		primary.fadeTo('slow', .1, function(){
			jQuery(this).attr('src', images[index].img.src).fadeTo('slow', 1, function(){
				timeout = window.setTimeout(function(){onTimeout(index + 1);}, 7000);
			});
		});
		
		title.html(images[index].title);
		caption.html(images[index].caption);
		text.html(images[index].text);
		more.attr('href', images[index].more);
		primary.parent().attr('href', images[index].more);
	};
	var onImageLoad = function(){
		var data = this.data;
		var temp = $('[purpose="icon"]')
			.eq(data.index)
			.bind('click', onIconClick)
			.hover(function(){$(this).stop(); $(this).fadeTo('slow', 1);}, function(){$(this).stop(); $(this).fadeTo('slow', .7);})
			.fadeTo('slow', .7);
		++loaded;
		if(loaded == 5)
		{
			icons = $('[purpose="icon"]');
			onTimeout(0);
		}
	};
	var onIconClick = function(){
		onTimeout(parseInt($(this).attr('value')));
		return false;
	};
	$.each(images, function(index, value){
		$('<span purpose="icon" value="' + index + '"><img src="' + value.icon + '" /><a></a></span>')
			.appendTo(icons)
			.fadeTo('fast', .1);
		value.index = index;
		value.img = preload(value.main, onImageLoad, value);
	});
});