// JavaScript Document


// Delta.js with slider controls

//////////////////////////////////////////////////////////////////////////////////////////////
///	Defining Global Variables ////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////


//// Menu variables //////////////////////////////////////////////////////////////////////////

var current_sub = null;			//
var info_id = null;			// sets location for the picture caption
var title_id = null;			// sets location for the caption title and submenus

//// Slider variables ////////////////////////////////////////////////////////////////////////

var slider_id = null;			// sets location for placing the slider
var slider_range = null;			// the horizontal width of the slider
var slider_image = null;			// appearance of the slider control

var origin = 0; 			// mouse starting positions 
var offset 	= 0; 			// current_cat element offset 
var slidee; 						// needs to be passed from OnMouseDown to OnMouseMove 
var current_image 	= 0;			// index for current image
var changee			= "";

var div_list 		= new Array();


//// XML variables ///////////////////////////////////////////////////////////////////////////

var xml_doc;						//loads cabinets database
var sub_category;					//subcategory array
var current_subcat	= 0;			//number of current sub category

//// Image lists /////////////////////////////////////////////////////////////////////////////

var fvimages 		= new Array();	// array stores fullview images
var bvimages 		= new Array();	// array stores bigview images
var timages 		= new Array();	// array stores thumbnail images
var eimages 		= new Array();	// array stores expander images
var preloaded		= new Array();	// array for preloading images

var temp 			= null;



//////////////////////////////////////////////////////////////////////////////////////////////
///	onload code //////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////

start_slider_listener();

//////////////////////////////////////////////////////////////////////////////////////////////
///	Function Definitions//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////

//// Opens an image in a new window //////////////////////////////////////////////////////////

function expand(obj, width, height) 
{	
	window.open(obj, "detail_view", "width=" + width + "," + "height=" + height);
	
}


//// Initializes sliding //////////////////////////////////////////////////////////////////////////////////////


function grab(e) 
{ 
	
	if (e == null) 												// IE doesn't retrieve the event object relative the to the document; it does, however, recognize window.event
	{
		e = window.event;
	} 								
	
	var target = e.target != null ? e.target : e.srcElement; 		// IE uses srcElement, others use target 
	
	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'slide') 	// for IE, left click == 1 & for Firefox, left click == 0
	{ 		 
		origin = e.clientX;  										// grab the mouse position
		offset = ExtractNumber(target.style.left); 					// grab the clicked element's position 
		slidee = target; 											// we need to access the element in OnMouseMove 
		document.onmousemove = slide; 								// tell our code to start moving the element with the mouse 
		document.body.focus(); 										// cancel out any text selections		
		document.onselectstart = function () { return false; };	// prevent text selection in IE  
		target.ondragstart = function() { return false; }; 		// prevent IE from trying to drag an image 
		return false; 												// prevent text selection (except IE)
	} 
	
}


//// Loads XML Document //////////////////////////////////////////////////////////////////////////////////////


function loadXMLDoc(dname) 
{
	var XMLDoc;
	if (window.XMLHttpRequest)
  	{
  		XMLDoc = new window.XMLHttpRequest();
  		XMLDoc.open("GET",dname,false);
  		XMLDoc.send("");
  		xml_doc = XMLDoc.responseXML;
  	}

	// IE 5 and IE 6

	else if (ActiveXObject("Microsoft.XMLDOM"))
  	{
  		XMLDoc=new ActiveXObject("Microsoft.XMLDOM");
  		XMLDoc.async=false;
  		XMLDoc.load(dname);
  		xml_doc = XMLDoc;
  	}
	else 
	{
		alert("Error loading document");
	}
	
	
}

//// Preloads all images in a subcategory //////////////////////////////////////////////////////////////////////


function preload_images() 
{
	
	var a, b = new Array();
	preloaded = new Array();	
	
	a = sub_category[current_subcat].getElementsByTagName("image");

	for (i = 0; i < a.length; i++)
	{
		preloaded[i] = document.createElement('img');
		preloaded[i].src = a[i].childNodes[0].nodeValue;
	}
	
	/*b = sub_category[current_subcat].getElementsByTagName("bvimage");
	
	for (i = 0; i < b.length; i++)
	{
		preloaded[i + a.length] = document.createElement('img');
		preloaded[i + a.length].src = b[i].childNodes[0].nodeValue;
	}*/
}


