(function() {

	var $body, $menu, $tab;
	
	var steps = 6;
	var speed = 12;
	var stepSize;
	var dist;
	var isFullscreenMode=(navigator.standalone);
	
	var useWebKitAnimations = (typeof WebKitTransitionEvent === "object");
	
	var animating = false;
	var defaultAnimation = "slidedown";


	//-------------------------------------------------------- Initializations
	// First: Code to setup via 'dom:loaded' event.

	var currentWidth = 0;
	var orientationTimer;
	var orientationTimerMs = 250;

	var portrait = "portrait";
	var landscape = "landscape";


	document.addEventListener('dom:loaded', function (event) {
		//console.log("  initial setup - dom:loaded \n");

		$body = $('body')[0];
		$menu = $('div.drop_down_menu')[0];
		$tab  = $('div.tab',$menu)[0];
		
		if(isFullscreenMode)
		{
			$menu.setStyle('display','none');
		}
		else
		{
			dist = $menu.offsetHeight - $tab.offsetHeight -4; // 4 - gray bar at top
			$menu.setStyle('top', (-dist)+'px');
		}

		if (window.onorientationchange && typeof window.onorientationchange === "object")
		{
			window.onorientationchange = orientationChangeHandler;
			setTimeout(orientationChangeHandler, 0);
		} else {
			setTimeout(checkOrientation, 0);
			orientationTimer = setInterval(checkOrientation, orientationTimerMs);
		}

		setTimeout(scrollTo, 0, 0, 1);

		document.onscroll = function ()
		{
			if (window.pageYOffset < 1) window.scrollTo(0, 1);
		};
		
		processClicks = function (target)
		{
			if (target.id === 'tab')
			{
				if( !isFullscreenMode)
				{
					slideMenu();
				}
			}
			else if (target.id === 'canvas') 
			{
				toggel_animation_pause();
			}
		}

		$body.addEventListener("click", function (event)
			{
				if (!event.target || animating) return;
				processClicks(event.target);
				event.preventDefault();
			}, true);
		
		$body.ontouchstart = function(event) // should check timing w/ touchend, but...
		{
			if(event.touches.length !== 1 || animating) return;
			processClicks((event.touches[0]).target);
			event.preventDefault();
		}

	}, false);

	//-------------------------------------------------------- Page orientation and sizing

	function orientationChangeHandler()
	{
		switch(window.orientation)
		{
			case 0:
				setOrientation(portrait);
				break;	
			case 90:
			case -90: 
				setOrientation(landscape);
				break;
		}
	}

	function setOrientation(orientation)
	{
		$body.removeClass( orientation===portrait?landscape:portrait ).addClass( orientation );
		adjustBodyToEl(orientation);
	}

	function adjustBodyToEl(orientation) {
		$body.style.height = orientation!==landscape?460:300 +'px';
		$body.style.width  = orientation!==landscape?320:480 +'px';
		init(orientation!==landscape?320:480, orientation!==landscape?460:300);
	}

	function checkOrientation()
	{
		if (window.innerWidth != currentWidth)
		{
			currentWidth = window.innerWidth;
			var orientation = currentWidth > 400 ? landscape : portrait;
			setOrientation(orientation);
		}
	}

	//-------------------------------------------------------- Animations


	function slideMenu()
	{
		if($(':focus').length)$(':focus')[0].blur();
		//scrollTo(0, 1);
		animating = true;
		stepSize = dist/steps;
		
		if(  false  && useWebKitAnimations)
		{
/*
			var animation = defaultAnimation;
			var callback = function animationEnd(event)
			{

//console.log("\nslidePage-callback: "+animation+"  class: "+$menu.className);

				if (animation)
				{
					$menu.removeClass('in').removeClass(animation);
					$menu.toggleClass('reverse');
				}

				if($menu.hasClass('showing'))
				{
					$menu.fire('pageAnimationEnd', { direction: 'out' });
				}
				else
				{
					$menu.fire('pageAnimationEnd', { direction: 'in' });
				}
				$menu.toggleClass('showing');

				
				//adjustBodyToEl();
				//orientationTimer = setInterval(checkOrientation, orientationTimerMs);
				
				$menu.removeEventListener('webkitAnimationEnd', callback, true);
				animating = false;
			}

			fromPage.fire('pageAnimationStart', { direction: 'out' });
			toPage.fire('pageAnimationStart', { direction: 'in' });

			toPage.addEventListener('webkitAnimationEnd', callback, true);
			if (backwards) {					
				toPage.toggleClass('reverse');
				fromPage.toggleClass('reverse');
			}
			toPage.addClass(animation).addClass('in');  // ...already current
			fromPage.addClass(animation).addClass('out');

			//console.log(" Animation started, ...no? \n   to: "+toPage.className+"\n from: "+fromPage.className);
*/
		}
		else
		{	// js slidedown default...


//console.log(" top/dist: "+$menu.getStyle('top')+" / "+dist+" - "+stepSize);
//console.log(" more: "+parseInt($menu.getStyle('top'))+" / "+(parseInt($menu.getStyle('top'))?'down':'up'));
			
			var loc=parseInt($menu.getStyle('top')), dir=(loc?1:-1), timer=setInterval( function()
				{
					loc += stepSize*dir;
					if (loc >= 0)
					{
						clearInterval(timer);
						loc = 0;
						orientationTimer = setInterval(checkOrientation, orientationTimerMs);
						animating = false;
						$menu.addClass('showing');
					}
					else if (loc <= -dist )
					{
						clearInterval(timer);
						loc = -dist;
						orientationTimer = setInterval(checkOrientation, orientationTimerMs);
						animating = false;
						$menu.removeClass('showing');
					}
					$menu.setStyle('top',(loc+'px'));
				}, speed);
		}
		return true;
	}

	//--------------------------------------------------------


})();