// <![CDATA[
function loadXMLDoc(file)
{
/*
	// code for IE
	index=-1;
	if (window.ActiveXObject)
	{
		xml_doc=new ActiveXObject("Microsoft.XMLDOM");
	}
	// code for Mozilla, Firefox, Opera, etc.
	else if (document.implementation && document.implementation.createDocument)
	{
		xml_doc=document.implementation.createDocument("","",null);
	}
	else
	{
		alert('Your browser cannot handle this script');
	}
	xml_doc.async=false;
	xml_doc.load(dname);
*/	
	index=-1;
	try //Internet Explorer
	{
		xml_doc=new ActiveXObject("Microsoft.XMLDOM");
		xml_doc.async=false;
		xml_doc.load(file);
	}
	catch(e)
	{
		try //Firefox, Mozilla, Opera, etc.
		{
			xml_doc=document.implementation.createDocument("","",null);
			xml_doc.async=false;
			xml_doc.load(file);
		}
		catch(e)
		{
			try //Google Chrome
			{
				var xmlhttp = new window.XMLHttpRequest();
				xmlhttp.open("GET",file,false);
				xmlhttp.send(null);
				xml_doc = xmlhttp.responseXML.documentElement;
			}
			catch(e)
			{
				error=e.message;
			}
		}
	}
}

function create_tabs()
{
	aTabs=[];  //Array of needed tabs
	var xml_pic=xml_doc.getElementsByTagName('picture');

	//Add element to array for every type
	for (i=0;i<xml_pic.length;i++)
  	{
  		aTabs[i]=xml_pic[i].getAttribute('type');
  	}
  	//Remove Duplicated from array
  	aTabs=aTabs.uniq();
  	//Create tabs
  	for (i=0;i<aTabs.length;i++)
  	{
//			element = Builder.node('li', {id:aTabs[i], onClick:'tab_clicked(this)'}, '');
//  			$('tab').appendChild(element);
//  			element.innerHTML="<a href='#' id='link_tab_" + i + "' >" + aTabs[i] + "</a>";

			element = Builder.node('li', {id:'li_'+aTabs[i]}, '');
  			$('tab').appendChild(element);
  			element.innerHTML="<a href='#' class='trans' id='" + aTabs[i] + "' onClick='tab_clicked(this)' >" + aTabs[i] + "</a>";		
  	}	
  	element = Builder.node('div', {id:'thumbnails_loader'}, '');
	$('main').appendChild(element);
	element.innerHTML='Loading Thumbnails... <br/>';
	element = Builder.node('img', {alt:'', src:'images/loader.gif', height:'15px', width:'70px'}, '');
	$('thumbnails_loader').appendChild(element);
}

function tab_clicked(obj)
{
	var index=obj.id;
	aSubtabs=['All'];
	var xml_pic=xml_doc.getElementsByTagName('picture');
	//var xml_sizes=xml_doc.getElementsByTagName('sizes');

	//Clear the prev subtabs
	$('subtab_container').innerHTML='';
	//Unselect all tabs
  	for (i=0;i<aTabs.length;i++)
  	{
  		$(aTabs[i]).removeClassName('selected');
  		//$(aTabs[i]).firstDescendant().removeClassName('selected');
  	}
  	//Create array of needed subtabs
	for (i=0;i<xml_pic.length;i++)
  	{
  		if (obj.id == xml_pic[i].getAttribute('type'))
  		{
  			aSubtabs.push(xml_pic[i].getAttribute('style'));		
  		}
  	}
  	//remove duplicates from array
	aSubtabs=aSubtabs.uniq();
	//Create ul to later place li subtabs in
	element = Builder.node('ul', {id:'subnav'}, '');
  	$('subtab_container').appendChild(element);	
	//Create subtabs
  	for (i=0;i<aSubtabs.length;i++)
  	{
  		element = Builder.node('li',{id:'sub_li_'+i, className:'trans'}, '');
  		$('subnav').appendChild(element);
  		
  		element_link = Builder.node('a', {id:'subtab_a'+aSubtabs[i], href:'#', onClick:('subtab_clicked(this)')}, aSubtabs[i]);
  		$('sub_li_'+i).appendChild(element_link);
  	}	
	//Set selected classname of the clicked tab
  	//$(obj).firstDescendant().className ='selected';
  	$(obj).className ='selected';
	//Generate thumbnails
	subtab_clicked($('subtab_aAll'))
  	//Get sizes from XML to show by picture
/*  	for (i=0;i<xml_sizes.length;i++)
  	{
  		if (index==xml_sizes[i].getAttribute('cat'))
  		{
  			$('p_sizes').innerHTML=xml_sizes[i].childNodes[0].nodeValue;	
  		}
  	}
 */
}

