/*
 * MooTools
 * version 1.11
 * documentation at http://docs111.mootools.net
 * used for floating layer & on dom ready functions
 */

/*
 * Modalizer
 * based on MooTools
 * documentation at http://clientside.cnet.com/cnet.gf/docs/files3/common/js-widgets/modalizer-js.html
 * used for modal floating layer
 */

window.onDomReady(function() {
	/*
	 * drop-down menu in main-navigation
	 */
	new DropdownMenu($E('ul', 'main-navigation'));

	/**
	 *	Home Image Carousels
	 */
	if ($('home') != null) {
		new HomeRotator('left');
		new HomeRotator('right');
	};


	/* function: floatingLayer(css selector of start button for popup window, css selector of close button within popup window, file with content of popup window)
	 * information: will produce a popup window with the xhtml from the file with a modal layer in the background
	 * style: styling by css selector '.floating-layer-wrapper'
	 */
	createFloatingLayer('#main-navigation a#contact-navigation', 'a.close', '/contact.php');
	createFloatingLayer('#direct-contact-banner a#contact-banner', 'a.close', '/contact.php');

	/*
	 * add faq toggles & sliders
	 */
	if($('list-faqs') != null) {
		var mySlider = new Array;

		$$('.list-faqs-item').each(function(item, index){
			mySlider[index] = new Fx.Slide($E('span', item)).hide();
			$E('a', item).removeAttribute("href");

			//add unobtrusive javascript for onclick event to <a> tag that toggles sliding details
			$E('a', item).addEvent("click", function(event) {
				mySlider[index].toggle();
			});
		});
	};

	/*
	 * set correct defaults for navigation
	 */
	if ($('list-services-combination') != null) {
   		var food = $('header-image-food').getFirst();
   		var support = $('header-image-support').getFirst();
   		
		var foodList = $('list-services-combination-food');
		var supportList = $('list-services-combination-support')
		food.addEvent('mouseenter', function() { food.addClass('selected'); foodList.addClass('selected'); support.removeClass('selected'); supportList.removeClass('selected'); });
		foodList.addEvent('mouseenter', function() { food.addClass('selected'); foodList.addClass('selected'); support.removeClass('selected'); supportList.removeClass('selected'); });

		support.addEvent('mouseenter', function() { support.addClass('selected'); supportList.addClass('selected'); food.removeClass('selected'); foodList.removeClass('selected'); });
		support.addEvent('mouseleave', function() { food.addClass('selected'); foodList.addClass('selected'); support.removeClass('selected'); supportList.removeClass('selected'); });

		supportList.addEvent('mouseenter', function() { support.addClass('selected'); supportList.addClass('selected'); food.removeClass('selected'); foodList.removeClass('selected'); });
		supportList.addEvent('mouseleave', function() { food.addClass('selected'); foodList.addClass('selected'); support.removeClass('selected'); supportList.removeClass('selected'); });

		food.addClass('selected');
		foodList.addClass('selected');
		support.removeClass('selected');
		supportList.removeClass('selected');
	};

	if ($('column-header-navigation') != null) {
    		var food = $('tab-food').getFirst();
    		var support = $('tab-support').getFirst();
		food.addEvent('mouseenter', function() { food.addClass('selected'); support.removeClass('selected'); });
		support.addEvent('mouseenter', function() { support.addClass('selected'); food.removeClass('selected'); });
	};

	if ($('tab-navigation') != null) {
    		var food = $('tab-food').getFirst();
    		var support = $('tab-support').getFirst();
		switch($$('body')[0].id) {
			case 'food':
				food.addClass('selected');
				support.removeClass('selected');
				break;
			case 'support':
				support.addClass('selected');
				food.removeClass('selected');
				break;
			case 'food-service':
				food.addClass('selected');
				support.removeClass('selected');
				break;
			case 'support-service':
				support.addClass('selected');
				food.removeClass('selected');
				break;
			default:
				food.addClass('selected');
				support.removeClass('selected');
		};
	};
	if ($('home') != null) {
   		var food = $('tab-food').getFirst();
   		var support = $('tab-support').getFirst();

		food.addEvent('mouseenter', function() { food.addClass('selected'); support.removeClass('selected'); });
		support.addEvent('mouseenter', function() { support.addClass('selected'); food.removeClass('selected'); });
		support.addEvent('mouseleave', function() { food.addClass('selected'); support.removeClass('selected'); });
	};
});

