//*****************************************************************************
// Copyright 2010 Flavours Interactive inc.
// All rights reserved.
//
// Flavours JavaScript UI.js
//
// brief : All the ui functions for rich interactive apps, requires core.js
//*****************************************************************************

/****************************************************
 * Object flavours.ui 
 * brief : ui namespace
 ****************************************************/

/****************************************************
 * Object flavours.ui 
 * brief : ui namespace
 ****************************************************/

flavours.ui = {};


flavours.ui.reload = function(options) {
	
	var element = document.id(options.element);
	if(element == null) alert('flavours.ui.reload : element is null');
	
	element.set('html', options.content);
	
	if(options.forceEventRebinding)
	{
		// rebind events
		flavours.loadEvents(
				function(events) {
					var nodes = element.getElements('a[id^=ui]');
					for(var i = 0; i<nodes.length ; i++)
					{
						var id = document.id(nodes[i]).getProperty('id');
						
						flavours.bindEventsForElement(id, events);
					}
				}
		);
	}

}

flavours.ui.windowPopup = function(options) {
	
	window.open(options.url,options.windowName); 
}

flavours.ui.fade = function(options)
{
	var element = document.id(options.element);
	element.fade(options.how);
}

flavours.ui.setWaitCursor = function(options)
{
	document.id(options.element).setStyle('cursor', 'progress');
}

flavours.ui.initAllTextArea = function(options)
{
	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "advanced",
		skin : "o2k7",
		skin_variant : "black",

		height : options.height != null ? options.height : "720",
		width : options.width != null ? options.width : "720",


		plugins : "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",

		// Theme options
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,media,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : false,

		// Example content CSS (should be your site CSS)
		content_css : options.content_css,

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Style formats
		style_formats : [
			{title : 'Title', block : 'h1'},
			{title : 'smallTitle', block: 'h3'},
			{title : 'Text', block : 'p'},
		],

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
}

flavours.ui.initCalendar = function(options)
{	
	var result = new Picker.Date(options.element, {
	    timePicker: true,
	    positionOffset: {x: 5, y: 0},
	    pickerClass: 'datepicker',
	    useFadeInOut: !Browser.ie,
	    format: '%Y-%m-%d %H:%M:%S'
	});
}

var mappers = [];
flavours.ui.initImageMapper = function(options)
{	
	mappers[options.element] = new flavours.ui.ImageMapper(options);
}

flavours.ui.getImageMapper = function(name)
{
	return mappers[name];	
}

flavours.ui.removeImageMapperElement = function(name, index)
{
	mappers[name].removeElement(index);	
}
	
flavours.ui.refreshImageMapperLinks = function(name)
{
	var thisMapper = mappers[name];
	var linksString = '[';
	
	Array.each(thisMapper.elements, function(element, index)
		{
			var container = document.id(thisMapper.prefix+'imageMapperImageContainer');
			var borderElement = document.id(thisMapper.prefix+'imageMapperElementBorder'+index);
			
			// make sure we get the good coords even if invisible by calling measure
			var coords = borderElement.measure(function()
				{
					return borderElement.getCoordinates(container);
				});
			
			var url = document.id(thisMapper.prefix+'imageMapperLinkURL'+index).value;
			var target = document.id(thisMapper.prefix+'imageMapperLinkTarget'+index).value;

			coords.left = Math.floor((coords.left-thisMapper.marginWidth) * thisMapper.scaleFactor);
			coords.top = Math.floor((coords.top-thisMapper.marginWidth) * thisMapper.scaleFactor);
			coords.width = Math.floor(coords.width * thisMapper.scaleFactor);
			coords.height = Math.floor(coords.height * thisMapper.scaleFactor);
			
			linksString += '{"x":"' + (coords.left) + '","y":"' + (coords.top) + '","width":"' + (coords.width-4) + '","height":"'+ (coords.height-4) + '","url":"'+ url + '","target":"' + target + '"}';
			
			if((index+1) != thisMapper.elements.length)
			{
				linksString += ', ';				
			}
		});
	
	linksString += ']';
	
	document.id(thisMapper.prefix + 'Links').setProperty('value', linksString);
}

