/*****************************************************************
*
* DAT2 Javascript
*
*  Author: Leo Pitt
* 
*
******************************************************************/

/**********************************************************
*
* Some general vars
*
************************************************************/

$.selectedJewelType = '';
$.selectedJewelSubmenuItem = new Object ({
	'jewel1': false,
	'jewel2': false,
	'jewel3': false
});

/***********************************************************
*
* Functions for inserting Flash objects into the page.
* Uses SWFObject
*
***********************************************************/

/*
* Insert the viewport
*/
function setupViewport () {
	//define params
	var swfUrl = 'swf/viewport.swf';
	var targetId = "viewport";
	var width = '782';
	var height = '304';
	var version = '8.0.0.0';
	var expressInstallURL = null;
	var flashVars = null;
	var params = {"wmode": "opaque"};
	//embed the swfobject
	swfobject.embedSWF(swfUrl, targetId, width, height, version, expressInstallURL, flashVars, params);
}

/*
* Insert the scroller
*/
function setupScroller () {
	//define params
	var swfUrl = 'swf/scroller.swf';
	var targetId = "scroller";
	var width = '782';
	var height = '110';
	var version = '8.0.0.0';
	var expressInstallURL = null;
	var flashVars = null;
	var params = {"wmode": "transparent"};
	//embed the swfobject
	swfobject.embedSWF(swfUrl, targetId, width, height, version, expressInstallURL, flashVars, params);
}

/*
* Insert a jewel icon
* iconNumber Integer The number of the jewelIcon (1, 2 or 3)
*/
function setupJewelIcon (iconNumber) {
	//define params
	var swfUrl = 'swf/jewel_icon.swf';
	var targetId = "jewel_icon_"+iconNumber;
	var width = '29';
	var height = '29';
	var version = '8.0.0.0';
	var expressInstallURL = null;
	var flashVars = null;
	//var params = {"wmode": "transparent"};
	//embed the swfobject
	swfobject.embedSWF(swfUrl, targetId, width, height, version, expressInstallURL, flashVars);
}






/***********************************************************
*
* Tiara configuration object
*
* Populated by the viewport when it completes loading. Stores
* the designId, basedID, etc of the currently displayed tiara.
* Contains methods to make altering and generating the
* tiara DaT code more convenient. E.g.
*
* $.tiaraConfiguration.jewl1Id = 'A'; // To set new jewel1
* datCode = $.tiaraConfiguration.getDatCode(); // To get the new DaT code
* changeTiara(datCode); // To send the new DaT code to the viewport
*
***********************************************************/

/* Register the object and it's default vars */
$.tiaraConfiguration = new Object ({
	designId: '',
	baseId: '',
	materialId: '',
	jewel1Id: '',
	jewel2Id: '',
	jewel3Id: ''
});

$.tiaraConfiguration.getDatCode = function () {
	return this.designId+this.baseId+this.materialId+this.jewel1Id+this.jewel2Id+this.jewel3Id;
}






/***********************************************************
*
* Functions for passing data into flash
*
***********************************************************/

/*
* Get a reference to a flash object - recomended for use by Adobe for
* cross-browser compatibility
*/
function thisMovie(movieName) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[movieName]
    }
    else {
        return document[movieName]
    }
}

/*
* Tell flash to highlight all jewels of type jewelType (1, 2 or 3)
* Called when the mouse is rolled over a jewel icon
*/
function jewelIconOver (jewelType) {
	thisMovie("viewport").highlightJewels(jewelType);
}

/*
* Tell flash to unhighlight all jewels
* Called when the mouse is rolled off a jewel icon
*/
function jewelIconOut () {
	thisMovie("viewport").unhighlightJewels();
}

/*
* Update the scroller so that it becomes a scoller of "jewel"+jewelType
* Called when a jewel icon is clicked on
*/
function jewelIconSelect (jewelCode, jewelType) {
	$.selectedJewelType = jewelType;
	// Show the submenu
	openJewelSubmenu(jewelType, jewelCode);
	$(".jewel_control").removeClass("td_selected");
	$("#jewel_control_"+jewelType).addClass("td_selected");
	// Remove selected class from all tabs
	$(".quad_control").removeClass('selected');
	$("#jewels_control").addClass('selected');
}

