//:: Mark Wise : onload_image_gallery.js : v1.0.0 : 5/15/09 9:40 AM : 5/15/09 9:40 AM

function onloadFieldNotes(){
	var imageSet = 1;
	var imageSets = Math.ceil(notesFromTheField.arr.length / 12);
	var imageMaskWidth = $("thumbnails_image_mask").getStyle("width").toInt();
	var imageWidth = 64;
	var imageMargin = 26;
	//var notesFromTheField.imagePath = "/assets/images/layout/field_notes/full_size_images/";
	var imageExtension = ".jpg";
	var ele = $$("#thumbnails_image_mask > div")[0];
	var fx;
	var eventLock = false;
	var selectedThumbnail;
	
	
	//INITIALIZE
	ele.setStyle("left", 0);
	$("image_new").set("src", notesFromTheField.imagePath + notesFromTheField.arr[0].image + imageExtension);
	$$("#image_content p")[0].set("text", notesFromTheField.arr[0].caption);
	$("image_set").set("text", imageSet);
	$("image_sets").set("text", imageSets);
	$("image_index").set("text", 1);
	$("total_images").set("text", notesFromTheField.arr.length);
	
		
	//CREATE THUMBNAIL IMAGES
	//LOOP THROUGH THE CORRECT NUMBER OF VIRTUAL COLUMNS
	for(var i=0, l1=imageSets; i<l1; i++){
		var operandA = 12 * i;
		var operandB = (12 * (i + 1)) - (12 * (i + 1)) % notesFromTheField.arr.length || (12 * (i + 1));
		
		
		//CREATE THE CORRECT NUMBER OF THUMBNAIL PHOTOS FOR EACH COLUMN
		for(var j=operandA; j<operandB; j++){
		
			//CALCULATE THE VIRTUAL COLUMN POSITION
			var imageLeftPosition = (imageWidth + imageMargin) * (j % 6) + ((imageWidth + imageMargin) * 6 * i);
						
			
			//CREATE ANCHOR ELEMENT
			var a = new Element("a", {
				"href":	"javascript:void(0)",
				"styles": {left: imageLeftPosition + "px"},
				"events": {
					"click": function(){
						if(!eventLock){
							
							//SET THE LOCK SO ANOTHER THUMBNAIL IMAGE CANNOT BE CLICKED UNTIL THE FADE TRANSITION HAS COMPLETED
							eventLock = true;
							
							//SET THE OLD IMAGE (the bottom image) EQUAL TO THE NEW IMAGE SO THE NEW IMAGE FADES INTO THE OLD IMAGE
							$("image_old").set("src", $$("#image_new")[0].get("src"));
							
							
							//SET THE NEW IMAGES "opacity" TO "0" AND SET THE "src" TO THE NEW IMAGE
							$("image_new").setStyle("opacity", 0).set("src", notesFromTheField.imagePath + notesFromTheField.arr[this.retrieve("index")].image + imageExtension);
							//$("image_new").set("src", notesFromTheField.imagePath + notesFromTheField.arr[this.retrieve("index")].image + imageExtension);
							
							
							//FADE TRANSITION FOR THE NEW IMAGE
							var fx = new Fx.Morph($("image_new"), {
								transition: Fx.Transitions.Quint.easeOut,
								onComplete: function(){
								
									//RELEASE THE LOCK SO ANOTHER THUMBNAIL CAN BE CLICKED
									eventLock = false;
																		
								}
																							
							});
							fx.start({"opacity": 1});
							
							
							//SET THE IMAGE CAPTION
							$$("#image_content p")[0].set("text", notesFromTheField.arr[this.retrieve("index")].caption);
							
							
							//SET THE SELECTED IMAGE INDEX
							$("image_index").set("text", this.retrieve("index") + 1);
							
						
							//RESET THE PREVIOUS SELECTED THUMBNAIL "selected" PROPERTY TO "false" AND SET THE SPAN ELEMENTS "background-color" TO "#000"
							selectedThumbnail.store("selected", false).getElement("span").setStyle("background-color", "#000");
							
							
							//SET THE CURRENTLY CLICKED THUMBNAIL IMAGES "selected" PROPERTY TO "true" AND SET THE CHILD SPAN ELEMENTS "background-color" TO "#f00"
							this.store("selected", true).getElement("span").setStyle("background-color", "#f00");
							
							
							//STORE THIS ELEMENT IN THE "selectedThumbnail" VARIABLE
							selectedThumbnail = this;
							
						}
																			
					},
					"mouseover": function(){
						this.retrieve("fx").start("background-color", "#f00");
																											
					},
					"mouseout": function(){
					
						//PREVENT THE MOUSEOUT TRANSITION TO EXECUTE IF THE THUMBNAIL IMAGES "selected" PROPERTY IS "true"
						if(!this.retrieve("selected")){
							this.retrieve("fx").start("background-color", "#000");
							
						}
					
					}
										
				}
								
			});
			a.store("index", j);
								
			
			//CREATE IMAGE ELEMENT AND INJECT INTO ANCHOR ELEMENT
			var img = new Element("img", {
				"src": notesFromTheField.imagePath + notesFromTheField.arr[j].image + imageExtension,
				"width": 64,
				"height": 43
								
			}).inject(a);
						
			
			//CREATE SPAN ELEMENT(used for thumbnail numbers) AND INJECT INTO ANCHOR ELEMENT
			var span = new Element("span", {html: j + 1}).inject(a);
			
			
			//CREATE A PROPERTY(fx) ON THE ANCHOR ELEMENT TO STORE THE INSTANCE OF THE TWEEN OBJECT 
			a.store("fx", new Fx.Tween(a.getElement("span"), {link: "cancel", transition: Fx.Transitions.Quint.easeOut}));
			
			
			//INITIALIZE THE DEFAULT SELECTED THUMBNAIL IMAGE
			if(j == 0){
				selectedThumbnail = a;
				selectedThumbnail.store("selected", true).getElement("span").setStyle("background-color", "#f00");
							
			}
								
			
			//INJECT ANCHOR ELEMENTS INTO THE CORRECT ROW
			if(j % 12 < 6){
				a.inject($$("#thumbnails_image_mask > div :first-child")[0]);
								
			}else{
				a.inject($$("#thumbnails_image_mask > div :first-child + div")[0]);
				
			}
												
		}
				
	}
	
	
	//NEXT, PREVIOUS BUTTON EVENTS
	fx = new Fx.Tween(ele, {
		duration: "short",
		transition: Fx.Transitions.Quint.easeOut,
		onComplete: function(){
			eventLock = false;
												
		}
								
	});
	$("next_image_set").addEvent("click", function(){
		if(imageSet < imageSets){
		
			//EVENT LOCK HERE PREVENTS DOUBLE CLICKING
			if(!eventLock){
				eventLock = true;
				imageSet += 1;
				$("image_set").set("text", imageSet);
				fx.start("left", ele.getStyle("left").toInt() - (imageMaskWidth + imageMargin));
																	
			}
		
		}
				
	});
	$("previous_image_set").addEvent("click", function(){
		if(imageSet > 1){
		
			//EVENT LOCK HERE PREVENTS DOUBLE CLICKING
			if(!eventLock){
				eventLock = true;
				imageSet -= 1;
				$("image_set").set("text", imageSet);
				fx.start("left", ele.getStyle("left").toInt() + (imageMaskWidth + imageMargin));
												
			}
			
		}
					
	});

}