/*
 I'll be placing several log messages throughout this code so that you can see how things happen by
 looking at the firebug console. If a user does not have firebug installed calling the console.log
 command will cause an error to prevent that from happening we will check to see if console exists,
 if not we will make a fake log function that does nothing.
*/
if(!window.console) {
	window.console = {
		log: function() {
			return false;
		}	
	};
}

console.log("the javascript is being initially evaluated (run) by the browser");




/*
 grouping chunks of code:
 lets creat our "namespace", thats a fancy name for saying the container for our code.
 This is not a requirement of the language just a good thing to do.
*/

var imageLinksLoader = {
	
	/* 
	 init is the first bit of code we will run, it is a function that will make the links
	 (when clicked) run our code and will also prevent their default behavior.
	*/
	
	init: function(imageLinksDivID) {
		
		console.log('imageLinksLoader.init was called with the parameter "' + imageLinksDivID + '" passed in');
		
		// grab the item with the provided id, save it in a temporary variable
		var imageLinksDiv = document.getElementById(imageLinksDivID); 
		
		/*
		 a note about assumptions:
		 our code will assume that there are only links that link to other images inside that div.
		 This is an important assumption and right now its obvious but at some point months later
		 you will be editing your html and forget, so document it. Its very important to document
		 your code. Its best to write code that is insulated from such assumptions but you can 
		 never totally avoid them.
		*/
		
		/*
		 adding the event handler:
		 using a nice trick called event delegation we will attatch an event listener to the
		 div it will listen for click events that happen inside it, the oldschool way to do
		 this would be to attatch an event handler to each link, boo too mucch work.
		*/
		
		// the browser passes an event object as the first parameter we will call it "event"
		imageLinksDiv.onclick = function(event) {
			
			// with event delegation you can get at the thing that was clicked through event.target
			// that is true except for in Internet Explorer so first we jump thourgh a couple hoops
			
			// IE doesn't pass in the event object
			event = event || window.event;
			
			//IE uses srcElement as the target
			var target = event.target || event.srcElement;  
			
			console.log("saw a click on " + target.tagName);
			
			/*
			 if we clicked an image grab the href from its parent link then call our loadLargeImage
			 function passing it the value of the href which should be the lare image url and the id
			 of the div we want to put it in
			*/
			if(target.tagName == "IMG") {
				console.log("imageLinksDiv.onclick fired");
				imageLinksLoader.loadLargeImage(target.parentNode.href, imageLinksDivID);
			}
			
			return false; // this line prevents the browser default click behavior
		};
	},
	
	/*
	 pass in the url of an image and the id of a div and it will get appended to that div
	*/
	loadLargeImage: function(url, id) {
		console.log("load large image from " + url + " into the div " + id);
		
		// if we already have an image loaded that is the image to use if not create a new image object
		var myImg = document.getElementById("largeImage"); // returns false if we have not loaded a large image yet
		
		if(!myImg) {
			// looks like no large image added yet creat it and add it to the DOM
			console.log("creating new image object");
			myImg = document.createElement("img");
			myImg.id = "largeImage";
			
			// set the src of the image object... it will begin loading immediately
			myImg.src = url;
			
			// and append it to the div
			document.getElementById(id).appendChild(myImg);
		} else {
			console.log("loading a different large image");
			// looks like image was already created so just update its src
			myImg.src = url;
		}
	}
};

// little will happen until we call our init function and tell it what div to work with by passing in the id
console.log("calling the imageLinksLoader.init function to kick everything off");
imageLinksLoader.init("imageLinks");