$(window).load(function() {
	var ids = '';
	var num = 0;
	$("img[rel~='hotspot']").each(function() {
		ids += this.id+"|";
		var img = $("img#"+this.id);
		var img_cont = $("#hp_"+this.id);
		if (!img_cont.length) {
			if (num == 0) {
				img.parent().prepend("<div class='hp_container' id='hp_"+this.id+"'></div>");
			} else {
				img.parent().prepend("<div class='hp_container' id='hp_"+this.id+"' style='display:none;'></div>");
			}
		}
		num++;
	});

	if (ids) {
		$.ajax({
			type: "GET",
			url: "aj_get_hotspot.php",
			dataType: 'json',
			data: 'ids='+ids,
			success: function(res) {
				for (var i in res) {
					$("div#hp_img_"+res[i]['id']).append(res[i]['div']);
				}

				$(".hotspot").hover(
					function() {
						var elm = $(this);
						var title = $(this).find(".hotspot_title");
						var descr = $(this).find(".hotspot_descr");
						title.removeClass("hotspot_title").addClass("hotspot_slide");
						$(this).css("background", "");
						title.animate({
							width: "125px",
						}, 200,
							function () {
								descr.slideDown('fast');
							}
						);			
					}, 
					function() {
						var elm = $(this);	
						var title = $(this).find(".hotspot_slide");
						var descr = $(this).find(".hotspot_descr");
						descr.slideUp('fast', function() {
							title.animate({
								width: "14px",
							}, 200, function() {	
								title.removeClass("hotspot_slide").addClass("hotspot_title").hide();
							});
						});
						title.stop();
					}
				);
			}
		});
	}
});