/*
* Change the scroller
*
* @type String Which type of content the scroller needs to display. E.g. "design", "base", "metal", "jewel1"
* @bWide Boolean Whether the wide scroller should be used
*/
function updateScroller(type,xmlFilePath,bWide) {
	var scrollerWidth = bWide?782:586;
	var scrollerType = type;
	// Get the scroller xml definition, with a random parameter to ensure we
	// get a new version and not a cached copy
	var selectedItemCode = $.tiaraConfiguration[type+"Id"];
	thisMovie("scroller").setup(scrollerWidth, scrollerType, xmlFilePath+"&n="+Math.round(Math.random()*1000000), selectedItemCode);
}

/*
* Send a new DaT code to the viewport - e.g. "JX2AFAHAN"
*/
function changeTiara (datCode) {
	thisMovie("viewport").changeTiara(datCode);
	updateJewelIcons();
	updateTabImages();
}

/*
* Called when the viewport completes it's initial load
*/
function viewportLoaded (configuration) {

	// Set tiaraConfiguration properties
	$.tiaraConfiguration.designId = configuration.designId;
	$.tiaraConfiguration.baseId = configuration.baseId;
	$.tiaraConfiguration.materialId = configuration.materialId;
	$.tiaraConfiguration.jewel1Id = configuration.jewel1Id;
	$.tiaraConfiguration.jewel2Id = configuration.jewel2Id;
	$.tiaraConfiguration.jewel3Id = configuration.jewel3Id;
	
	// Initialise the default jewel1Icon
	updateJewelIcons();
	
	// Initialise tab graphics
	updateTabImages();
	
	// Open design tab by default
	tabSelect($("#tiara_control"));
	
}

function updateTabImages () {
	// Tiara
	var tiaraTabImage = "<img src=\"flashcom/images/design/thumbnail_"+$.tiaraConfiguration.designId+".jpg\">";
	if ($("#tiara_control .tab_image").html() != tiaraTabImage) {
		$("#tiara_control .tab_image").html("<img src=\"flashcom/images/design/thumbnail_"+$.tiaraConfiguration.designId+".jpg\">");
	}
	// Metal
	var materialTabImage = "<img src=\"flashcom/images/material/thumbnail_"+$.tiaraConfiguration.materialId+".jpg\">";
	if ($("#metal_control .tab_image").html() != materialTabImage) {
		$("#metal_control .tab_image").html("<img src=\"flashcom/images/material/thumbnail_"+$.tiaraConfiguration.materialId+".jpg\">");
	}
	// Band
	var baseTabImage = "<img src=\"flashcom/images/base/thumbnail_"+$.tiaraConfiguration.baseId+".jpg\">";
	if ($("#band_control .tab_image").html() != materialTabImage) {
		$("#band_control .tab_image").html("<img src=\"flashcom/images/base/thumbnail_"+$.tiaraConfiguration.baseId+".jpg\">");
	}
}

function updateJewelIcons () {
	// Setup jewel icon swf's - pass them their jewel type and the current jewel code
	thisMovie("jewel_icon_1").setup($.tiaraConfiguration.jewel1Id,1);	
	thisMovie("jewel_icon_2").setup($.tiaraConfiguration.jewel2Id,2);
	thisMovie("jewel_icon_3").setup($.tiaraConfiguration.jewel3Id,3);
	// Setup jewel icon div's - pass them their jewel type and the current jewel code
	$("#jewel_control_1").attr('rel',$.tiaraConfiguration.jewel1Id);
	$("#jewel_control_2").attr('rel',$.tiaraConfiguration.jewel2Id);
	$("#jewel_control_3").attr('rel',$.tiaraConfiguration.jewel3Id);
}





/***********************************************************
*
* Functions for reacting to user actions: Adding behaviours to the page
*
***********************************************************/

/*
* Called when mouse rolls over a scroller item
*/
function scrollerOver (scrollerType, itemCode) {
	if (scrollerType=='design') {
		$("#model_image").html('');
		$("#model_image").addClass('show');
	}
	else {
		$("#model_image").removeClass('show');
	}
}