function subtab_clicked(obj)
{
	//Remove clicked classname
	for (i=0;i<aSubtabs.length;i++)
  	{
  		$('subtab_a'+aSubtabs[i]).removeClassName('clicked');
  	}
	//Call showThumbs
	showThumbs($('tab').getElementsByClassName('selected')[0].id, $(obj).innerHTML)
	
	//Set subtab class to clicked
	$(obj).className='clicked';
}

function showThumbs (in_type, in_style)
{
	var type = in_type;
	var style = in_style;
	var xml_pic=xml_doc.getElementsByTagName('picture');
	thumb_size=83;
	$('thumbnails_loader').show();
	$('thumbnails').innerHTML='';
	$('thumbnails').style.width=0 + "px";
	
	for (i=0;i<xml_pic.length;i++)
  	{
  		if (xml_pic[i].getAttribute('type')==type  && xml_pic[i].getAttribute('style')==style || type=='All' && xml_pic[i].getAttribute('style')==style || xml_pic[i].getAttribute('type')==type && style=='All' || type=='All' && style=='All')
  		{
			//Load thumbnail paths
  			var xml_thumb=xml_doc.getElementsByTagName('thumb');
			//increase size of thumbnails div
    		var new_width =thumb_size + $('thumbnails').getWidth();
  			document.getElementById('thumbnails').style.width=new_width + "px";
  			//Create thumbnail
  			element = Builder.node('div', {id:i, className:'thumb', onMouseOver:'slide(this)'}, '');
    		var bk = "url(" + xml_thumb[i].childNodes[0].nodeValue + ")";
			element.style.backgroundImage=bk;
  			$('thumbnails').appendChild(element);
  		}
  	}
  	$('thumbnails_container').scrollLeft=0;
  	check_scroll();
  	$('thumbnails_loader').hide();	
}

function scroll_right()
{
	$('thumbnails_container').scrollLeft=$('thumbnails_container').scrollLeft+thumb_size;
	check_scroll()
}

function scroll_left()
{
	$('thumbnails_container').scrollLeft=$('thumbnails_container').scrollLeft-thumb_size;
	check_scroll()
}

function check_scroll()
{
	var width = $('thumbnails_container').getWidth();
	if ($('thumbnails_container').scrollLeft==0)
	{
		$('slide_left').addClassName('no_scroll');
	} else if ($('thumbnails_container').scrollLeft>0)
	{
		$('slide_left').removeClassName('no_scroll');
	}
	if ($('thumbnails_container').scrollLeft==($('thumbnails').getWidth()-width) || $('thumbnails').getWidth() <= width )
	{
		$('slide_right').addClassName('no_scroll');
	} else if ($('thumbnails_container').scrollLeft<$('thumbnails').getWidth()-width || $('thumbnails').getWidth() > width)
	{
		$('slide_right').removeClassName('no_scroll');
	}
}

function slide(obj)
{
	//only slide if a new piccy
	if (index!=obj.id)
	{
		var x=xml_doc.getElementsByTagName('path');
		//set index to new picture
		index=obj.id;
		//try to preload image
		objImage = new Image();
		objImage.src=x[index].childNodes[0].nodeValue;
		//always set div to correct height first or it gets smaller
		$('picture').style.height=271 + "px";
		//Clear effects queue
		var queue = Effect.Queues.get('global');
		queue.each(function(e) { e.cancel() });
		//slide div up then load picture
		//showPicture(index);
		new Effect.SlideUp('picture', {queue: 'end', limit:1, afterFinish: showPictureOnFinish});
		
		//slide loaded pic down.  load info from xml
		new Effect.SlideDown('picture', {queue: 'end', limit:1, afterFinish: getInfoOnFinish});
	}
}

function showPictureOnFinish(obj){
	//Call show picture
	showPicture(index);
}

function getInfoOnFinish(obj) {
	var xml_pic=xml_doc.getElementsByTagName('picture');
	var xml_message=xml_pic[index].getAttribute('message');
	var xml_info=xml_doc.getElementsByTagName('description');
	//Load info about the style
	for (i=0;i<xml_info.length;i++)
	{
		if (xml_info[i].getAttribute('cat')==xml_message)
		{
			$('p_info').innerHTML=xml_info[i].childNodes[0].nodeValue;		
		}
	}
}

function showPicture (obj)
{
	var img = '<img src=';
	var tag_end = '/>';
	var x=xml_doc.getElementsByTagName('path');

	$('picture').innerHTML='';
  	//element_img = Builder.node('img', {src:x[index].childNodes[0].nodeValue,className:'pic',id:'pic_'+index}, '');
  	//$('picture').appendChild(element_img);
  	$('picture').appendChild(objImage); 		
}
// ]]>