flavours.ui.initSelectedTextAreas = function(options)
{	
	tinyMCE.init({
		// General options
        mode : "exact",
        elements : options.elements,
		theme : "advanced",
		skin : "o2k7",
		skin_variant : "black",

		height : options.height != null ? options.height : "720",
		width : options.width != null ? options.width : "720",

		plugins : "pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist",

		// Theme options
		theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,media,cleanup,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : false,

		// Example content CSS (should be your site CSS)
		content_css : options.content_css,

		// Drop lists for link/image/media/template dialogs
		template_external_list_url : "lists/template_list.js",
		external_link_list_url : "lists/link_list.js",
		external_image_list_url : "lists/image_list.js",
		media_external_list_url : "lists/media_list.js",

		// Style formats
		style_formats : [
			{title : 'Title', block : 'h1'},
			{title : 'smallTitle', block: 'h3'},
			{title : 'Text', block : 'p'},
		],

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
}

/****************************************************
 * Object flavours.ui.TableSort 
 * brief : 
 ****************************************************/

flavours.ui.TableSort = {};
flavours.ui.TableSort.init = function(options) {
	
	var element = document.id(options.element);
	if(element == null) alert('Could not init TableSort, element ' + options.element + ' is null');
	
	//var table = new MooTable(element, {'resizable':false });
	
}


/****************************************************
 * Object flavours.ui.VerticalScrollPanel 
 * brief : 
 ****************************************************/
flavours.ui.VerticalScrollPanel = {};
flavours.ui.VerticalScrollPanel.init = function(options) {
	
	/*var element = document.id(options.element);
	if(element == null) alert('Could not init VerticalScrollPanel, element ' + options.element + ' is null');
	*/
	var container = document.id(options.container);
	if(container == null) return;
	var track = document.id(options.track);
	var thumb = document.id(options.thumb);
	
	var containerHeight = container.getComputedSize().height;
	
	if(containerHeight <= track.getComputedSize().height)
	{
		track.setStyle('display','none');
	}
	else
	{
		track.setStyle('display','block');
	}
	
	var mySlider = new Slider(track, thumb, {
		'range' : [0,containerHeight-track.getComputedSize().height],
		'mode':'vertical',
		'wheel':true,
		'snap': true,
		'onChange': function(pos)
		{
			container.setStyle('top', (-pos));
	    },


		}
	);
	
}
flavours.ui.HorizontalScrollPanel = {};
flavours.ui.HorizontalScrollPanel.init = function(options) {
	
	/*var element = document.id(options.element);
	if(element == null) alert('Could not init VerticalScrollPanel, element ' + options.element + ' is null');
	*/
	var container = document.id(options.container);
	if(container == null) return;
	var children = container.getChildren('div');
	var track = document.id(options.track);
	var thumb = document.id(options.thumb);
	
	if(children.length < 1) return;
	
	
	// HACK
	var containerWidth = ((children[children.length-1].getComputedSize().width + 10) * children.length);
	//alert(children.length);
	
	if(containerWidth <= track.getComputedSize().width)
	{
		track.setStyle('display','none');
	}
	else
	{
		track.setStyle('display','block');
	}
	
	var mySlider = new Slider(track, thumb, {
		'range' : [0,containerWidth-track.getComputedSize().width],
		'mode':'horizontal',
		'wheel':true,
		'snap': true,
		'onChange': function(pos){
			container.setStyle('left', (-pos));
	    },


		}
	);
	
}

/****************************************************
 * Object flavours.ui.StackNavigation 
 * brief : use StackNavigation to push/pop view
 ****************************************************/

flavours.ui.StackNavigation = {};
flavours.ui.StackNavigation.init = function(options) 
{
	var element = document.id(options.element);
	if(element == null) alert('Could not init StackNavigation, element ' + options.element + ' is null');
	var content = document.id('content');
	content.setStyle('opacity',0);
	content.setStyle('visibility','visible');

	element.views = {};
	element.viewStack = [];
	var views = element.getElements('div.stackItem');

	for(var i = 0; i < views.length ; i++)
	{
		var view = document.id(views[i]);
		var id = view.getProperty('id');
		element.views[id] = view;
		
		view.setStyle('z-index', 50-i);
		view.setStyle('position','absolute');
		view.setStyle('top',0);
		view.setStyle('left',element.parentNode.clientWidth);
		view.setStyle('width', 710);
		//view.setStyle('margin-left', element.parentNode.clientWidth);
		
	}

	flavours.ui.StackNavigation.pushView({ 
										element:options.element,
										view : options.rootView	 
										});
	
}

flavours.ui.StackNavigation.resize = function(options) 
{
	var element = document.id(options.element);
	if(element == null) 
		alert('Could not resize StackNavigation, element is null');

	if(element.viewStack != null)
	{
		var oldView = document.id(element.viewStack[element.viewStack.length-1]);
		var newHeight = oldView.clientHeight + (10);
		var parent = element.getParent();
		parent.setStyle('height', newHeight+'px');
	}
}

flavours.ui.StackNavigation.pushView = function(options) 
{	
	var element = document.id(options.element);
	if(element == null) 
		alert('Could not push view StackNavigation, element is null');
	
	if(element.viewStack.length == 0)
	{
		var view = element.views[options.view];
		element.viewStack.push(options.view);
		view.setStyle('left', '0px');
		
		var newHeight = view.clientHeight + (10);
		var parent = element.getParent();
		parent.setStyle('height', newHeight+'px');
		
		var myEffect2 = new Fx.Morph(document.id('content'), {duration: 'normal', transition: Fx.Transitions.Linear});
		myEffect2.start({
			'opacity': 1
		});
	
	} 
	else
	{		
		// slide out the previous view
		var oldView = document.id(element.viewStack[element.viewStack.length-1]);
		oldView.setStyle('left', -element.parentNode.clientWidth+'px');
		
		var newView = element.views[options.view];
		element.viewStack.push(options.view);
		newView.setStyle('left', '0px');
		
		var newHeight = newView.getCoordinates().height + (10);
		var parent = element.getParent();
		parent.setStyle('height', newHeight+'px');
	}
}

flavours.ui.StackNavigation.popView = function(options) 
{
	var element = document.id(options.element);
	if(element == null) alert('Could not push view StackNavigation, element is null');
	
	if(element.viewStack.length > 1)
	{		
		var oldView = document.id(element.viewStack[element.viewStack.length-1]);
		oldView.setStyle('left', element.parentNode.clientWidth);
		
		element.viewStack.pop();
		var newView = document.id(element.views[element.viewStack[element.viewStack.length-1]]);
		newView.setStyle('left', '0px');
		
		var newHeight = newView.clientHeight + (10);
		var parent = element.getParent();
		parent.setStyle('height', newHeight+'px');
	}

}

/****************************************************
 * Object flavours.ui.TabbedForm
 * brief : makes a tab navigation out of a form with 
 * 		   fieldsets
 ****************************************************/

flavours.ui.TabbedForm = {};
flavours.ui.TabbedForm.init = function(options) {
	
	var element = document.id(options.element);
	if(element == null) alert('Could not init TabbedForm, element is null');
	
	element.addEvent('onTabChanged', function() {
		options.onChange();
	});
	
	var tabsobj = new Element('div', {'class':'tabs'});
	var tabbar = new Element('div');
	tabbar.inject(tabsobj);
	
	var fieldsets = element.getElements('fieldset');
	
	for(var i = 0; i < fieldsets.length; i++)
	{
		
		var fieldset = fieldsets[i];
		if(fieldset.getParent() != element) continue;
		fieldset.setStyle('position', 'relative');
		fieldset.setStyle('background', 'none');
		
		var legend = fieldset.getElements('legend')[0];
		
		
		var tabbutton = new Element('div', {'class': 'tab'});
		
		
		tabbutton.set('html', legend.get('html'));
		tabbutton.inject(tabbar);
		legend.dispose();
		
		var tabcontent = new Element('div', {'class': 'content'});
		fieldset.inject(tabcontent);
		tabcontent.inject(tabsobj);

		if(i == 0)
		{
			tabbutton.addClass('selected'); 
			tabcontent.setStyle('display', 'block');
		}
		
		
		tabbutton.addEvent('click', (function(mytab){
			return function(){
				var allcontent = tabsobj.getElements('div.content');
				for(var n = 0; n < allcontent.length; n++)
				{
					allcontent[n].setStyle('display', 'none');
				}
				
				var alltabs = tabsobj.getElements('div.tab');
				for(n = 0; n < alltabs.length; n++)
				{
					if(alltabs[n] != this)
					{
						alltabs[n].removeClass('selected');
					}
					else
					{
						alltabs[n].addClass('selected');
					}
					
				}
				mytab.setStyle('display', 'block');
				
				element.fireEvent('onTabChanged');
			};
			
		})(tabcontent));
		
	}
	
	tabsobj.inject(element);
	
}

flavours.ui.TabbedForm.reset = function(options) {
	
	var element = document.id(options.element);
	if(element == null) alert('Could not reset TabbedForm, element is null');
	
	var tabbutton = element.getElements('div.tab')[0];
	
	tabbutton.fireEvent('click');
}

/****************************************************
 * Object flavours.ui.Loader 
 * brief : use Loader to overlay a loader animation
 * 			on top a an element
 ****************************************************/
flavours.ui.Loader = {};
flavours.ui.Loader.start = function(options) {
	
	var element = document.id(options.element);
	if(element == null) alert('flavours.ui.Loader.start : element is null');
	
	var className = (options.hasOwnProperty('class'))? options['class'] : 'loader';
	
	var loader = new Element('div', {'id': options['element']+'Loader', 'class' : className});
	loader.setStyle('width', element.clientWidth);
	loader.setStyle('height', element.clientHeight);
	/*loader.setStyle('z-index', 1000);*/
	/*loader.setStyle('opacity', 0);*/
	loader.inject(element);
	
	var anim = new Element('div', { 'class' : 'anim'});
	anim.setStyle('width', loader.clientWidth);
	anim.setStyle('height', loader.clientHeight);
	
	anim.inject(loader);
	
	/*var myEffect = new Fx.Morph(loader, {duration: 'short', transition: Fx.Transitions.Linear});
	myEffect.start({
		'opacity': 1.0
	})*/
}

flavours.ui.Loader.stop = function(options) {
	
	var element = document.id(options.element);
	if(element == null) alert('flavours.ui.Loader.stop : element is null');
	
	var loader = document.id(options['element']+'Loader');
	if(loader == null) return;
	
	var myEffect = new Fx.Morph(loader, {duration: 'short', transition: Fx.Transitions.Linear});
	myEffect.addEvent('complete', function() {
		loader.dispose();
		
	});
	
	myEffect.start({
		'opacity': 0.0
	})
	
}

flavours.ui.customSelector = {};

flavours.ui.customSelector.updateValue = function(elementName, id)
{
	var checkBox = document.id(elementName+id);
	var inputField = document.id(elementName);
	
	// first, make sure we remove the existing value
	var values = inputField.value.split(',');
	for(var i = 0; i < values.length; i++)
	{
		if(values[i] == id)
		{
			values.splice(i,1);
		}
	}
	
	// next add the new checked value, if needed
	if(checkBox.checked)
		values.push(id);
	
	// finally, rebuild string and set inputField value
	var valueString = "";
	for(var i = 0; i < values.length; i++)
	{
		if(values[i] == '')
			continue;
		
		valueString += values[i];
		if(i < (values.length-1))
			valueString += ',';
	}
	inputField.value = valueString;
}