$(function(){
	defaultText = $("#main").html();
	headerText = "<h3>Your new home</h3>";
	$("#main").html("");
	$("#side").html("");
	
	secondText = '<p>You will get to enjoy the following services:</p><ul style="padding-left:24px; list-style:disc"><li>Air-Conditioned Rooms, fully furnished with Beds, Study Table and Wardrobe</li><li>Provision of bed linen set (bed sheets and blankets will be changed and laundered fortnightly)</li><li>Tight security surveillance with 24-hour security guards, CCTV, Door Access Security System</li><li>Free Wireless Internet access (24 Hours)</li><li>Free Laundry Service (three times weekly)</li><li>Free Weekly Room Cleaning</li><li>Lovely boarding mistress guidance</li><li>Toilets and Bathrooms on each level</li><li>Printing and photocopying services</li><li>Extra curricula activities such as Excursions / In-house Activities, Movie Nights, BBQ, etc</li></ul><p>Click here for reservation > PDF Form ready (<a href="Assets/94 Student Hostels Reservation Form - Chinese 01 July 10.pdf">Chinese</a> & <a href="Assets/94 Student Hostels Reservation Form - English 01 July 10.pdf">English</a>)</p>';
		  
	// number of SlidingSquares
	count = 5;
	order = 0;


	$("<div>")
	.attr("id", "accs")
	.css("height", "400px")
	.appendTo("#side");
	
	$("<div>")
	.attr("id", "accDesc")
	.appendTo("#main")
	.css("margin-top", "30px")
	.html(defaultText);

	new SlidingSquare(
		0, 0,
		0, 0,
		90, 360,
		400, 400,
		0, 0,
		"Single", "acco01.jpg",
		"Single", 1
	);
	new SlidingSquare(
		0, 0,
		90, 0,
		90, 360,
		400, 400,
		0, 0,
		"Double", "acco02.jpg",
		"Double", 2
	);
	new SlidingSquare(
		0, 0,
		180, 0,
		90, 360,
		400, 400,
		0, 0,
		"Triple", "acco03.jpg",
		"Triple", 3
	);
	new SlidingSquare(
		0, 0,
		270, 0,
		90, 360,
		400, 400,
		0, 0,
		"Quad", "acco04.jpg",
		"Quad", 4
	);

/*
	$("#main")	
	.append('<div class="accFrameC accFrameC1">&nbsp;</div>')
	.append('<div class="accFrameC accFrameC2">&nbsp;</div>')
	.append('<div class="accFrameC accFrameC3">&nbsp;</div>')
	.append('<div class="accFrameC accFrameC4">&nbsp;</div>');
*/

	var accFrameC = $('<div>')
	.addClass("accFrameC")
	.css("width", "15px")
	.css("height", "12px")
	.css("position", "absolute")
	.css("font-size", "1px")
	.css("zIndex", 10000);
	
	var accFrameC1 = accFrameC.clone()
	.css("background", "url(Assets/Images/roundCorner1.gif)")
	.css("top", "0")
	.css("left", "0")	
	.appendTo("#accs");

	var accFrameC2 = accFrameC.clone()
	.css("background", "url(Assets/Images/roundCorner2.gif)")
	.css("top", "0")
	.css("right", "0")	
	.appendTo("#accs");

	var accFrameC3 = accFrameC.clone()
	.css("background", "url(Assets/Images/roundCorner3.gif)")
	.css("bottom", "0")
	.css("left", "0")	
	.appendTo("#accs");

	var accFrameC4 = accFrameC.clone()
	.css("background", "url(Assets/Images/roundCorner4.gif)")
	.css("bottom", "0")
	.css("right", "0")	
	.appendTo("#accs");
/*
	var reserveDiv = $("<a href=\"Assets/reservations.pdf\">")
	.text("- click here for reservations -")
	.css("position", "absolute")
	.css("color", "#fff")
	.css("top", "55%")
	.css("left", "0")
	.css("width", "100%")
	.css("text-decoration", "none")
	.css("font-weight", "bold")
	.css("text-align", "center")
	.css("zIndex", "50000000")
	.appendTo("#accs");
*/
	function SlidingSquare(
		topA, topZ,
		leftA, leftZ,
		widthA, widthZ,
		heightA, heightZ,
		oX, oY, name, img, text, id
	){
		var title = "accTitle" + id;
		var frame = "accFrame" + id;
		var photo = "accPhoto" + id;
		var desc = "accDesc" + id;
		var imgDir = "Assets/Images/";
		var img = imgDir + "" + img;
		var nameid = "accName" + id;		
		
		order++;
		
		$("<div>")
		.attr("id", frame)
		.appendTo("#accs")
		.attr("zoom", 0)
		.attr("text", text)
		.css("position", "absolute")
		.css("top", topA + "px")
		.css("left", leftA + "px")
		.css("width", widthA + "px")
		.css("height", heightA + "px")
		.css("background", "url(" + img + ") no-repeat 0 0")
		.css({backgroundPosition: "-" + oX + "px -" + oY + "px"})	
		.css("zIndex", 10 + order)
		.css("cursor", "pointer")
		.mouseenter(function(){
			var id = ($(this).attr("id").slice(-1));
			$("#accTitle"+id).css("background", "#ffc100");
			$("#accName"+id).css("text-decoration", "underline");
		})
		.mouseout(function(){
			var id = ($(this).attr("id").slice(-1));		
			$("#accTitle"+id).css("background", "#ff9c04");
			$("#accName"+id).css("text-decoration", "none");
		})	
		.mousedown(function(){
			for(var i = 1; i <= count; i++){
				var id = "accFrame" + i;
				if($("#"+id).attr("zoom") == 0)
					$("#"+id).css("zIndex", 0)
			}
			
			var id = ($(this).attr("id").slice(-1));
			
			if($(this).attr("zoom") == 0){
				$('#accDesc').html("<h3>" + $(this).attr("text") + " room</h3>" + secondText)
				
				$(this)
				.attr("zoom", 1)
				.css("zIndex", 100)
				.fadeOut(250, function(){
					$(this)
					.animate({ backgroundPosition: "(0 0)"}, { queue:false, duration:0 })
					.animate({ top: topZ }, { queue:false, duration:0 })
					.animate({ left: leftZ }, { queue:false, duration:0 })
					.animate({ width: widthZ }, { queue:false, duration:0 })
					.animate({ height: heightZ }, { queue:false,duration:0 })
					var id = ($(this).attr("id").slice(-1));		
					$("#accName"+id).hide();
//					reserveDiv.hide();
				} )
				.fadeIn(250);
			} else {
				$('#accDesc').html(defaultText)
				
				$(this)
				.attr("zoom", 0)
				.fadeOut(250, function(){
					$(this)
					.animate({ backgroundPosition: "(-"+ oX + "px -" + oY + "px"}, { queue:false,duration:0 })
					.animate({ width: widthA }, { queue:false,duration:0 })
					.animate({ height: heightA }, { queue:false, duration:0 })	
					.animate({ top: topA }, { queue:false, duration:0 })
					.animate({ left: leftA }, { queue:false, duration:0 })
					var id = ($(this).attr("id").slice(-1));		
					$("#accName"+id).show();
//					reserveDiv.show();
				} )
				.fadeIn(250);			
			}
		})

		$('#'+title).prependTo("#"+frame)
		.css("position", "absolute")
		.css("background", "#ff9c04")
		.css("top", 0)
		.css("left", 0)
		.css("width", "100%")
		.css("color", "#fff")
		.css("margin", 0)
		.css("padding", "6px")

		$('#'+photo).hide();
		
		$("<div>")
		.attr("id", nameid)
		.text(name)
		.appendTo("#" + frame)
		.css("text-align", "center")
		.css("color", "white")
		.css("font-weight", "bold")
		.css("margin-top", "175px");				
	};	
});