//Proudly created in Notepad by Ranger Fox
//	Statbar Modifier, index page code.  This runs the main page's statbar-building functionality.
//	Hello to people who look at source code.  I create the accordion panels in the way I do because creating all the HTML server-side
//		would result in a larger-size HTML page.  I'm trying to make the page load fast with as many images as I want, so I have
//		determined this is the best way.  If you have any suggestions, please email me.

var prevsection = '';
var didislogo = false;
var didisnotlogo = false;
function prep(h,start,end,islogo)
{
	//So an exception doesn't happen.
	//if (prevsection != '')
	//{
	//	$(prevsection).innerHTML = '';
	//	break;
	//}
	


	if (h == null) { return; }
	
	var c;
	try { c = (islogo ? $(h.id.replace('_header','_items')) : $(h.id.replace('_bkgheader','_bkgitems'))); } catch (ex) { return; }

	prevsection = c;


	var imgarray = (islogo ? overlayArray : backgroundArray);
	var txtarray = (islogo ? nameArray : backgroundNameArray);
	

	if (c.innerHTML.length < 4)
	{
		var x=0; var s='';
		var template = (islogo ? 
				"<div class='i' align=center ><img src=overlays/{0} onclick='SelectImage(this);' title='{1}' style='cursor:pointer' /></div>"
				:
				"<div class='ibkg' align=center ><img src=backgrounds/{0} onclick='SelectBackground(this);' title='{1}' style='cursor:pointer' class='bkg' /></div>"
				);
		//A spacer is used for very long logos.
		var spacer = "<div class='i' align=center>&nbsp;</div>";
		for(x=start;x<=end;x++)
		{
			var t = '';
			//if (overlayArray[x].length != 0)
			if (imgarray[x].length != 0)
			{
				t = template.replace('{0}',imgarray[x]).replace('{1}',txtarray[x]);
				if (SelectedImage() == imgarray[x])
					t = t.replace("<img","<img class=border");
				
				if (imgarray.length > x+1)
					if (imgarray[x+1].length == 0)
					{
						t = t.replace('align=center >','style="width:290px" align=left >');
						x++;
					}
			}
			//else
			//	t = spacer;
				
			s += t;
		}
		
		c.innerHTML = s;
	}
	
}




//The function that puts all the HTML into the elements that make the statbar and user example code appear on the page.
//AJAX is not necessary for this.
function MakeImage()
{
	var t = document.getElementById('txtURL').value;
	guid = getGUID(t);
	
	if (document.getElementById('txtURL').value.length < 15) { alert('You need to enter your statbar URL.'); return; }
	//if (previmg == null) { alert("You'll need to select an image if you'd like to see the new statbar."); return; }
	
	var txt = document.getElementById('txtmsg').value;
	txt = URLEncode(txt);
	
	var template = document.getElementById('serverName').innerHTML + 'logo.aspx?uid={0}&txt={1}';
	document.getElementById('txtmsg').value = document.getElementById('txtmsg').value.replace("'","");
	var url = template.replace('{0}',guid).replace('{1}',txt);
	
	if (SelectedImage() != null)
		if (SelectedImage() != '')
			url += '&img=' + SelectedImage();
			
	if (SecondImage() != null)
		if (SecondImage() != '')
			url += '&img2=' + SecondImage();
			
			
			
	/*<!--
	statbarwidth, statbarheight, statbarcolor, statbartop, statbarleft, statbarbkgindent, statbarimgleft, statbarimgtop
	-->*/		
	if (BackgroundImage() != null)
	{
		if (BackgroundImage() != '')
		{
			url += '&bkg=' + BackgroundImage();
			url += Append('width',$('statbarwidth').value);
			url += Append('height',$('statbarheight').value);
			url += Append('color',$('statbarcolor').value);
			url += Append('top',$('statbartop').value);
			url += Append('left',$('statbarleft').value);
			url += Append('bkgindent',$('statbarbkgindent').value);
			url += Append('imgleft',$('statbarimgleft').value);
			url += Append('imgtop',$('statbarimgtop').value);
			url += Append('img2left',$('statbarimg2left').value);
			url += Append('img2top',$('statbarimg2top').value);
			
			if (!$('chkUseBorder').checked)
				url += '&border=false';
		}
	}
			
			
			

	if ($('chkWaymark').checked)
		url += '&wm=true';
			
	
	document.getElementById('lblImage').innerHTML = "<img src='" + url + "' />";
	document.getElementById('lblImageURL').innerHTML = url;
	
	document.getElementById('lblImageURL').innerHTML += "<br><br>&lt;img src=&quot;" + url + "&quot; /&gt;";

	
	var staticurl = url;
	while(staticurl.indexOf('=') != -1)
		staticurl = staticurl.replace('=','_');
	while(staticurl.indexOf('&') != -1)
		staticurl = staticurl.replace('&','___');
	while(staticurl.indexOf('+') != -1)
		staticurl = staticurl.replace('+','__');
		
	staticurl = staticurl.replace('logo.aspx?','');

		
	document.getElementById('lblStaticURL').innerHTML = '<b><u>' + dynamicURL + ':</u></b><br><font color=red>' + 
		staticurl + '.aspx</font><br><font size=1 ><i>Not for use yet with statbars that have backgrounds</i></font><br>' +
		'<br><br>' + orUseFollowing + ':<br>&lt;embed src=' + url + ' &gt;&lt;/embed&gt;';

		//
}
function Append(id,val)
{
	if (val != null)
		if (val.length != 0)
			return '&' + id + '=' + val;
	return '';
}

