/** Dynamic functions for the news page of KMB **/

/*  (c) 2009 S. Teuber, Düsseldorf */

var KMB_helpers = {

	// Toggle the graphical checkboxes (on click)
	toggleCb : function () {
		var cb = this.getElement('input');
		if (cb.checked) {
			cb.checked = false;
			this.setStyle('background-image', 'url(fileadmin/system/kmb09/media/cb_off.gif)');
		} else {
			cb.checked = true;
			this.setStyle('background-image', 'url(fileadmin/system/kmb09/media/cx_on.gif)');
		}
		return false;
	},

	// Substitute checkboxes with a graphical image
	substituteCheckboxes : function () {
		if ($('tx_ttnews_amenu_select')) {
			var catMenu = $('tx_ttnews_amenu_select');
			$$(catMenu.getElementsByTagName('input')).each(
				function (e) {
					if (e.type == 'checkbox') {
						// Hide checkbox
						e.setStyle('visibility', 'hidden');

						// Get background image
						if (e.checked) {
							e.getParent().setStyle('background', 'url(fileadmin/system/kmb09/media/cx_on.gif) top left no-repeat');
						} else {
							e.getParent().setStyle('background', 'url(fileadmin/system/kmb09/media/cb_off.gif) top left no-repeat');
						}

						// Make div clickable
						e.getParent().addEvent('click', KMB_helpers.toggleCb);
						e.getParent().setStyle('cursor', 'pointer');

					}
				}
			);
		}
	},

	// Get relative font size / line height for item collapse
	getItemHeight : function(e) {
		// get the target height from the line-height of the headline. Reason:
		// the whole page is set up with em instead of px to be scaleable, so
		// we actually do not know how high the element must be to cover three lines of text.
		var itemHeight = e.getElement('h2').getStyle('line-height').toInt() * 3;

		// IE needs 4 lines for some reason
		if (Browser.Engine.trident) {
			itemHeight = e.getElement('h2').getStyle('line-height').toInt() * 4;
		}

		// Opera. wtf? It doesn't get the line-height?
		if (Browser.Engine.presto) {
			itemHeight = 60;
		}

		return itemHeight;
	},

	// Toggle calendar items (fold out / in)
	toggleItem : function() {
		// The element to toggle is always the nearest parent which
		// matches the selector "div.news-list-item". This way we can
		// handle clicks on everything inside this div, no matter if
		// the click was registered on a deeply embedded p or on a high
		// level div.
		var element = this.getParent('div.news-list-item');
		var size = element.getScrollSize();
		var itemHeight = KMB_helpers.getItemHeight(element);

		var elTween = new Fx.Morph(element);

		if ((element.getStyle('height').toInt() == itemHeight) || (Browser.Engine.presto && element.getStyle('height').toInt() <= 81)) {
			// fold out
			elTween.start({
				'height': [element.getStyle('height').toInt(), size.y - 20]
			});
			element.getElement('div.arrow').setStyle('background-image', 'url(fileadmin/system/kmb09/media/arrow_up.gif)');
		} else {
			// fold in
			elTween.start({
				'height': [element.getStyle('height').toInt(), itemHeight]
			});
			element.getElement('div.arrow').setStyle('background-image', 'url(fileadmin/system/kmb09/media/arrow_down.gif)');
		}
	},

	// Condense calendar items
	foldItems : function() {
		var content = $('content');
		if (content.getElement('div.news-list-item')) {
			var itemHeight = KMB_helpers.getItemHeight(content.getElement('div.news-list-item'));
			$$(content.getElements('div.news-list-item')).each(
				function (e) {
					e.setStyle('height', itemHeight);
					e.setStyle('overflow', 'hidden');

					// Assign onClick events to trigger the folding.
					// We don't assign a single event to the parent (e)
					// because there are links inside div.newsdate which
					// shouldn't trigger the folding.
					e.getElement('div.newstext')
						.addEvent('click', KMB_helpers.toggleItem)
						.setStyle('cursor', 'pointer');
					e.getElement('div.newsdate > p:first-child')
						.addEvent('click', KMB_helpers.toggleItem)
						.setStyle('cursor', 'pointer');

					var arrow = new Element('div', {

					});
					arrow.set('class', 'arrow')
						.addEvent('click', KMB_helpers.toggleItem)
						.setStyle('cursor', 'pointer')
						.inject(e, 'bottom');
				}
			);
		}
	},

	// set checkboxes off
	setCheckboxesOff : function() {
		if ($('tx_ttnews_amenu_select')) {
			var catMenu = $('tx_ttnews_amenu_select');
			$$(catMenu.getElementsByTagName('input')).each(
				function (e) {
					if (e.type == 'checkbox') {
						if (e.checked) {
							e.checked = false;
							e.getParent().setStyle('background-image', 'url(fileadmin/system/kmb09/media/cb_off.gif)');
						}
					}
				}
			);
		}
		if ($('tx_tt_news_catmenu_x_all')) {
			$('tx_tt_news_catmenu_o_all').setStyle('display', 'none');
			$('tx_tt_news_catmenu_x_all').setStyle('display', 'block');
		}
	},

	// set checkboxes on
	setCheckboxesOn : function() {
		if ($('tx_ttnews_amenu_select')) {
			var catMenu = $('tx_ttnews_amenu_select');
			$$(catMenu.getElementsByTagName('input')).each(
				function (e) {
					if (e.type == 'checkbox') {
						if (!e.checked) {
							e.checked = true;
							e.getParent().setStyle('background-image', 'url(fileadmin/system/kmb09/media/cx_on.gif)');
						}
					}
				}
			);
		}
		if ($('tx_tt_news_catmenu_o_all')) {
			$('tx_tt_news_catmenu_x_all').setStyle('display', 'none');
			$('tx_tt_news_catmenu_o_all').setStyle('display', 'block');
		}
	},

	// set "deselect all"-link
	setCbSelector: function () {
		if ($('tx_tt_news_catmenu_x_all')) {
			$('tx_tt_news_catmenu_x_all').addEvent('click', KMB_helpers.setCheckboxesOn);
			$('tx_tt_news_catmenu_x_all').setStyle('display', 'block');
		}

		if ($('tx_tt_news_catmenu_o_all')) {
			$('tx_tt_news_catmenu_o_all').addEvent('click', KMB_helpers.setCheckboxesOff);
		}
	},
	
	// check if all checkboxes are set on load. If they are, replace "select all" with "deselect all" link
	initCbSelector: function() {
		if ($('tx_ttnews_amenu_select')) {
			var catMenu = $('tx_ttnews_amenu_select');
			var allSet = $$(catMenu.getElementsByTagName('input')).every(
				function (e) {
					if (e.type == 'checkbox') {
						if (!e.checked) {
							return false;
						}
					}
					return true;
				}
			);
		}
		
		if (allSet) {
			if ($('tx_tt_news_catmenu_o_all')) {
				$('tx_tt_news_catmenu_x_all').setStyle('display', 'none');
				$('tx_tt_news_catmenu_o_all').setStyle('display', 'block');
			}
		}
	},

	// Display the recommendation dialog:
	// 1. Activate the overlay
	// 2. Setup handlers to close the dialog and the overlay
	// 3. Request the dialog via AJAX and make the form submit via AJAX
	showRecommendationDialog: function(el) {
		// Activate the overlay, but not in IE6, where it is not supported.
		var overlay = null;
		if (!Browser.Engine.trident4) {
			overlay = new Overlay(document.body, {
				id: 'overlay',
				color: '#000',
				duration: 300,
				opacity: 0.4
			}).open();
		}
	
		// Setup handlers to close the dialog and the overlay
		KMB_helpers.setupRecommendationDialogClosing(overlay);
	
		// Function to resize the dialog to fit it's contents
		var resizeDialog = function(dialog) {
			var size = dialog.getElement('.tx-pbnewsrec-pi1').getSize();
			dialog.setStyle('height', size.y);
			dialog.setStyle('width', size.x);
		};
	
		// Function to center the dialog on the viewport
		var centerDialog = function(dialog) {
			var windowSize = $(window).getSize();
			dialog.setStyles({
				top: ((windowSize.y - dialog.getStyle('height').toInt()) / 2) + "px",
				left: ((windowSize.x - dialog.getStyle('width').toInt()) / 2) + "px"
			});
		};
	
		// Close the dialog automatically when necessary
		var closeIfFinished = function(dialog) {
			if (dialog.getElement('.thanks')) {
				dialog.getElement('.thanks').getNext().dispose();
				resizeDialog(dialog);
				centerDialog(dialog);
				KMB_helpers.closeRecommendationDialog.delay(2000, this, [dialog, overlay]);
			}
		};
	
		// Ajaxify the form within the dialog. Also ajaxify any forms
		// retrieved after submitting the form.
		var ajaxForm = function(dialog) {
			var form = $('recForm');
			if (!form) {
				return;
			}
			var formReloadHandler = function() {
				resizeDialog(dialog);
				centerDialog(dialog);
				closeIfFinished(dialog);
				ajaxForm(dialog);
			};
			var submitHandler = function(e) {
				// Prevent default behaviour
				new Event(e).stop();
				var request = new Request.HTML({
					url: form.get('action'),
					update: dialog,
					onSuccess: formReloadHandler
				}).post({
					type: 152,
					'tx_pbnewsrec_pi1[from]': $('from').value,
					'tx_pbnewsrec_pi1[to]': $('to').value,
					'tx_pbnewsrec_pi1[uid]': $('uid').value,
					'tx_pbnewsrec_pi1[submit]': 1
				});
			};
			var submit = $('recSubmit');
			submit.removeEvents('click');
			submit.addEvent('click', submitHandler);
		};
	
		// Load the recommendation form and place it in a div centered
		// on the viewport. Ajaxify the form.
		new Request({
			url: el.get('href'),
			onComplete: function(response) {
				var dialog = new Element('div', { id: 'recDialog' }).setStyle('opacity', 0);
				dialog.set('html', response);
				dialog.inject($(document.body));
				resizeDialog(dialog);
				centerDialog(dialog);
				var fx = new Fx.Tween(dialog, { duration: 'short' } );
				fx.start('opacity', 0, 1);
				// IE6 doesn't support position: fixed, so use absolute instead
				if (Browser.Engine.trident4) {
					dialog.setStyle('position', 'absolute');
					new IframeShim('recDialog').show();
				}
				ajaxForm(dialog);
			}
		}).send({ data: { type: 152 } });
	},
	
	// Given the dialog and the overlay element, closes the dialog.
	closeRecommendationDialog: function(dialog, overlay) {
		var fx = new Fx.Tween(dialog, { duration: 'short' } );
		fx.start('opacity', 1, 0).addEvent('complete', function() {
			dialog.dispose();
		});
		if (overlay) {
			overlay.close();
		}
	},
	
	// Setup event handlers to close a dialog (esc and click outside of dialog)
	setupRecommendationDialogClosing: function(overlay) {
		// Close open dialog on "esc"
		$(document).addEvent('keyup', function(e) {
			var dialog = null;
			if (e.key == 'esc' && (dialog = $('recDialog'))) {
				KMB_helpers.closeRecommendationDialog(dialog, overlay);
			}
		});
	
		// Close open dialog when the user clicks outside of the dialog
		$(document).addEvent('click', function(e) {
			var dialog = $('recDialog');
			var targetId = $(e.target).get('id');
			// If the dialog is open and the user didn't click inside the dialog...
			if (dialog !== null && targetId != 'recDialog') {
				// Or did he click inside of the dialog? Check the parents for the dialogs id.
				var parents = e.target.getParents('#recDialog');
				if (parents && parents.length < 1) {
					KMB_helpers.closeRecommendationDialog(dialog, overlay);
				}
			}
		});
	},
	
	// Enable inline recommendation dialogs
	enableRecommendationDialog: function() {
		$$('.recLink').each(function(el) {
			el.addEvent('click', function() {
				KMB_helpers.showRecommendationDialog($(this));
				return false;
			});
		});
	},
	
	// Setup the page - unobstrusive, of course
	setupPage : function() {
		KMB_helpers.substituteCheckboxes();
		KMB_helpers.foldItems();
		KMB_helpers.setCbSelector();
		KMB_helpers.initCbSelector();
		if (!Browser.Engine.trident4) {
		  KMB_helpers.enableRecommendationDialog();
		}
	}
};

window.addEvent('domready', KMB_helpers.setupPage);