/*
* Called when mouse rolls off a scroller item
*/
function scrollerOut (scrollerType, itemCode) {
	$("#model_image").removeClass('show');
}

/*
* Called when mouse button is clicked and released over a scroller item.
* Update the viewport with a new tiara configuration
*
* @scrollerType String  The type of scroller that the function was called from .e.g. "design", "jewel1", etc
* @itemCode     String  The code of the item that was selected .e.g "AX", "A"
* @itemName     String  The name of the item as contained in placements.xml or materials.xml. If the scroller is 
*                       a jewel scroller, this parameter is not provided
*/
function scrollerSelect (scrollerType, itemCode, itemName) {
	$("#model_image").removeClass('show');
	$.tiaraConfiguration[scrollerType+"Id"] = itemCode;
	changeTiara($.tiaraConfiguration.getDatCode());
}

/*
* Make sure the scroller has stopped scrolling
*/
function stopScroll () {
	if (window.thisMovie("scroller").stopScroll())
		thisMovie("scroller").stopScroll();
}

/*
* Do stuff when a tab is selected
*
*/
function tabSelect (tab) {
	// Remove selected class from all tabs
	$(".quad_control").removeClass('selected');
	// Add selected class to this tab
	tab.addClass('selected');
	// Hide jewels help
	$("#jewels_help").hide();
	// Hide jewel colour submenus
	$(".jewel_submenu").hide();
	// Update the scroller
	switch (tab.attr("id")) {
		case "tiara_control":
			updateScroller('design',"flashcom/php/Scroller.php?type=design",true);
			break;
		case "metal_control":
			updateScroller('material',"flashcom/php/Scroller.php?type=material",true);
			break;
		case "band_control":
			updateScroller('base',"flashcom/php/Scroller.php?type=base",true);
			break;
		case "jewels_control":
			break;
	}
}

/*
* Function to handle opening a jewel tab
*/
function openJewelsTab () {
	// If a jewel submenu has been selected
	if ($.selectedJewelType != '') {
		// Hide jewels help
		$("#jewels_help").hide();
		// Open the submenu
		openJewelSubmenu ($.selectedJewelType);
	} else {
		// Otherwise open the jewel help panel
		$("#jewels_help").show();
		// Hide the scroller
		thisMovie("scroller").hideContents();
	}
}

/*
* Open a jewel submenu
*/
function openJewelSubmenu (jewelType) {	
	var selectedItem = '';
	// Hide help
	$("#jewels_help").hide();
	// Hide all submenus first
	$(".jewel_submenu").hide();
	// Show the selected submenu
	$("#jewel_"+jewelType+"_submenu").show();
	// See if a submenu item is previously selected	
	if ($.selectedJewelSubmenuItem["jewel"+jewelType] == false) {
		selectedItem = $.jewelSubmenuDefaults[$.tiaraConfiguration["jewel"+jewelType+"Id"]];
	} else {
		selectedItem = $.selectedJewelSubmenuItem["jewel"+jewelCode];
	}
	// Select the item
	selectJewelSubmenuItem($("#jewel_"+jewelType+"_submenu li a."+selectedItem),jewelType);
	//alert($.tiaraConfiguration["jewel"+jewelType+"Id"]);
}

/*
* When a submenu is clicked on
*/
function selectJewelSubmenuItem(item,jewelType) {
	var selectedItem = new String(item.attr("class"));
	// Highlight the item
	$("#jewel_"+jewelType+"_submenu li").removeClass("selected");
	item.parent().addClass("selected");
	// Load that menu into the scroller
	updateScroller ("jewel"+jewelType,"flashcom/php/Scroller.php?type="+selectedItem,false);
}





/*
* Tell the viewport to go to "blur" mode
* Called when the mouse rolls off the viewport
*/
function viewportBlur () {
	//alert("viewportBlur");
	if (window.thisMovie("viewport"))
		thisMovie("viewport").viewportBlur();
}


function viewportFocus () {
	//alert("viewportFocus");
	if (window.thisMovie("viewport").viewportFocus())
		thisMovie("viewport").viewportFocus();
}


/***********************************************************
*
* Initialisation
*
***********************************************************/

