//initialise the docking boxes manager
var manager = new dbxManager(
	'addrem',		// session ID [/-_a-zA-Z0-9/]
	'yes',			// enable box-ID based dynamic groups ['yes'|'no']
	'yes',			// hide source box while dragging ['yes'|'no']
	'button'		// toggle button element type ['link'|'button']
	);


//create a new docking boxes group
var purple = new dbxGroup(
	'purple', 		// container ID [/-_a-zA-Z0-9/]
	'vertical', 		// orientation ['vertical'|'horizontal'|'freeform'|'freeform-insert'|'confirm'|'confirm-insert']
	'7', 			// drag threshold ['n' pixels]
	'no',			// restrict drag movement to container/axis ['yes'|'no']
	'10', 			// animate re-ordering [frames per transition, or '0' for no effect]
	'yes', 			// include open/close toggle buttons ['yes'|'no']
	'open', 		// default state ['open'|'closed']

	'open', 		// word for "open", as in "open this box"
	'close', 		// word for "close", as in "close this box"
	'click-down and drag to move this box', // sentence for "move this box" by mouse
	'click to %toggle% this box', // pattern-match sentence for "(open|close) this box" by mouse
	'use the arrow keys to move this box. ', // sentence for "move this box" by keyboard
	'press the enter key to %toggle% this box. ',  // pattern-match sentence-fragment for "(open|close) this box" by keyboard
	'%mytitle%  [%dbxtitle%]' // pattern-match syntax for title-attribute conflicts
	);







//additional custom scripting for add/remove form
var frm = document.getElementById('addremove');
if(frm)
{
	//reset the form
	frm.reset();

	//bind a click handler to the form
	frm.onclick = function(e)
	{
		//if the target is an add/remove checkbox
		var target = e ? e.target : window.event.srcElement;
		if(target.id.indexOf('check-') != -1)
		{
			//get the id fragment relating to the box from its ID
			var id = target.id.replace('check-', '');

			//format expiry date
			var now = new Date();
			now.setTime(now.getTime() + (365*24*60*60*1000));

			//if it's checked we want to add a box
			if(target.checked)
			{
				//make a new xmlhttp request
				var request = xmlhttp();
				if(request)
				{
					//get the text from inside the label span
					//save the text, then change it to say loading
					//*** this is a dependency on the HTML layout of the demo form
					var label = target.parentNode.getElementsByTagName('span')[0].firstChild;
					var text = label.nodeValue;
					label.nodeValue = 'Loading ...';

					//check the group container exists and return if not
					var container = document.getElementById('purple');
					if(!container) { return; }

					//when the request completes
					request.onreadystatechange = function()
					{
						if(request.readyState == 4
							&& /^(200|304)$/.test(request.status.toString()))
						{
							//add the box
							container.innerHTML += request.responseText;

							//restore the label text
							label.nodeValue = text;

							//add its token to state string and save to cookie
							state += id + ',';
							document.cookie = 'addrem=' + state + '; expires=' + now.toGMTString() + '; path=/';

							//if the dbx script is supported, refresh the group
							if(manager.supported) { purple.refresh(false); }
						}
					}
					//get the include file, including a rnd query string so its doesn't cache
					request.open('GET', 'includes/' + id + '.inc?rnd=' + new Date().getTime(), true);
					request.send(null);
				}
			}

			//if it's not checked we're removing a box
			else
			{
				//if the specified box exists
				var include = document.getElementById(id);
				if(include)
				{
					//remove the box
					include.parentNode.removeChild(include);

					//remove its token from the state string and save to cookie
					state = state.replace(id + ',', '');
					document.cookie = 'addrem=' + state + '; expires=' + now.toGMTString() + '; path=/';

					//if the dbx script is supported, refresh the group
					if(manager.supported) { purple.refresh(false); }
				}
			}

		}
	};
}


	






//string for storing the boxes added to the column
//the default is empty, meaning no content
var state = '';

//pointer value is used to track a sequence of xmlhttp requests
//so that we know whether we're done
var pointer = 0;


//make an xmlhttp request
function xmlhttp()
{
	//try to establish a request
	var request = null;
	if(typeof window.ActiveXObject != 'undefined')
	{
		try { request = new ActiveXObject('Microsoft.XMLHTTP'); }
		catch(err) { request = null; }
	}
	else if(typeof window.XMLHttpRequest != 'undefined')
	{
		request = new XMLHttpRequest();
	}

	//return the request or null for failure
	return request;
}


//make a request for HTML from an array of file tokens
//referred to with the pointer index
//we have to do it this way - trigger each load from the readyness of the previous
//because we can't refer internally to a request as "this"
//if we could, we could just start a whole bunch of threads at one time
function getHTML(tokens)
{
	//check the group container exists
	var container = document.getElementById('purple');
	if(!container) { return; }

	//make a new xmlhttp request
	var request = xmlhttp();
	if(request)
	{
		request.onreadystatechange = function()
		{
			if(request.readyState == 4
				&& /^(200|304)$/.test(request.status.toString()))
			{
				//add the box
				container.innerHTML += request.responseText;

				//get its token from its ID and add to state string
				//*** this is a dependency on knowing that
				//*** the first 'id="' in the include is the box's ID
				var token = request.responseText.split('id="')[1];
				token = token.split('"')[0];
				state += token + ',';

				//look for a checkbox with this token, and check it
				var checkbox = document.getElementById('check-' + token);
				if(checkbox) { checkbox.checked = true; }

				//increase the pointer
				pointer++;

				//if the pointer has reached the end of the tokens array
				//refresh the group and recover the cookie state, and we're done
				if(pointer == tokens.length)
				{
					//.. if the dbx script is supported
					if(manager.supported) { purple.refresh(true); }
				}

				//otherwise recur
				else
				{
					getHTML(tokens);
				}
			}
		}

		//get the include file, including a rnd query string so its doesn't cache
		request.open('GET', 'includes/' + tokens[pointer] + '.inc?rnd=' + new Date().getTime(), true);
		request.send(null);
	}
}








//check if we have a cookie with addrem data
if(document.cookie && document.cookie.indexOf('addrem=') != -1)
{
	//split into values and throw away the last one
	//which will be empty because of the trailing comma
	var cookie = document.cookie.split('addrem=')[1].split(';')[0].split(',');
	cookie.splice(cookie.length - 1, 1);

	//get the HTML for these values
	getHTML(cookie);
}