// JavaScript Document

function changeLink1(){
$('#link1').attr("style", "background-color:#80787b;");
$("#link2").attr("style", "background-color:#918bc3");
$("#link3").attr("style", "background-color:#918bc3");
}

function changeLink2(){
$('#link1').attr("style", "background-color:#918bc3;");
$("#link2").attr("style", "background-color:#80787b");
$("#link3").attr("style", "background-color:#918bc3");
}

function changeLink3(){
$('#link1').attr("style", "background-color:#918bc3;");
$("#link2").attr("style", "background-color:#918bc3");
$("#link3").attr("style", "background-color:#80787b");

}
	
$(document).ready(function(){

//global variable tohold flag
var on = "picOne";
//disjointed rollover function starting point
$("div#squareButs li").hover(function(){
	
	// test to see if flag set and if is, is it the current image
	
	if ($(this).attr('id') == on){
	
	// do nothing cos already visible
	
	} else {
	
			//make a variable and assign the hovered id to it
			var elid = $(this).attr('id');
			//hide the image currently there
			$("div#images div").hide();
			//fade in the image with the same id as the selected buttom
			$("div#images div#" + elid + "").fadeIn("slow");
					
			//$(this >a).addClass("thisOne");
			
			// set flag to say which image is on
			on = elid ;
	}
	}
	);
});