var currentElement = null;
var orderIndex = 0;
var dFunction = null;
var imageMenu = false;

function AddFrame(dObject)
{
	var dElement = GetElement(dObject);
	var url = dElement.src;
	var dId = dElement.alt;
	
	var workspace = document.getElementById('workspace');
	var frameBox  = document.createElement('p');
	var imageid   = document.createElement('input');
	var order     = document.createElement('input');
	var delay     = document.createElement('input');
	var frame     = document.createElement('img');
	var p         = document.createElement('p');

	frameBox.setAttribute('class', 'frameBox');

	p.setAttribute('class', 'separator');

	imageid.setAttribute('type', 'hidden');
	imageid.setAttribute('name', 'imageid[]');
	imageid.setAttribute('value', dId);
	
	order.setAttribute('class', 'order framer');
	order.setAttribute('type', 'text');
	order.setAttribute('title', 'Set the order');
	order.setAttribute('name', 'order[]');
	order.setAttribute('size', '2');
	order.setAttribute('value', orderIndex);
	
	orderIndex++;

	delay.setAttribute('class', 'delay framer');
	delay.setAttribute('type', 'text');
	delay.setAttribute('title', 'Set the delay');
	delay.setAttribute('name', 'delay[]');
	delay.setAttribute('size', '2');
	delay.setAttribute('value', '10');

	frame.setAttribute('src', url);
	frame.setAttribute('alt', 'frame');
	frame.setAttribute('title', 'Click to change or remove');
	frame.setAttribute('class', 'frame framer');

	// IE class fixers
	p.className        = 'separator';
	frameBox.className = 'frameBox';
	order.className    = 'order framer';
	delay.className    = 'delay framer';
	frame.className    = 'frame framer';

	SetListener(frame, 'click', OpenFrameMenu);
	
	frameBox.appendChild(order);
	frameBox.appendChild(frame);
	frameBox.appendChild(delay);
	frameBox.appendChild(imageid);

	workspace.appendChild(p);
	workspace.appendChild(frameBox);
}

function AddFrames(dObject)
{
	dFunction = 'AddFrame';
	SetImageListeners();
	currentElement = GetElement(dObject);
	OpenImageMenu();
}

function ChangeAFrame()
{
	dFunction = 'ChangeFrame';
	SetImageListeners();
	OpenImageMenu();
}

function SetImageListeners()
{
	var imgArr = document.getElementsByTagName('img');
	var error = false;
	for(var i = 0; i < imgArr.length; i++)
	{
		if(imgArr[i].className == 'ImageChoice')
		{
			if(dFunction == 'AddFrame')
				SetListener(imgArr[i],  'click', AddFrame);
			else if(dFunction == 'ChangeFrame')
				SetListener(imgArr[i],  'click', ChangeFrame);
			else
			{
				if(error == false)
					error = true;
			}
		}
	}
	
	if(error == true)
		alert("Set failed: "+dFunction);
}

function UnsetImageListeners()
{
	var imgArr = document.getElementsByTagName('img');
	var error = false;
	for(var i = 0; i < imgArr.length; i++)
	{
		if(imgArr[i].className == 'ImageChoice')
		{
			if(dFunction == 'AddFrame')
				UnsetListener(imgArr[i],  'click', AddFrame);
			else if(dFunction == 'ChangeFrame')
				UnsetListener(imgArr[i],  'click', ChangeFrame);
			else
			{
				if(error == false)
					error = true;
			}
		}
	}
	
	if(error == true)
		alert("Unset failed: "+dFunction);
}

function ChangeFrame(dObject)
{
	var dElement = GetElement(dObject);
	if( ! dElement)
		return;

	currentElement.src = dElement.src;
	var arr = currentElement.parentNode.childNodes;
	for(var i = 0; i < arr.length; i++)
	{
		if(arr[i].name == 'imageid[]')
		{
			arr[i].value = dElement.alt;
			break;	
		}
	}
	CloseImageMenu();
}

