$(document).ready(function(){
	var counter = 0;
	var index = 0;
	var pointer = 0;
	var newPointer = 0;
	var check = new Boolean(false);
	var imageArray = new Array();
	var imageComments = new Array();
	var imageName = new Array();
	var imageID = new Array();
	var value; 
		$.getJSON("http://www.mushapartment.com/image_target.php", function(data){
			$.each(data.images, function(index, images){
				imageID[index] = images.ID;
				imageArray[index] = images.IMAGE;
				imageComments[index] = images.COMMENTS;
				imageName[index] = images.NAME;
				$("#content").append("<div class = 'comic_name'><div id ="+index+">"+imageName[index]+"</div></div>");
				$("#content").hover(function(){
					$(this).css({"cursor" : "crosshair"});
				});
				$("#"+index).click(function(){ 
					pointer = index;
					$("#image").attr({src: imageArray[pointer]});
					$("#"+pointer).css({"font-weight" : "bold" , "color" : "blue"});
					$(":not(#"+pointer+")").css({"font-weight" : "normal" , "color" : "black"});					
					commentCounter = pointer + 1;
					$("#comments").html("View Comments <a href ='http://www.mushapartment.com/display.php?id="+commentCounter+"'>"+imageComments[pointer]+"</a>");
				});
			});
			$("#image").attr({src: imageArray[0]});
			$("#comments").html("View Comments <a href ='http://www.mushapartment.com/display.php?id=1'>"+imageComments[0]+"</a>");
			$("#0").css({"font-weight" : "bold" , "color" : "blue"}); 
				$("#forward").click(function(){ 
					pointer = pointer + 1;
					if (pointer > imageArray.length - 1)
					{
						window.alert("you have reached the end of the archive");		
						pointer = imageArray.length - 1;
					} 
					newPointer = pointer - 1;
					$("#image").attr({src: imageArray[pointer]});
					$("#"+pointer).css({"font-weight" : "bold" , "color" : "blue"});
					$(":not(#"+pointer+")").css({"font-weight" : "normal" , "color" : "black"});
					commentCounter = pointer + 1;
					$("#comments").html("View Comments <a href='http://www.mushapartment.com/display.php?id="+commentCounter+"'>"+imageComments[pointer]+"</a>");
				});
				$("#backward").click(function(){
					pointer = pointer - 1;
					if (pointer < 0)
					{
						window.alert("you have reached the first comic");
						pointer = 0;
					} 		
					$("#image").attr({src: imageArray[pointer]});
					$("#"+pointer).css({"font-weight" : "bold" , "color" : "blue"});
					$(":not(#"+pointer+")").css({"font-weight" : "normal" , "color" : "black"});
					commentCounter = pointer + 1;
					$("#comments").html("View Comments <a href='http://www.mushapartment.com/display.php?id="+commentCounter+"'>"+imageComments[pointer]+"</a>");
				});
		});	
	});