$(document).ready(function(){

	$("div").click(function(){

//		$("p").html(function () {$(this).attr("state")});

		if($(this).attr("state") == "open") {

			$(this).attr("state", "closed");
			var leftPos = $(this).attr("leftPos");
			var topPos = $(this).attr("topPos");

			$(this)
			.animate({left: "100px", top: topPos, height: "78", width: "100"}, "slow")
			.animate({left: "0"}, "slow")
//			.animate({left: leftPos, top: topPos, height: "80", width: "100"}, "slow")
	
			$(this).children()
			.animate({left: "100px", top: topPos, height: "78", width: "100"}, "slow")
			.animate({left: "0"}, "slow")

		} else {

			$(this).attr("state", "open");
	                var leftPos = parseInt($(this).css('left'));
        	        var topPos = parseInt($(this).css('top'));
			$(this).attr("topPos", topPos);
			$(this).attr("leftPos", leftPos);

			$(this)
			.animate({left: "100"}, "slow")
			.animate({top: "10px", left: "120px", height: "600", width: "800"}, "slow")
	
			$(this).children()
			.animate({left: "100"}, "slow")
			.animate({top: "10px", left: "120px", height: "600", width: "800"}, "slow")

		}
		return false;
	});

	$(".image").hover( function() {
		var hoverText = $(this).attr("info");
		$("p").html(hoverText);
	});

	$("p").html("<h1> ~~~~ Welcome ~~~~ </h1><p>Hi, on this page I shall put a small number of my photographs. The intention is just to give a taster of the things I find interesting. As something new arrives it will normally push an older picture off, but not always.</p><p>I love photography, especially the outdoors it gives me and the dog a good excuse to get out and about even when the weather is not at its best.</p><p>When you pass the mouse over the thumbnail a paragraph or two will pop up describing the picture. To see a larger copy of the picture just click on it, when you are done just click the picture again.</p>");

});