//initialise the docking boxes manager
var manager = new dbxManager(
	'grid-controls',			// 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 new docking boxes group
var purple = new dbxGroup(
	'purple', 		// container ID [/-_a-zA-Z0-9/]
	'freeform', 	// orientation ['vertical'|'horizontal'|'freeform'|'freeform-insert'|'confirm'|'confirm-insert']
	'10', 			// 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
	);

//copy to global reference, if present
if(typeof boxgroup != 'undefined') { boxgroup = purple; }





//additional custom scripting for the controls form
var frm = document.getElementById('swapform');
if(frm)
{
	//bind a submit handler
	frm.onsubmit = function()
	{
		//get the box references and split by commas
		//(if the collections are different lengths, the first reference(s) will be used)
		var ref1 = this['ref1'].options[this['ref1'].options.selectedIndex].value.split(',');
		var ref2 = this['ref2'].options[this['ref2'].options.selectedIndex].value.split(',');

		//get the value of the fn selector
		var fn = this['fn'].options[this['fn'].options.selectedIndex].value;

		//for each box reference
		for(var i=0; i<ref1.length; i++)
		{
			//switch by the value of the fn selector
			//there's no need to test these against manager.supported
			//because the functions themselves will handle that
			switch(fn)
			{
				//open a box
				case 'open' :
					purple.toggle(ref1[i], 'open');		//also supports (ref, true)
					break;

				//close a box
				case 'close' :
					purple.toggle(ref1[i], 'close');	//also supports (ref, false)
					break;

				//toggle a box
				case 'toggle' :
					purple.toggle(ref1[i], 'toggle');	//also supports (ref, null)
					break;

				//swap two boxes
				case 'swap' :
					purple.swap(ref1[i], ref2[i]);
					break;
					
				//insert one box before/after another
				case 'insert' :
					var option = this['option'].options[this['option'].options.selectedIndex].value;
					if(ref2[i] != '-')
					{
						//second argument can be true|false or "before"|"after"
						purple.insert(ref1[i], option, ref2[i]);	
					}
					else	
					{
						//missing (or null) second reference (third argument) 
						//means insert before/after with respect to the whole group
						purple.insert(ref1[i], option);	
					}
					break;
			}
		}

		//don't submit the form in the normal way
		return false;
	};

	//bind a change handler to the fn selector
	//to modify the with and option fields as necessary
	frm['fn'].onchange = function()
	{
		var fn = this.options[this.options.selectedIndex].value;
		if(fn == 'swap')
		{
			frm['option'].selectedIndex = 0;
			frm['option'].disabled = true;
			frm['ref2'].disabled = false;
		}
		else if(fn == 'insert')
		{
			if(frm['option'].selectedIndex == 0)
			{
				frm['option'].selectedIndex = 1;
			}
			frm['option'].disabled = false;
			frm['ref2'].disabled = false;
		}
		else
		{
			frm['option'].disabled = true;
			frm['ref2'].disabled = true;
		}
	};
}


//additional scripting for the move form
var mfrm = document.getElementById('moveform');
if(mfrm)
{
	//bind a submit handler
	mfrm.onsubmit = function()
	{
		//get the box reference and split by commas
		var ref = this['ref'].options[this['ref'].options.selectedIndex].value.split(',');

		//get the value of the action selector
		var action = this['action'].options[this['action'].options.selectedIndex].value;

		//get the dir value
		var dir = this['dir'].options[this['dir'].options.selectedIndex].value;

		//for each box reference
		for(var i=0; i<ref.length; i++)
		{
			//switch by action
			switch(action)
			{
				//move a box
				case 'move' :
					purple.move(ref[i], dir);		//supports compass letters "N", "Ne", "E" etc.
					break;							//or compass words "north", "north-west", "east" etc.
													//or direction words "up", "up-right", "right" etc.
			}
		}

		//don't submit the form in the normal way
		return false;
	}
}