//// When released, removes attachment to the slidee /////////////////////////////////////////////////////////

function release(e) 
{ 
	if (slidee != null) 
	{ 

		document.onmousemove = null; 		
		document.onselectstart = null; 
		slidee.ondragstart = null; 
		slidee = null; 										 
	}
}

//// Sets locations and appearance of controls and selection ///////////////////////////////////


function set_menu(set_title_id, set_info_id, set_graphic_column, set_slider_id, set_slider_range, set_slider_image)
{ 
		
		title_id = set_title_id;
		info_id = set_info_id;
		graphic_column = set_graphic_column;
		
		slider_id = set_slider_id;
		slider_range = set_slider_range;
		slider_image = set_slider_image;
	
}

//// Sets the div size, creates the slide element /////////////////////////////////////////////

function set_slider()
{
	if (fvimages.length > 1 && !($(slider_id)))
	{
		var x = document.createElement('div');
		x.setAttribute('id', slider_id);
		$(graphic_column).appendChild(x);
		slider_control = document.createElement('img');
		slider_control.setAttribute('src', slider_image);
		slider_control.setAttribute('class', 'slide');
		
		$(slider_id).appendChild(slider_control);
	}
	else if (fvimages.length == 1 && $(slider_id))
	{
		$(graphic_column).removeChild($(slider_id));
		return;
		
	}
	
	div_list.length = 0;	
	
	if(fvimages.length > 1)
	{
		for (i = 0; i < fvimages.length; i++)
		{
			div_list[i] = (slider_range/(fvimages.length - 1)) * i;
		}
	
	}
	else if(fvimages.length == 1)
	{
		for (i = 0; i < fvimages.length; i++)
		{
			div_list[0] = 0;
			div_list[1] = slider_range;
		}
	}
}


/////// Slides the slider and changes the pictures ////////////////////////////////////////////////////////////////

function slide(e)
{ 
	if (e == null) var e = window.event; 
	
	var drag_position = (offset + e.clientX - origin);
	
	
	slidee.style.left = drag_position + 'px'; 				
	

	if (drag_position <= 0) 
	{
		slidee.style.left = 0 + 'px';
	}
	
	if (drag_position >= slider_range)
	{
		slidee.style.left = slider_range + 'px';
	}
	
	if(drag_position <= div_list[current_image - 1])
	{
			swap_changee(current_image - 1);
			current_image--;
	} 
		
	else if(drag_position >= div_list[current_image +1])
	{	
			swap_changee(current_image + 1);
			current_image++;
			
	}
	
}


//// makes document monitor mouse actions ////////////////////////////////////////////////////////////////////////////

function start_slider_listener() 	
{ 

	document.onmousedown = grab; 
	document.onmouseup = release; 
}

//// Swaps data for an entire category ///////////////////////////////////////////////////////////////////////////////

function next()
{		
		if (current_subcat < (sub_category.length - 1))
		{
			
			
			current_subcat++;
			swap();
			
			if (current_subcat == 1)
			{
				$('previous_arrow').setAttribute('src', 'images/previous_inert.jpg');
				$('previous_arrow').setAttribute('onmouseover', 'rollover("previous_arrow", "images/previous_active.jpg")');
				$('previous_arrow').setAttribute('onmouseout', 'rollover("previous_arrow", temp)');
			}
			
			
		}
		else if (current_subcat == (sub_category.length - 1))
		{
			$('next_arrow').setAttribute('src', 'images/next_off.jpg'); 
			$('next_arrow').setAttribute('onmouseover', '');
			$('next_arrow').setAttribute('onmouseout', '');
			
			return;
		}
		else
		{ 
			return; 
		}
		
}

function previous()
{		
		if (current_subcat > 0) 
		{
			
			
			current_subcat--;
			swap();
			
			if (current_subcat == (sub_category.length - 2))
			{
				$('next_arrow').setAttribute('src', 'images/next_inert.jpg');
				$('next_arrow').setAttribute('onmouseover', 'rollover("next_arrow", "images/next_active.jpg")');
				$('next_arrow').setAttribute('onmouseout', 'rollover("next_arrow", temp)');
			}
			
			
		}
		else if (current_subcat == 0)
		{
			$('previous_arrow').setAttribute('src', 'images/previous_off.jpg'); 
			$('previous_arrow').setAttribute('onmouseover', '');
			$('previous_arrow').setAttribute('onmouseout', '');
			return;	
		}
		else 
		{ 
			return; 
		}
		
}

