//:::::::::::::::
// copyright SPRITEART.com
// script navigation schematics
//:::::::::::::::
	//GLOBAL VARS
	var OPEN_GALLERY;
	var THUMBS_PAGE;
	var THUMBS_DATA = new Array();
	var GALLERY_LOADED;
	var BOOL_IFRAME = true;
	var BOOL_RGB_SWATCH = false;

	function Reset_Globals(){
			//clear values
			OPEN_GALLERY = false;
			THUMBS_PAGE = 1;
			GALLERY_LOADED = false;
	}

	function Create_Shadows(){
	
			//start with fresh variables for the selected gallery type
			Reset_Globals();
			
			//create shadow elements to select from
			var shadows = document.createElement('img');
				shadows.id = "shadows";
				shadows.src = "art/UI/temp_shadows_1.png";
				shadows.style.position = "absolute";
				shadows.style.left = "50%";
				shadows.style.top = "50%";
				shadows.style.marginLeft = "-282px";
				shadows.style.marginTop = "55px";
				shadows.style.opacity = 0;
				
				document.getElementById('sprite_frame').appendChild(shadows);
				
				FadeOpacity(shadows, 50, 0, 2, 2);
				FadeOpacity(document.getElementById('karen_shadow'), 20, 100, 5, 5);
				
			var shadow_A = document.createElement('img');
				shadow_A.id = "2d";
				shadow_A.className = "shadow";
				shadow_A.src = "art/UI/temp_shadow_A.png";
				shadow_A.style.marginLeft = "-282px";
				shadow_A.style.marginTop = "57px";
				shadow_A.style.opacity = 0;
				shadow_A.style.filter = "alpha(opacity=0)";
				
			var shadow_B = document.createElement('img');
				shadow_B.id = "pixel";
				shadow_B.className = "shadow";
				shadow_B.src = "art/UI/temp_shadow_B.png";
				shadow_B.style.marginLeft = "-101px";
				shadow_B.style.marginTop = "56px";
				shadow_B.style.opacity = 0;
				shadow_B.style.filter = "alpha(opacity=0)";
				
			var shadow_C = document.createElement('img');
				shadow_C.id = "3d";
				shadow_C.className = "shadow";
				shadow_C.src = "art/UI/temp_shadow_C.png";
				shadow_C.style.marginLeft = "18px";
				shadow_C.style.marginTop = "55px";
				shadow_C.style.opacity = 0;
				shadow_C.style.filter = "alpha(opacity=0)";
				
			document.getElementById('sprite_frame').appendChild(shadow_A);
			document.getElementById('sprite_frame').appendChild(shadow_B);
			document.getElementById('sprite_frame').appendChild(shadow_C);
	}
	
	function Hide_Shadows(shadow){
	// retracts skull shadows with an animation, removes the shadow skull overlays and
	// makes a call to sample script 5 to display the thumbnail browser
			OPEN_GALLERY = shadow; 
			var container = document.getElementById('sprite_frame');
			if(document.getElementById('2d'))		{container.removeChild(document.getElementById('2d'));}
			if(document.getElementById('pixel'))	{container.removeChild(document.getElementById('pixel'));}
			if(document.getElementById('3d'))		{container.removeChild(document.getElementById('3d'));}
			
			if(document.getElementById('shadows')){
					var offset = parseInt(document.getElementById('shadows').style.marginLeft);
					document.getElementById('shadows').style.marginLeft = offset + 10 + 'px';
					document.getElementById('shadows').src="art/UI/temp_shadow_anim.gif";
					setTimeout("Remove_Element(document.getElementById('shadows'))", 200);
			}
			
			FadeOpacity(document.getElementById('karen_shadow'), 100, 20, 5, 5);
			if(shadow)	{Create_Thumbnail_Window(shadow.id);}
	}
			
			function Create_Thumbnail_Window(art_type){
			// creates a window to browse thumbnails for type of art selected in main menu. 
					var container = document.getElementById('container');
					if (!container){
						container = document.createElement('div');
						container.id = 'container';
						container.className = 'thumbs_frame';
						container.style.marginLeft = '-211px';
						container.style.marginTop = '-140px';
						container.style.visibility = 'visible';
						container.style.opacity = 0;
						
						document.getElementById('body').appendChild(container);
						
						var slider = document.getElementById('thumbs_slider');
						if (!slider){
								slider = document.createElement('div');
								slider.id = 'thumbs_slider';
								slider.className = 'thumbs_slider';
								slider.style.marginLeft = '0px';
								container.appendChild(slider);
						}	
					}
					
					//clear inside of the thumbs container. Uses deprecated method but does so very fast
					else{
							//document.getElementById('thumbs_slider').innerHTML = '';
					}
					//function call to create appropriate border elements around the container div
					Draw_Thumbnail_Borders(art_type);
					
					// pass along the art gallery type to query from the DB
					Query_Thumbnails(art_type, 'lib/query_gallery.php');
			
			}
					function Query_Thumbnails(art_type, action){
					// Seeks to open up hidden iframe, create a form, submit a query to retrieve directory listing
					// of files. 
					
							var form = document.getElementById('iframe').contentDocument.getElementById('form');
								form.action = action;
								
							var input = document.createElement('INPUT');
								input.type = 'hidden';
								input.enctype = 'text';
								input.name = 'query_string';
								input.value = art_type;
							
							var value2 = document.getElementById('thumbs_slider').childNodes.length;
							var input2 = input.cloneNode(false);
								input2.name = 'index';
								input2.value = (!value2) ? 1 : value2;

							form.appendChild(input);
							form.appendChild(input2);
							form.submit();
							BOOL_IFRAME = false;
					}
							
							function Draw_Thumbnail_Borders(art_type){
									var border_src = 'art/UI/';
									switch (art_type){
										case '2d':	border_src += 'border_2d'; break;
										case '3d':	border_src += 'border_2d'; break;
										case 'pixel':	border_src += 'border_pixel'; break;
									}
									
									var border1 = document.getElementById('border_1');
									if(!border1){
										border1 = document.createElement('img');
										border1.id = 'border_1';
										border1.src = border_src + '_1.png';
										border1.className = 'thumbs_border_left';
										border1.style.backgroundPosition = '0px 0px';
										border1.style.opacity = 0;
										document.getElementById('sprite_frame').appendChild(border1);
										
									var border2 = border1.cloneNode(false);
										border2.src = border_src + '_2.png';
										border2.id = 'border_2';
										border2.className = 'thumbs_border_right';
										document.getElementById('sprite_frame').appendChild(border2);
										
										setTimeout("FadeOpacity(document.getElementById('border_1'), 75, 0, 10, 5)", 100);
										setTimeout("FadeOpacity(document.getElementById('border_2'), 75, 0, 10, 5)", 100);
										
										Scroll_BG_Image(border1)();
										Scroll_BG_Image(border2)();
									}
							}
							
							function Show_Thumb_Title(img){
									//extract the raw filename of the image src contained in the image element's id
									var filename = (img.name) ? img.name : img.id.substr(img.id.lastIndexOf('/')+1, img.id.lastIndexOf('.')-img.id.lastIndexOf('/')-1);
									
									//normalize string by replacing _ chars with spaces
									var img_title = filename.replace(/_/g, " ");
									
									//add element to display title thumbnail centered under thumbs slider 
									var title = document.getElementById('thumb_title');
									if (!title){
											var title = document.createElement('div');
												title.id = "thumb_title";
												title.className = 'thumb_title';
												title.style.opacity = 0;

											//append child to document
											document.getElementById('body').appendChild(title);
									}
									//create title text
									title.innerHTML = img_title;
									FadeOpacity(title, 100, 0, 5, 2);
							}
			
		function Query_Image(this_img){
		//this function takes a thumbnail image, reads its 'id' attribute as a filepath for an image to load
				//check to see if iframe has first reset itself
				if(!document.getElementById('iframe').contentDocument.getElementById('form'))	{return false;}

				//outtro fade thumbnail display
				FadeOpacity(document.getElementById('container'), 0, 100, 5, 5);
				
				//delayed outtro to set interaction to inactive
				var t = setTimeout("document.getElementById('container').style.visibility = 'hidden'", 200);

				var form = document.getElementById('iframe').contentDocument.getElementById('form');
					form.action = 'lib/query_image.php';
				
				var input = document.createElement('INPUT');
					input.type = 'hidden';
					input.enctype = 'text';
					input.name = 'thumb_url';
					input.value = this_img.id;
					
					
					var input2 = input.cloneNode(false);
						input2.name = 'gallery';
						input2.value = OPEN_GALLERY;

				form.appendChild(input);
				form.appendChild(input2);
				form.submit();
				BOOL_IFRAME = false;
		}	
		
		function Display_Image(img, assoc_id){
				
				//img = img.cloneNode(true);
				
				var img_width = (parseInt(img.width)>200 || parseInt(img.height)>200) ? parseInt(img.width): 250;
				var img_height = (parseInt(img.height)>200 || parseInt(img.width)>200) ? parseInt(img.height) : 250;
				
				var frame = document.createElement('div');
					frame.id = 'pic_frame';
					frame.className = 'pic_frame';
					frame.style.opacity = 0;
					
				var div = document.createElement('div');
					div.id = 'img_frame';
					div.className = 'gallery_img_frame';
					//div.style.backgroundImage = "URL('art/UI/transp_img_bg.png')";
					div.style.width = img_width + 'px';
					div.style.height = img_height + 'px';
					div.style.marginLeft = -img_width/2+'px';
					div.style.marginTop = -img_height/2+'px';
					div.style.padding = '3px 3px 3px 3px';
					div.style.opacity = 0;
					
					img.id = 'gallery_img';
					img.src = assoc_id.substr(3);
					img.className = 'gallery_img';
					//img.style.width = img_width+'px';
					//img.style.height = img_height+'px';
					img.style.marginLeft = Math.floor(-parseInt(img.width)/2)+'px';
					img.style.marginTop = Math.floor(-parseInt(img.height)/2)+'px';
					img.style.opacity = 1;
					
					if(THUMBS_DATA[THUMBS_PAGE-1][assoc_id][2]){
						var descript = document.createElement('div');
							descript.id = 'description';
							descript.style.bottom = '0px';
							descript.style.margin = '0px 0px 3px 0px';
							descript.style.width = img_width+'px';
							descript.style.opacity = 0;
							descript.style.backgroundColor = '#333';
							descript.style.zIndex = 2;
							//descript.innerHTML = 
							var descript_txt = document.createElement('span');
								descript_txt.innerHTML = THUMBS_DATA[THUMBS_PAGE-1][assoc_id][2];
								descript_txt.style.padding = '5px';
								descript_txt.style.paddingBottom = '8px';
								descript_txt.style.fontSize = '10pt';
								descript_txt.style.color = '#eee';
					
							descript.appendChild(descript_txt);
							div.appendChild(descript);
					}
					
					var title_text = (THUMBS_DATA[THUMBS_PAGE-1][assoc_id][3]) ? THUMBS_DATA[THUMBS_PAGE-1][assoc_id][3] : (assoc_id.substr(assoc_id.lastIndexOf('/')+1, assoc_id.lastIndexOf('.')-assoc_id.lastIndexOf('/')-1));
						title_text = title_text.replace(/_/g, " ");
						
					var title = document.createElement('div');
						title.id = 'title';
						title.style.width = img_width+'px';
						title.style.height = '20px';
						title.style.top = '50%';
						title.style.left = '50%';
						title.style.marginTop = (img_height/2)+6+'px';
						title.style.marginLeft = -(img_width/2)+6+'px';
						//title.style.backgroundColor = 'green';
						title.style.textAlign = 'center';
						title.style.zIndex = 3;
						title.style.fontWeight = 'bold';
						title.style.fontSize = '10pt';
						title.style.textTransform = 'capitalize';
						title.style.color = '#aaa';
						title.innerHTML = title_text;
							
							
							div.appendChild(title);
					
					if(THUMBS_DATA[THUMBS_PAGE-1][assoc_id][1].length){
						
					}
					
				var new_img = img.cloneNode(true);
					new_img.removeAttribute('onload');
				div.appendChild(new_img);
				frame.appendChild(div);
				document.getElementById('body').appendChild(frame);
				
				FadeOpacity(frame, 100, 0, 2, 5);
				var t = setTimeout("FadeOpacity(document.getElementById('img_frame'), 100, 0, 2, 5)", 300);
				
				//load additional information
				//Display_Image_Form(img);
		}
		
		function Display_Image_Form(img){
				
				//COMMENTS SUBMIT FORM
				var div = document.createElement('div');
					div.id = 'form_frame';
					div.className = 'form_frame';
					div.style.marginTop = parseInt(document.getElementById('img_frame').style.height)/2+'px';
					div.style.marginLeft = -175+'px';
					
				var form = document.createElement('form');
					form.id = 'comment';
					form.action = '';
					form.method = 'POST';
						
						var author = document.createElement('input');
							author.id = 'author';
							author.name='author';
							author.className = 'author';
							author.value = 'author';
							author.style.width = '100%';
							
						var comment = document.createElement('textarea');
							comment.id = 'comment';
							comment.name='comment';
							comment.className = 'comment';
							comment.value = img.id;
							comment.style.width = '100%';
							comment.style.top = '30px';
							comment.style.height = '130px';
							comment.style.display = 'block';
							
						var button = document.createElement('button');
							button.type = 'submit';
							button.value = 'submit';
							button.style.bottom = '0px';
							button.style.right = '0px';
						
					form.appendChild(author);
					form.appendChild(comment);
					form.appendChild(button);
					div.appendChild(form);
					document.getElementById('pic_frame').appendChild(div);
		}
		function Close_Image(img, bool_remove){
		// receives a reference to gallery pic image from event handler and closes the image window
				if(bool_remove){
						Remove_Element(img);
						document.getElementById('container').style.visibility = 'visible';
						FadeOpacity(document.getElementById('container'), 100, 0, 2, 5);
				}
				// written to recurse in order to avert setTimeout quotation limitations on passing vars as args
				else{	
					FadeOpacity(document.getElementById('img_frame'), 0, 100, 2, 10);
					FadeOpacity(document.getElementById('palette_frame'), 0, 100, 2, 5)
					
					setTimeout("FadeOpacity(document.getElementById('pic_frame'), 0, 100, 2, 5)", 300);
					setTimeout("Close_Image(document.getElementById('pic_frame'), true)", 600);
				}
		}
		
		function Remove_Thumbs(){
				
				//outtro fade and remove the thumbs container element
				FadeOpacity(document.getElementById('container'), 0, 100, 2, 5); 
				setTimeout("document.getElementById('body').removeChild(document.getElementById('container'))", 200);
				
				//TEMP - redraw selection shadows for navigation. load on delay
				setTimeout("Create_Shadows()", 300);
				
				//outtro and remove borders
				if(document.getElementById('border_1'))	{
						FadeOpacity(document.getElementById('border_1'), 0, 75, 2, 5);
						setTimeout("Remove_Element(document.getElementById('border_1'))", 300);
				}
				if(document.getElementById('border_2'))	{
						FadeOpacity(document.getElementById('border_2'), 0, 75, 2, 5);
						setTimeout("Remove_Element(document.getElementById('border_2'))", 300);
				}
				
				//clear gallery variables
				THUMBS_DATA = new Array();
		}
		
		function Scroll_Thumbs(direction){
				var slider = document.getElementById('thumbs_slider');
				if (SLIDE_OBJECT_QUEUE[0] == slider)	{return false;}
				if (!slider)		{window.status = 'no slider'; return false;}
				if (!BOOL_IFRAME)	{window.status = "please wait"; return false;}
				
				//set up direction modifier variable depending on desired direction to scroll
				var dir_mod = (direction == 'left') ? 1 : -1;
				var thumbs_max = 7; 
				
				//determine if there are thumbnails already loaded that are currently residing offscreen in desired direction
				var bool_next; 
				if (direction == 'right')	{bool_next = (THUMBS_PAGE <= 1) ? false : true;}
				else 						{bool_next = (THUMBS_PAGE < Math.ceil(slider.childNodes.length / thumbs_max)) ?	true : false;}
				
				//if there is another page, scroll the frame
				if (bool_next == true)	{Slide_Object_Offset(slider, direction, 427, 10, 1, 1.08); THUMBS_PAGE += dir_mod;}
				
				//otherwise if you are at the end, call function to server to load next batch of thumbs
				else{
						if (direction == 'left' && !GALLERY_LOADED && (slider.childNodes.length/thumbs_max == Math.floor(slider.childNodes.length/thumbs_max))){
								THUMBS_PAGE++;
								Query_Thumbnails(OPEN_GALLERY.id, 'lib/query_gallery.php');
						}
				}
		}
		
		function Display_Img_Palette(array){
		//takes a palette array in rgb pairs as an arg
			if(!array || !array.length)	{parent.status = 'no palette array to display'; return false;}
			
			//formatting variables
			var swatch_width = 8;
			var swatch_height = 16; 
			var swatch_padding = 3;
			
			//create a container div
			var container = document.createElement('div');
				container.id = 'palette_frame';
				container.className = 'palette_frame';
				container.style.width = (swatch_width+swatch_padding)*8 + swatch_padding + 'px';
				container.style.height = Math.ceil(array.length/8) * (swatch_height+swatch_padding) +swatch_padding + 'px';
				container.style.left = '50%';
				container.style.marginLeft =  
									   parseInt(document.getElementById('img_frame').style.width)/2 + parseInt(document.getElementById('img_frame').style.padding) + 14 + 'px';
				container.style.top = '50%';
				container.style.marginTop =  parseInt(document.getElementById('img_frame').style.marginTop) + 'px';
				container.style.opacity = 0;
									   
				//create palette swatch and add it to container div
				for(var i=0; i<array.length; i++){
						var swatch = document.createElement('span');
							swatch.id = 'palette_index_'+i;
							swatch.className = 'palette_swatch';
							swatch.style.width = swatch_width + 'px';
							swatch.style.height = swatch_height + 'px';
							swatch.style.backgroundColor = 'rgb('+array[i][0]+','+array[i][1]+','+array[i][2]+')';
						//append swatch
						container.appendChild(swatch);
				}
				//append palette container to image frame
				document.getElementById('pic_frame').appendChild(container);
				//fade in palette
				setTimeout("FadeOpacity(document.getElementById('palette_frame'), 100, 0, 2, 5)", 500);

		}
				function Display_Palette_Details(color){
						//remove palette if it exists
						if (document.getElementById('sample'))	{setTimeout("document.getElementById('sample').parentNode.removeChild(document.getElementById('sample'))", 500);}
						
						var left = (parseInt(color.parentNode.style.width)/2);
						var top = (parseInt(color.parentNode.style.height));
						var width = left*2;
						
						var sample = document.createElement('div');
							sample.id = 'sample';
							sample.className = 'palette_sample';
							sample.style.width = width + -6+'px';
							sample.style.backgroundColor = color.style.backgroundColor;
							//sample.style.marginLeft = left - width/2 + 'px';
							sample.style.marginLeft = '3px';
							sample.style.marginTop = top  + 6 + 'px';
							sample.style.opacity = 0;
							
							//COLOR variables
							var rgb_str = color.style.backgroundColor.substr(4, color.style.backgroundColor.lastIndexOf(")")-4);
							var font_color = (rgb_str == '255, 255, 255') ? '#000' : '#fff';
							
							//insert color value text into sample
							sample.innerHTML = (BOOL_RGB_SWATCH) ? rgb_str : ConvertRGBtoHex(color.style.backgroundColor);
							sample.style.color = Eval_Swatch_Luminosity(rgb_str);
							
						document.getElementById('palette_frame').appendChild(sample);	
						FadeOpacity(sample, 100, 0, 2, 5);
				}
				
				function Eval_Swatch_Luminosity(rgb_str){
						var r = parseInt(rgb_str.substr(0, rgb_str.indexOf(',')));
							rgb_str = rgb_str.slice(rgb_str.indexOf(',')+1);
						var g = parseInt(rgb_str.substr(0, rgb_str.indexOf(','))); 
							rgb_str = rgb_str.slice(rgb_str.indexOf(',')+1);
						var b = parseInt(rgb_str);
						
						var bool_color = (r>180 && g>180 && b>180) ? 'black' : 'white';
						return bool_color;
				}
				
				function ConvertRGBtoHex(color){
				// converts hex code to rgb mode for MOZILLA
						if (color.substr(0,1) == '#') { return color;}
						
						var RGBstring = color.substr(4, color.lastIndexOf(")")-4);
						var RGBcolor = '#';
						for (var i=0; i < 3; i++){
								var comp_color = ConvertDectoHex(parseInt(RGBstring));
								
								if (i != 2) 	{RGBstring = RGBstring.substr((RGBstring.indexOf(",")+1), 10);}
								RGBcolor += comp_color;
						}
						return RGBcolor;
				}
						function ConvertDectoHex(intValue){
						// takes an integer value and converts it into a hexadecimal string
						// at this stage this function only supports a two string Hexcode conversion for R, B or G component
								//alert(intValue);
								if (intValue != 0) {intValue--;}															// decrements number for slider purposes
								var hexValue  = (Math.floor(intValue/16) == 0) ? '0' : ConvertToHexChar(Math.floor(intValue/16));
								var remainder = (intValue%16 == 0) ? '0' : ConvertToHexChar((intValue%16)+1);
								var hexString = hexValue+""+(remainder);
								return hexString;
						}
						function ConvertToHexChar(intValue){
						// performs lookup table to convert decimal into hex characters 	
								if 		(intValue == 10) {var hexChar = 'A';}
								else if (intValue == 11) {var hexChar = 'B';}
								else if (intValue == 12) {var hexChar = 'C';}
								else if (intValue == 13) {var hexChar = 'D';}
								else if (intValue == 14) {var hexChar = 'E';}
								else if (intValue >= 15) {var hexChar = 'F';}
								else { 	var hexChar = intValue; }
								return hexChar;
						}
		
		function Append_Thumbnail(slider, thumb){
				var img = thumb.cloneNode(true);
				slider.appendChild(img);
		}
		//function Append_Image()
		
//* HELPER FUNCTIONS *//
//Indeded to remove a bit of DOM 
//Syntax stress on the script to allow it 
//to maintain more readable and concise
		function Clear_iFrame(){
		//function sets a timeout length to wait before the iframe content 
		//is refreshed to allow a new form to be created
				document.getElementById('iframe').src = 'iframe.html';
				BOOL_IFRAME = true;
		}
		
		function Remove_Element(this_element){
				this_element.parentNode.removeChild(this_element);
		}