$(function(){

	$('#flashwall').css({'text-align':'center'});
	addCans();
	animateCans();
	clickCans();
	
	
	
});

function addCans() {

	$('fieldset.colourselect')
		.removeClass('colourselect')
		.addClass('colourselector')
		.empty()
		.append('<h2>Colour:</h2><ul><li class="red"><a class="selected" href=""><img src="images/links/can_red.png" /></a><img src="images/links/can_shadow.jpg" class="shadow"></li><li class="blue"><a href=""><img src="images/links/can_blue.png" /></a><img src="images/links/can_shadow.jpg" class="shadow"></li><li class="yellow"><a href=""><img src="images/links/can_yellow.png" /></a><img src="images/links/can_shadow.jpg" class="shadow"></li><li class="purple"><a href=""><img src="images/links/can_purple.png" /></a><img src="images/links/can_shadow.jpg" class="shadow"></li><li class="black"><a href=""><img src="images/links/can_black.png" /></a><img src="images/links/can_shadow.jpg" class="shadow"></li></ul><input type="hidden" name="colour" value="red" />');
	$('.wallpost .namefield input, .wallpost .locationfield input, .wallpost .messagefield textarea').addClass('red');
	$('.colourselector ul li a.selected').siblings('img.shadow').css({'opacity':'0.4'});

}

function animateCans() {
	
	$('.colourselector ul li a').hover(
		function(){
			if(!$(this).hasClass('selected')) {
				$(this).children('img').stop().css({'top':0});
				$(this).siblings('img.shadow').stop().css({'opacity':0.4});
			}
		},
		function(){
			if(!$(this).hasClass('selected')) {
				$(this).children('img').stop().animate({'top':'10px'}, 400, 'swing');	
				$(this).siblings('img.shadow').animate({'opacity':1}, 400, 'swing');
			}
		});
}

function clickCans() {

	$('.colourselector ul li a').click(function(){
	
		$('.colourselector ul li a').removeClass('selected').children('img').css({'top':'10px'});
		$('.colourselector ul li a').siblings('img.shadow').css({'opacity':1});

		$(this).addClass('selected').children('img').css({'top':0});
		$(this).siblings('img.shadow').css({'opacity':0.4});
		
		var val = $(this).parents('li').attr('class');
	
		$('.wallpost .namefield input, .wallpost .locationfield input, .wallpost .messagefield textarea').removeClass().addClass(val);
		$('input[name="colour"]').val(val);
	
		return false;
	
	});

}