//*****************************************************************************
// 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 = $(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 = $(nodes[i]).getProperty('id');
						
						flavours.bindEventsForElement(id, events);
					}
				}
		);
	}

}

flavours.ui.initCalendar = function(options) {
	
	var opt = {};
	opt[options.element] = 'Y-m-d 00:00:00';
	new Calendar(opt, { direction: 0, tweak: { x: 6, y: 0 }});
}

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

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

flavours.ui.setWaitCursor = function(options)
{
	$(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,formatselect,fontselect,fontsizeselect",
		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 : 'Bold text', inline : 'b'},
			{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
			{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
			{title : 'Example 1', inline : 'span', classes : 'example1'},
			{title : 'Example 2', inline : 'span', classes : 'example2'},
			{title : 'Table styles'},
			{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
		],

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

}


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

		height : options.height != null ? options.height : "350",
		width : options.width != null ? options.width : "400",


		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,formatselect,fontselect,fontsizeselect",
		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 : 'Bold text', inline : 'b'},
			{title : 'Red text', inline : 'span', styles : {color : '#ff0000'}},
			{title : 'Red header', block : 'h1', styles : {color : '#ff0000'}},
			{title : 'Example 1', inline : 'span', classes : 'example1'},
			{title : 'Example 2', inline : 'span', classes : 'example2'},
			{title : 'Table styles'},
			{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
		],

		// 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 = $(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 = $(options.element);
	if(element == null) alert('Could not init VerticalScrollPanel, element ' + options.element + ' is null');
	*/
	var container = $(options.container);
	if(container == null) return;
	var track = $(options.track);
	var thumb = $(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 = $(options.element);
	if(element == null) alert('Could not init VerticalScrollPanel, element ' + options.element + ' is null');
	*/
	var container = $(options.container);
	if(container == null) return;
	var children = container.getChildren('div');
	var track = $(options.track);
	var thumb = $(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 = $(options.element);
	if(element == null) alert('Could not init StackNavigation, element ' + options.element + ' is null');
	var content = $('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 = $(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 = $(options.element);
	if(element == null) alert('Could not resize StackNavigation, element is null');
	
	var view = element.views[element.viewStack[element.viewStack.length-1]];
	var newHeight = view.clientHeight + (10);
	var parent = element.getParent();
	var resizeEffect = new Fx.Morph(parent, {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
	
	resizeEffect.start({
		'height':newHeight
	});
	
}

flavours.ui.StackNavigation.pushView = function(options) {
	var element = $(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', 0);
		
		var newHeight = view.clientHeight + (10);
		var parent = element.getParent();
		parent.setStyle('height', newHeight);
		
		var myEffect2 = new Fx.Morph($('content'), {duration: 'normal', transition: Fx.Transitions.Linear});
		myEffect2.start({
			'opacity': 1
		});
	
	} else
	{
		var view = element.views[options.view];
		var newHeight = view.clientHeight + (10);
		var parent = element.getParent();
		var resizeEffect = new Fx.Morph(parent, {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
		
		resizeEffect.addEvent('complete', function() {
			// slide out the previous view
			var myEffect = new Fx.Morph(element.viewStack[element.viewStack.length-1], {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
			myEffect.start({
				'left':[0,-element.parentNode.clientWidth]
				});
			
			element.viewStack.push(options.view);
			view.setStyle('left', element.parentNode.clientWidth);
			
			var myEffect2 = new Fx.Morph(element.viewStack[element.viewStack.length-1], {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
			myEffect2.start({
				'left':[element.parentNode.clientWidth,0]
			});
		});
		
		(function(){resizeEffect.start({
			'height':newHeight
		});}).delay(50);

	}
	

}

flavours.ui.StackNavigation.popView = function(options) {
	
	var element = $(options.element);
	if(element == null) alert('Could not push view StackNavigation, element is null');
	
	if(element.viewStack.length > 1)
	{
		// slide out the previous view
		var myEffect = new Fx.Morph(element.viewStack[element.viewStack.length-1], {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
		
		
		myEffect.start({
			'left':[0,element.parentNode.clientWidth]
			});
		
		element.viewStack.pop();
		var view = element.views[element.viewStack[element.viewStack.length-1]];
		view.setStyle('left', -element.parentNode.clientWidth);
		
		var myEffect2 = new Fx.Morph(element.viewStack[element.viewStack.length-1], {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
		
		myEffect2.addEvent('complete', function() {

			var newHeight = view.clientHeight + (10);
			var parent = element.getParent();
			var resizeEffect = new Fx.Morph(parent, {duration: 'normal', transition: Fx.Transitions.Quad.easeInOut});
			resizeEffect.start({
				'height':newHeight
			});
		});
		
		myEffect2.start({
			'left':[-element.parentNode.clientWidth,0]
		});
		
	}

}

/****************************************************
 * 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 = $(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 = $(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 = $(options.element);
	if(element == null) alert('flavours.ui.Loader.start : element is null');
	
	var loader = new Element('div', { 'class' : 'loader'});
	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 = $(options.element);
	if(element == null) alert('flavours.ui.Loader.stop : element is null');
	
	var loader = element.getElement('.loader');
	
	var myEffect = new Fx.Morph(loader, {duration: 'short', transition: Fx.Transitions.Linear});
	myEffect.addEvent('complete', function() {
		loader.dispose();
		
	});
	
	myEffect.start({
		'opacity': 0.0
	})
	
}