// JavaScript Document


// Delta.js with slider controls

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

var category_name = '';
var subcategory_name = '';
var slider_bool  = false;

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

var current_cat 	= null; 		// our current_cat category
var current_tab		= null;			//
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 category;						//current category
var subcategory;					//current subcategory

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

var bvimages		= new Array();
var fvimages 		= new Array();	// array stores fullview images
var submenu_list 	= new Array();	// array stores submenu strings


var temp = null;

var n = 0;



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

start_slider_listener();

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


//// Creates the menu for the subcategories ///////////////////////////////////////////////////

function create_submenu(subcategory_name)
{
	
	var j = 0;
	k = new Array();
	l = new Array();
	
	
	$(submenu_id).innerHTML = " ";
	
	var w = document.createElement('ul');
	
	
	for (i = 0; i < category.childNodes.length; i++)
	{
		if (category.childNodes[i].nodeType == 1)
		{
			
			k[j] = category.childNodes[i].nodeName;	
			
		
			l[j] = document.createElement('li');
			l[j].setAttribute('id', k[j]);
			l[j].onclick = function () { swap(this.id) };
			l[j].innerHTML = category.getElementsByTagName("sname")[j].childNodes[0].nodeValue;
			
			
			w.appendChild(l[j]);
			
			j++;	
		}
		
		
	}
	
	$(submenu_id).appendChild(w);
	
	var line_break = document.createElement('br');
	line_break.setAttribute('class', 'clearfloat');
	
	
	$(submenu_id).appendChild(line_break);
	$(subcategory_name).setAttribute("class", "currentpage");
	
}


//// Expands thumbnails in a new window ///////////////////////////////////////////////////////


function expand(obj, width, height, scrollbars) 
	{	
		if (scrollbars)
		{
			window.open(obj, "_blank", "width=" + width + "," + "height=" + height + ", scrollbars=yes");
		}
		else if (width && height)
		{
			window.open(obj, "_blank", "width=" + width + "," + "height=" + height);
		}
		else
		{
			window.open(obj, "_blank", "width=610, height=410");
		}
		
		n++;
}

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


function grab(e) 
{ 
	
	if (e == null) e = window.event; 								// IE doesn't retrieve the event object relative the to the document; it does, however, recognize 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");
	}
}

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

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

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

////

function rollover(id, change_to){
	
	
	if(id != current_tab){ 
	
		$(id).src = change_to;
	
		
	}
	
}


////

function tab_menu(id){
	
	
	if (current_tab){
		$(current_tab).src = "images/" + current_tab + "_inert.jpg";
	
	}
	
	
	$(id).src = "images/" + id + "_active.jpg"

	current_tab = id;
	
	}

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


function set_menu(set_title_id, set_submenu_id, set_info_id, set_graphic_column, set_slider_id, set_slider_range, set_slider_image)
{ 
		
		title_id = set_title_id;
		submenu_id = set_submenu_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_bool))
	{
		var x = document.createElement('div');
		x.setAttribute('id', slider_id);
		$(graphic_column).appendChild(x);
		slider_control = document.createElement('img');
		slider_control.setAttribute('id', 'slider_control');
		slider_control.setAttribute('src', slider_image);
		slider_control.setAttribute('class', 'slide');
		$(slider_id).appendChild(slider_control);
		$('slider_control').style.left = '0px';
		slider_bool = true;
	}
	else if (fvimages.length > 1 && slider_bool)
	{
		$('slider_control').style.left = '0px';
	}
	else if (fvimages.length <= 1 && slider_bool)
	{
		$(graphic_column).removeChild($(slider_id));
		slider_bool = false;
		return;
		
	} 	
	
	else if (fvimages.length <= 1 && !(slider_bool))
	{ 
		return;
	}
	
	div_list.length = 0;	
	
	if(fvimages.length > 2)
	{
		for (i = 0; i < fvimages.length; i++)
		{
			div_list[i] = (slider_range/(fvimages.length - 1)) * i;
		}
	
	}
	else if(fvimages.length == 2)
	{
		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 the image out ///////////////////////////////////////////////////////////////////////////////////////////

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

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


function swap_images()
{
		bvimages.length = 0;
		fvimages.length = 0;
		
		var a = subcategory[0].getElementsByTagName("image_count");
		var image_count = a[0].childNodes[0].nodeValue;
	
		if (image_count == 0)
		{
			$("changee").setAttribute('src', 'images/placeholder.jpg');
			return;
		}	
		
		for(i = 0; i < image_count; i++)
		{
			fvimages[i] = document.createElement('img'); 	
			fvimages[i].setAttribute('src', 'images/' + category_name + '/' + subcategory_name + '/' + subcategory_name + '_' + i + '.jpg'); 
			bvimages[i] = document.createElement('img');
			bvimages[i].setAttribute('src', 'images/' + category_name + '/' + subcategory_name + '/big/' + subcategory_name + '_' + i + '.jpg');
		}
		
		$('changee').setAttribute('src', fvimages[0].src);
		
}

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

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

//// Swaps the selected category name ////////////////////////////////////////////////////////////


function swap_selected(c_name, current_selection)
{
		
		if ($(current_selection))
		
		{
			
			$(current_selection).className = ' ';
		
		}
		
		$(c_name).setAttribute('class', 'currentpage');

		current_selection = c_name;

		return(current_selection);
}


//// Master swap function; makes calls to change out all data for one cabinet     //////////////

function swap(get_subcategory_name)
{
	subcategory_name = get_subcategory_name;
	
	subcategory = xml_doc.getElementsByTagName(subcategory_name);	
	category = subcategory[0].parentNode;
	
	if (category.nodeName != category_name)
	{
		$(title_id).innerHTML = "";
		$(title_id).innerHTML = "<h1>" + subcategory[0].getElementsByTagName('cname')[0].childNodes[0].nodeValue + "</h1>";
		create_submenu(subcategory_name);
		category_name = category.nodeName;
		current_cat = swap_selected(category_name, current_cat);	
			
	}

	current_sub = swap_selected(subcategory_name, current_sub);
	_tab('overview');
	swap_images();
	set_slider();
}

//////////////////////////////////////////////////////////////////////////////////////////////
///	Tab Menu Functions ///////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////

function _tab(tab_id) {
	
	tab_menu(tab_id);
	$(info_id).innerHTML = "";
	ajax_pull(info_id, tab_id + '/' + subcategory_name + '.html');
}

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

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

function $(id) 
{ 

	return document.getElementById(id); 
}


//// 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;
	
}


//////////////////////////////////////////////////////////////////////////////////////////////
///	AJAX Utilities ////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////


//// Swaps information /////////////////////////////////////////////////////////////

function ajax_pull(id, xml_req)
{
		
		if (window.XMLHttpRequest)
		{	// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp=new XMLHttpRequest();
		}
		else
		{	// code for IE6, IE5
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.open("GET", xml_req, false);
		xmlhttp.send(null);
		document.getElementById(id).innerHTML=xmlhttp.responseText;	
		
}