/* ------------------------------------------------------------------------ */
/* ---------------- Neon Monster Media Browser Javascript ----------------- */
/* ------------------------------------------------------------------------ */

// The global array of media objects
var mediaSet = [];

// Create the HTML for the thumbnails
function CreateThumbs() {
	for (i=0;i<mediaSet.length;i++) {
		$(".media-thumbs").append(
			"<div class='thumb'><a title='View this image' href='javascript:void(0);' "+
			"onclick='SwitchMedia(" + i + ");'>" +
			"<img src='" + mediaSet[i].mediaThumb + "' /></a></div>"
		);
	}
	$(".media-thumbs").append("<div class='float-fix'></div>");

}

// Create the HTML for the main viewport
function CreateMainView() {
	for (i=0;i<mediaSet.length;i++) {
		var newCode = "";
		newCode += "<img class='product-image media" + i + "' src='" + mediaSet[i].mediaUrl + "' style='display:none;' />";
				
		$(".media-view").append(newCode);
	}
}

// The media object constructor.
function MediaObj(mediaUrl, mediaThumb) {
	var msize = mediaSet.length;
	this.mediaUrl = mediaUrl;
	this.mediaThumb = mediaThumb;

	mediaSet[msize] = this; // Stick it in the array
}

// Initialize the default media view
function InitializeStates() {
	$(".media0").css("display","block");
}

// This function handles media view switching
function SwitchMedia(id) {
	var newMediaClass = ".media" + id;
	
	if (!$(newMediaClass).is(":visible")){
		$("div.product-detail img.product-image").fadeOut("fast");
		$(newMediaClass).fadeIn("fast");
	}
}

$(document).ready(function(){
  
	// Create the media elements
  CreateAllMedia();	//Set up the media objects
  CreateThumbs();		//Create HTML for thumbnails
  CreateMainView();	//Create HTML for main viewport
  InitializeStates();	//Initialize the default media view
	
}); // end Document Ready Function