var previmg=null;
var secondimage=null;
//Applies the highlight class to the selected image and removes that class from the previously selected image.
function SelectImage(img)
{
	var i; //the selected image object
	var l; //the first or second logo object at the top
	var d; //the logo's div
	if ($('rdoFirst').checked)
	{	i = previmg; l = $('firstLogo'); d = $('firstLogoDiv'); $('removeLeft').style.display = 'inline'; $('statbarimgleft').disabled = false; $('statbarimgtop').disabled = false; }
	else 
	{	i = secondimage; l = $('secondLogo'); $('removeRight').style.display = 'inline'; d = $('secondLogoDiv'); $('statbarimg2left').disabled = false; $('statbarimg2top').disabled = false; }
	
	if (i != null)
		i.className = 'noborder';
		
		
		
	i = img;
	i.className = 'border';
	l.style.display = 'inline';
	l.src = i.src;
	
	
	d.style.width = (i.width > 100 ? i.width : 100);
	//d.style.width = i.width + 10;
	//$('removeRight').style.left = $('firstLogo').style.left;
	
	
	if ($('rdoFirst').checked)
	{	previmg = img; }
	else 
	{	secondimage = img; }
	
	$('logoDiv').width = (previmg != null ? (previmg.width > 150 ? previmg.width : 150) : 150) + (secondimage != null ? (secondimage.width > 150 ? secondimage.width : 150) : 150);
	//alert($('logoDiv').width);
}
//clears the second selected logo
function ClearFirst()
{
	$('removeLeft').style.display = 'none';
	$('firstLogo').style.display = 'none';
	$('firstLogo').src = '';
	$('firstLogoDiv').style.width = 120;
	previmg.className = 'noborder';
	previmg = null;
	
	$('rdoSecond').checked = false;
	$('rdoFirst').checked = true;
	
	$('statbarimgleft').value = '';
	$('statbarimgtop').value = '';
	$('statbarimgleft').disabled = true;
	$('statbarimgtop').disabled = true;
}
//clears the second selected logo
function ClearSecond()
{
	$('removeRight').style.display = 'none';
	$('secondLogo').style.display = 'none';
	$('secondLogo').src = '';
	$('secondLogoDiv').style.width = 120;
	secondimage.className = 'noborder';
	secondimage = null;
	
	$('rdoSecond').checked = false;
	$('rdoFirst').checked = true;
	
	$('statbarimg2left').value = '';
	$('statbarimg2top').value = '';
	$('statbarimg2left').disabled = true;
	$('statbarimg2top').disabled = true;
}
//clears the background
function ClearBackground()
{
	$('removeBackground').style.display = 'none';
	$('background').style.display = 'none';
	$('background').src = '';
	$('backgroundDiv').style.width = 120;
	selbkg.className = 'noborder bkg';
	selbkg = null;
	
	$('backgroundFormatting').style.display = 'none';
	
	//$('rdoSecond').checked = false;
	//$('rdoFirst').checked = true;
}
//Gets the image name of what was selected.
function SelectedImage()
{
	if (previmg == null) return '';
	
	var u = previmg.src.replace('.jpg','').replace('.png','');
	u = u.substring(u.lastIndexOf('/') + 1);
	return u;
}
function SecondImage()
{
	if (secondimage == null) return '';
	
	var u = secondimage.src.replace('.jpg','').replace('.png','');
	u = u.substring(u.lastIndexOf('/') + 1);
	return u;
}
//Gets the user's GUID from a string
function getGUID(s)
{
	if (s.indexOf("/") == -1) return s;
	s = s.substring(s.indexOf("uid=") + 4);
	if (s.indexOf("&") == -1) return s;
	return s.substring(0,s.indexOf("&")-1);
}
function BackgroundImage()
{
	if (selbkg == null) return '';
	
	var u = selbkg.src.replace('.jpg','').replace('.png','');
	u = u.substring(u.lastIndexOf('/') + 1);
	
	return u;
}