/*
 * dropdown menu for main navigation
 */
var DropdownMenu = new Class({
	initialize: function(element) {
		$A($(element).childNodes).each(function(el) {
			if(el.nodeName.toLowerCase() == 'li') {
				$A($(el).childNodes).each(function(el2) {
					if(el2.nodeName.toLowerCase() == 'ul') {
						$(el2).hide();

						/*el.addEvent('click', function() {
							$A(this.getParent().childNodes).each(function(el3) {
							    if(el3.nodeName.toLowerCase() == 'li') {
							        if (el3.getFirst().hasClass('selected')) {
							            el3.getFirst().removeClass('selected');
							        };
							    };
						    });
						    this.getFirst().addClass('selected');
							return false;
						});*/

						el.addEvent('mouseover', function() {
							el2.show();
							this.getFirst().addClass('over');
							return false;
						});

						el.addEvent('mouseout', function() {
							el2.hide();
							this.getFirst().removeClass('over');
							return false;
						});

                        new DropdownMenu(el2);
					};
				});
			};
		});
		return this;
	}
});

var FloatingLayer = new Class({
	/*
	 * @type {Object}
	 */
	options: {
		loadingText: 'Loading content...',
		failureText: 'Failed to get content',
		layerColor: '#000000',
		layerOpacity: .5
	},

	/*
	 * Constructor
	 *
	 * @param {Object} options
	 */
	initialize: function(options) {
		this.setOptions(options);

		this.xposition = getWidth()/2;
		this.yposition = getHeight()/2;
		this.zIndex = '6000';
		this.popwindow = null;
		this.iframe = null;
		this.loads = 1;

		// Create base element if it doesn't already exist
		if ($$('div.floating-layer-wrapper').length < 1) {
			this.popwindow = new Element('div');
			this.popwindow.setStyles({
				'left': this.xposition,
				'top': this.yposition,
				'z-index': this.zIndex
    			});
			this.popwindow.addClass('floating-layer-wrapper');
			this.popwindow.injectTop(document.body)
			this.popwindow.setOpacity(0);

			this.iframe = new Element('iframe');
			this.iframe.setProperties({
				'frameborder': '0',
		    		'scrolling': 'auto',
				'name': 'fl' + this.xposition
			});
			this.popwindow.adopt(this.iframe);
		} else {
			this.popwindow = $$('div.floating-layer-wrapper')[0];
			this.iframe = $$('iframe')[0];
		}
	},

	/*
	 * Will show the popup
	 */
	show: function(url, button) {
		this.modalShow({
  			modalStyle:{
    				'background-color': this.options.layerColor,
				'opacity': this.options.layerOpacity
			},
			hideOnClick: false,
			onModalShow: function() {this.getContent(url, button)}.bind(this),
			onModalHide: function() {this.popwindow.setOpacity(0)}.bind(this)
		});
	},

	/*
	 * Will asynchronously get the content for the popup from html file
	 */
	getContent: function(url, button) {
		this.iframe.addEvent('load', this.effect.bindAsEventListener(this, [button]));
		this.iframe.contentWindow.location.href = url;
	},

	/*
	 * Will apply effect to showing of content (only on first load)
	 */
	effect: function(e, button) {
		assignHideButtonFloatingLayer(button);
	
		if (this.loads == 1) {
			var frame = $(this.popwindow.getFirst());
	
			//get a handle on the body of the iframe
			if (this.popwindow.getFirst().contentDocument) { // DOM
				var frameBody = frame.contentDocument.body.getFirst();
			} else if (this.popwindow.getFirst().contentWindow) { // IE win
				var frameBody = frame.contentWindow.document.body.getFirst();
			}
	
			frameBody.setOpacity(0);
	
			var effectPopwindow = new Fx.Styles(this.popwindow, {duration: 1000, transition: Fx.Transitions.linear}).addEvent('onComplete', function(){frameBody.setOpacity(1)});
			var newWidth =  600;
			var newHeight = 640;
			var newPosition = (this.xposition.toInt() - (newWidth/2));
	
			var newTop = (this.yposition.toInt() - (newHeight/2) + window.getScrollTop());  
	
			if (newTop < 100) {
				newTop = 100;
			}
	
			//change the size of the floating layer & iframe
			this.popwindow.setStyles({
				'left': this.xposition.toInt(),
				'top': newTop,
				'width': 20,
				'height': newHeight,
				'border': 'none'
			})
	
			frame.setStyles({
				'width': newWidth,
				'height': newHeight
			})
	
			this.popwindow.setOpacity(1);
		
			effectPopwindow.start({
				'width': newWidth,
				'left': newPosition
			})
		}

		this.loads = this.loads + 1;
	},

	/*
	 * Will hide the popup
	 */
	hide: function() {
		this.popwindow.setOpacity(0);
		this.modalHide();
	}
});