/*
* When the page is ready, see if it has divs for DaT elements
* If so, insert those elements
*/
$(document).ready(function(){
	
	/**************************************************
	* Insert Flash elements
	**************************************************/
	
	// If the viewport id exists then setup a viewport
	if ( $("#viewport").length == 1 ) setupViewport();
	// if the scroller id exists then setup the scroller
	if ( $("#scroller").length == 1 ) setupScroller();
	// if jewel_icon_1 id exists then set up the jewel 1 icon
	if ( $("#jewel_icon_1").length == 1 ) setupJewelIcon(1);
	// if jewel_icon_2 id exists then set up the jewel 2 icon
	if ( $("#jewel_icon_2").length == 1 ) setupJewelIcon(2);
	// if jewel_icon_3 id exists then set up the jewel 3 icon
	if ( $("#jewel_icon_3").length == 1 ) setupJewelIcon(3);
	
	/**************************************************
	* Add rollover and rollout behaviours
	**************************************************/
	
	$("#viewport_wrapper").bind("mouseenter",function() {
		viewportFocus();
	});
	$("#tiara_control").bind("mouseenter",function(){
		$(this).addClass('hover');
	});
	$("#metal_control").bind("mouseenter",function(){
		$(this).addClass('hover');
	});
	$("#band_control").bind("mouseenter",function(){
		$(this).addClass('hover');
	});
	$("#jewels_control").bind("mouseenter",function(){
		$(this).addClass('hover');
	});
	$("#jewel_icons").bind("mouseenter",function(){
		$("#jewels_control").addClass('hover');
	});
	
		
	$("#viewport_wrapper").bind("mouseleave",function() {
		viewportBlur();
	});
	$("#tiara_control").bind("mouseleave",function(){
	  //alert("tiara_control leave");
		$(this).removeClass('hover');
	});
	$("#metal_control").bind("mouseleave",function(){
		$(this).removeClass('hover');
	});
	$("#band_control").bind("mouseleave",function(){
		$(this).removeClass('hover');
	});
	$("#jewels_control").bind("mouseleave",function(){
		$(this).removeClass('hover');
	});
	
	/**************************************************
	* Add onclick behaviours
	**************************************************/

	// Add onclick functions to tabs
	$("#tiara_control").click(function(){
		tabSelect($(this));
	 });
	$("#metal_control").click(function(){
		tabSelect($(this));
	 });
	$("#band_control").click(function(){
		tabSelect($(this));
	});
	$("#jewels_control").click(function(){
		tabSelect($(this));
		openJewelsTab();
	});
	
	// Add onclick functions to jewel icons
	$("#jewel_control_1").click(function(){
		jewelIconSelect ($(this).attr('rel'), 1);
	});
	$("#jewel_control_2").click(function(){
		jewelIconSelect ($(this).attr('rel'), 2);
	});
	$("#jewel_control_3").click(function(){
		jewelIconSelect ($(this).attr('rel'), 3);
	});
	
	// Add rollover functions to jewel icons
	$("#jewel_control_1").bind('mouseenter',function(){
		jewelIconOver(1);
	});
	$("#jewel_control_2").bind('mouseenter',function(){
		jewelIconOver(2);
	});
	$("#jewel_control_3").bind('mouseenter',function(){
		jewelIconOver(3);
	});
	
	// Add rollout functions to jewel icons
	$("#jewel_control_1").bind('mouseleave',function(){
		jewelIconOut(1);
	});
	$("#jewel_control_2").bind('mouseleave',function(){
		jewelIconOut(2);
	});
	$("#jewel_control_3").bind('mouseleave',function(){
		jewelIconOut(3);
	});
	
	// Add click events to submenu items
	$("#jewel_1_submenu a").click(function(){
		selectJewelSubmenuItem($(this),1);
		return false;
	});
	$("#jewel_2_submenu a").click(function(){
		selectJewelSubmenuItem($(this),2);
		return false;
	});
	$("#jewel_3_submenu a").click(function(){
		selectJewelSubmenuItem($(this),3);
		return false;
	});
	
	/**************************************************
	* Add mouseup behaviours
	**************************************************/
	
	// Make sure any scrolling is stopped when the mouse is released
	$("body").mouseup(function(){
      stopScroll();
    });

	
	
});