var selbkg = null;
function SelectBackground(img)
{
	var i; //the selected image object
	var l; //the first or second logo object at the top
	var d; //the logo's div
	
		i = selbkg; l = $('background'); d = $('backgroundDiv'); 
	
	
	if (i != null)
		i.className = 'noborder bkg';
		
	
		
		
	i = img;
	i.className = 'border bkg';
	l.style.display = 'inline';
	l.src = i.src;
	l.className = 'bkgselected';
	
	
	d.style.width = '150px';
	//d.style.width = i.width + 10;
	//$('removeBackground').style.left = $('firstLogo').style.left;
	$('removeBackground').style.display = 'inline';
	
	
	selbkg = img;
	
	$('backgroundFormatting').style.display = 'inline';
	
	//$('logoDiv').width = (previmg != null ? (previmg.width > 150 ? previmg.width : 150) : 150) + (secondimage != null ? (secondimage.width > 150 ? secondimage.width : 150) : 150);
	//alert($('logoDiv').width);
	
	
	$('statbarimgleft').disabled = previmg == null;
	$('statbarimgtop').disabled = previmg == null;
	
	$('statbarimg2left').disabled = secondimage == null;
	$('statbarimg2top').disabled = secondimage == null;
}
function PopulateBackgroundDefaults()
{
	if (selbkg == null) return;
	
	//Clear
	ClearBackgroundOptions();
	
	//Find the background image's index:
	var idx = 0;
	for (idx=0;idx<backgroundArray.length;idx++)
	{	
		if (selbkg.src.indexOf(backgroundArray[idx]) != -1)
			break;
	}
	
	//Get the defaults:
	var defaults = backgroundDefaultsArray[idx].split('&');
	$('chkUseBorder').checked = true;
	
	for (var x=0; x<defaults.length; x++)
	{
		var item = defaults[x].split('=');
		switch(item[0])
		{
			case 'width': $('statbarwidth').value = item[1]; break;
			case 'height': $('statbarheight').value = item[1]; break;
			case 'top': $('statbartop').value = item[1]; break;
			case 'left': $('statbarleft').value = item[1]; break;
			case 'bkgindent': $('statbarbkgindent').value = item[1]; break;
			case 'color': $('statbarcolor').value = item[1]; break;
			case 'imgleft': $('statbarimgleft').value = item[1]; break;
			case 'imgtop': $('statbarimgtop').value = item[1]; break;
			case 'img2left': $('statbarimg2left').value = item[1]; break;
			case 'img2top': $('statbarimg2top').value = item[1]; break;
			case 'border': $('chkUseBorder').checked = item[1] == 'true'; break;
			default: break;
		}
	}
}

function ClearBackgroundOptions()
{
	$('statbarwidth').value = '';
	$('statbartop').value = '';
	$('statbarheight').value = '';
	$('statbarleft').value = '';
	$('statbarbkgindent').value = '';
	$('statbarcolor').value = '000000';
	$('statbarimgleft').value = '';
	$('statbarimg2left').value = '';
	$('statbarimgtop').value = '';
	$('statbarimg2top').value = '';
}