function FindPosX(dElement)
{
	var curleft = 0;
	if(dElement.offsetParent) 
	{
		do 
		{
			curleft += dElement.offsetLeft;
		} 
		while (dElement = dElement.offsetParent);
	}
	return curleft;	
}

function FindPosY(dElement)
{
	var curtop = 0;
	if(dElement.offsetParent) 
	{
		do 
		{
			curtop += dElement.offsetTop;
		} 
		while (dElement = dElement.offsetParent);
	}
	return curtop;	
}

function OpenFrameMenu(dObject)
{
	if(imageMenu == true)
		CloseImageMenu();
	
	currentElement = GetElement(dObject);
	if( ! currentElement)
		return;
	
	var x = FindPosX(currentElement) + 52;
	var y = FindPosY(currentElement);
	
	var dElement           = document.getElementById('frameMenu');
	dElement.style.left    = x + 'px';
	dElement.style.top     = y + 'px';
	dElement.style.display = 'block';
}

function CloseFrameMenu()
{
	var dElement           = document.getElementById('frameMenu');
	dElement.style.display = 'none';
}

function DeleteFrame()
{
	UnsetListener(currentElement, 'click', OpenFrameMenu);

	var pNode  = currentElement.parentNode;
	var ppNode = pNode.parentNode;
		ppNode.removeChild(pNode.previousSibling);
		ppNode.removeChild(pNode);
		
	orderIndex--;
	CloseFrameMenu();
}

function OpenImageMenu()
{
	imageMenu = true;
	var x = FindPosX(currentElement);
	var y = FindPosY(currentElement) + 20;
	
	var dElement           = document.getElementById('imageMenu');
	dElement.style.left    = x + 'px';
	dElement.style.top     = y + 'px';
	dElement.style.display = 'block';
	
	CloseFrameMenu();
}

function CloseImageMenu()
{
	var dElement           = document.getElementById('imageMenu');
	dElement.style.display = 'none';
	imageMenu = false;
	
	UnsetImageListeners();
	listenerType = null;
}

function CheckFrames(dObject)
{
	if(document.forms[0].elements.length < 9)
	{
		StopDefault(dObject);	
	}
}

function init()
{
	SetListener(document.getElementById('addFrame'),    'click', AddFrames);
	SetListener(document.getElementById('frameDelete'), 'click', DeleteFrame);
	SetListener(document.getElementById('frameChange'), 'click', ChangeAFrame);
	SetListener(document.getElementById('frameClose'),  'click', CloseFrameMenu);
	SetListener(document.getElementById('imageMenuClose'), 'click', CloseImageMenu);
	SetListener(document.getElementById('preview'), 'click', PreviewAnimation);
	SetListener(document.getElementById('anyForm'), 'submit', CheckFrames);
	GetFrames();
}
SetListener(window, 'load', init);

/* AJAX */ 
function PreviewAnimation(dObject)
{
	if(orderIndex < 2)
	{
		return;
	}	
	
	var obj = document.getElementById('anyShow');
	obj.src = '/graphic/loading.gif';
	obj.style.display = 'block';
	
	StopDefault(dObject);
	var xmlhttp = GetXMLHttpRequest();
	var serverPage = '/php/anypimpy/CreateAnimation.php';
	var queryString = GetQueryString();

	xmlhttp.open('post', serverPage, true);
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	
	xmlhttp.onreadystatechange = function()
	{
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
		{
			if(xmlhttp.responseText == 'success')
			{
				obj.src = '/graphic/anypimpy/AnyPimpy.gif?' + Math.random();
			}
			else
			{
				obj.style.display = 'none';
				alert('An error occured, try again!');
			}
		}
	}
	xmlhttp.send(queryString);
}

function GetFrames()
{
	var xmlhttp = GetXMLHttpRequest();
	var serverPage = '/php/anypimpy/GetFrames.php';

	xmlhttp.open('post', serverPage, true);
	xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	
	xmlhttp.onreadystatechange = function()
	{
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
		{
			document.getElementById('imageList').innerHTML = xmlhttp.responseText;
		}
	}
	xmlhttp.send(null);
}