FloatingLayer.implement(new Options, new Events);
FloatingLayer.implement(new Modalizer);

/* create a floating layer of modal type */
function createFloatingLayer(showButton, hideButton, contentFile, maximumHeight) {
	/*
	* Clear any existing floating layer
	*/
	contactform = null;

	/*
	 * create new floating layer & add show method to click event button
	 */
	$E(showButton).removeProperty('href');
	$E(showButton).setStyle('cursor', 'pointer');
	$E(showButton).addEvent('click', function(event){contactform = new FloatingLayer(); contactform.show(contentFile, hideButton); return false;});
}

function assignHideButtonFloatingLayer(hideButton) {
	/*
	 * add hide method to click event close button
	 */
	if ($$('iframe')[0].contentDocument) { // DOM
		var closeButton = $ES(hideButton, $E('iframe').contentDocument.body);
	} else if ($$('iframe')[0].contentWindow) { // IE win
		var closeButton = $ES(hideButton, $E('iframe').contentWindow.document.body);
	}

	for(var i = 0; i < closeButton.length; i++) {
 		closeButton[i].addEvent('click', function(event){contactform.hide(); return false;});
	}
}

var HomeRotator = new Class({
	totalimages: null,
	currentimage: null,
	images: null,
	
	initialize: function(type) {
		if (type == 'left') {
			this.images = $$('#home #header-banner-food img');
		} else {
			this.images = $$('#home #header-banner-support img');
		}

		this.totalimages = this.images.length;

		if ( this.totalimages > 1) {
			this.currentimage = 0;
	
			//	Set initial state
			this.images.each(function(image, index) {
				if (index == this.currentimage) {
					image.setStyle('opacity', '1');
				} else {
					image.setStyle('opacity', '0');
				}
			}.bind(this));
	
	
			setTimeout(this.rotateImage.bind(this), 5000);
		}
	},
	
	rotateImage: function () {
		nextimage = this.currentimage + 1;

		if (nextimage == this.totalimages) {
			nextimage = 0;
		}

		//console.log('Start:' + this.currentimage + ' Stop:' + nextimage);

		var myElementsEffects = new Fx.Elements([this.images[this.currentimage],this.images[nextimage]], {duration:1500});
		myElementsEffects.start({
		    '0': {
		    	'opacity': [1,0]
		    },
		    '1': {
		        'opacity': [0,1]
		    }
		});

		this.currentimage = this.currentimage + 1;
		
		if (this.currentimage == this.totalimages) {
			this.currentimage = 0;
		}
		setTimeout(this.rotateImage.bind(this), 5000);
	}
});

Element.extend( {
	hide: function() {
		this.setOpacity(0);
	},

	show: function() {
		this.setOpacity(0.90);
	}
});