//// Swaps data for one subcategory //////////////////////////////////////////////////////////

function swap()
{	
	sub_category = xml_doc.getElementsByTagName("custom");
	
	preload_images();
	swap_images();
	swap_info();
	set_slider();
}



//// Swaps the image out ///////////////////////////////////////////////////////////////////////////////////////////

function swap_changee(num)
{
	
	$("changee").src = fvimages[num];
}

//// Swaps the images, loads the image list, creates the control menu //////////////////////////


function swap_images()
{
		fvimages.length = 0;
		bvimages.length = 0;
		eimages.length = 0;
		timages.length = 0;
		
		var x = new Array();
		x = sub_category[current_subcat].getElementsByTagName("image");
		
		for ( i = 0; i < x.length; i++)
		{
			fvimages[i] = x[i].childNodes[0].nodeValue;
		}
		
		var x = new Array();
		x = sub_category[current_subcat].getElementsByTagName("bvimage");
		
		for ( i = 0; i < x.length; i++)
		{
			bvimages[i] = x[i].childNodes[0].nodeValue;
		}
		
		
		if(sub_category[current_subcat].getElementsByTagName("thumbnails")[0].hasChildNodes())
		{
			var x = new Array();
			x = sub_category[current_subcat].getElementsByTagName("timage");
		
			for ( i = 0; i < x.length; i++)
			{
				timages[i] = x[i].childNodes[0].nodeValue;
			}
		}
		
		if(sub_category[current_subcat].getElementsByTagName("expanders")[0].hasChildNodes())
		{
			var x = new Array();
			x = sub_category[current_subcat].getElementsByTagName("eimage");
		
			for ( i = 0; i < x.length; i++)
			{
				eimages[i] = x[i].childNodes[0].nodeValue;
			}
		
			
		}
		
}

//// Category swap that takes a variable from another page ///////////////////////////////////////

function swap_initial() {
	
	var query = window.location.search;
  
  	if (query.substring(0, 1) == '?') {
    	current_subcat = query.substring(1);
  	}
	else 
	{
		current_subcat = 0;	
	}
	
	swap();
	
}

////


function swap_info() 

{	
	$('changee').src = fvimages[0];
	$('changee').setAttribute('class', 'pointer');
	$('changee').onclick = function () { expand(bvimages[current_image], 510, 610); }

	$(info_id).innerHTML = "";
	$(title_id).innerHTML = "";
	xml_pull(title_id, 'heading', 'h1');
	xml_pull(info_id, 'info', 'p');
	swap_thumbs();
}

function swap_thumbs()
{
	for (var i = 0; i < timages.length; i++)
		{					
			
			y = document.createElement('img');
			y.setAttribute('src', timages[i]);
			y.setAttribute('class', 'thumbnail');
			y.setAttribute('id', "expand_" + i);
			y.onclick = function() { expand(eimages[this.id.charAt(7)], 610, 410); }
			
			$(info_id).appendChild(y);
		}
}


//////////////////////////////////////////////////////////////////////////////////////////////
///	Utility Functions ////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////

//// Replaces the far nastier document.getElementById(id) method //////////////////////////////

function $(id) 
{ 

	k = document.getElementById(id);
	
	if (k != null) { return k; }
	else { return false; }
}


//// Removes a number from a string ///////////////////////////////////////////////////////////

function ExtractNumber(value)
{ 
	
	var n = parseInt(value); 
	return n == null || isNaN(n) ? 0 : n; //if n isn't a number, return 0, else return number
} 


///// Prints requested value to the screen ////////////////////////////////////////////////////

function report(reportee) {
	
	$("report").innerHTML= reportee;
	
}

function rollover(id, change_to){
		
		temp = $(id).src;
		$(id).src = change_to;	
}


//////////////////////////////////////////////////////////////////////////////////////////////
///	XML Utilities ////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////


//// Swaps the caption information /////////////////////////////////////////////////////////////

function xml_pull(id, get_node, element_type)


	{
			
		var elements = sub_category[current_subcat].getElementsByTagName(get_node);
		
		for(i = 0; i < elements.length; i++){
			var x = document.createElement(element_type);
			x.innerHTML = elements[i].childNodes[0].nodeValue;
			$(id).appendChild(x);
		}
	
	}