window.addEvent('domready', function() {

	var begin = window.getSize();

	var userW = begin.x;
	var userH = begin.y;
	var dockSize = 120;					// Dock Size

	/**
	 * NewsLine
	 */
	var newsAll = $('newsAll');
	var newsLine = $('newsLine');
	var newsUL = newsLine.getElement('ul');
	var newsLIs = newsLine.getElements('li');
	var newsLinks = newsLine.getElements('a');
	var newsTimer = 4000;
	var newsSlide = new Fx.Morph(newsUL, {duration: 500, transition: Fx.Transitions.Cubic.easeOut, link: 'chain'});
	var newsWidth = Math.round(0.7 * userW);
	var newsPlay = true;
	var arrowWidth = 30;

	newsAll.setStyle('width', newsWidth + 2 * arrowWidth);
	newsLine.setStyle('width', newsWidth);
	newsUL.setStyle('width', 10 * newsWidth);
	newsUL.setStyle('left', newsWidth);
	newsLIs.setStyle('width', newsWidth);
	newsLIs.setStyle('margin-right', newsWidth);

// for arrows
var batony = $$('.batony');
var posi = 'left';
function getPosi(el) {
	if (el.hasClass('open')) {
		posi = 'right';
	} else {
		posi = 'left';
	}
	return posi;
}

	$('bottomTitle').setStyle('opacity', 0);

	// show 1st news
	newsSlide.start({
	    'left': 0 //Morphs Left from the current to Default.
	});
	
	// stop News on Mouse
	newsLinks.each(function(newsL){
		newsL.addEvent('mouseenter', function(){
			newsPlay = false;
		});
		newsL.addEvent('mouseleave', function(){
			newsPlay = true;
		});
	});
	
	
	// newsLeft
	$('newsLeft').addEvent('mouseenter', function(){
		newsPlay = false;
	});
	$('newsLeft').addEvent('mouseleave', function(){
		newsPlay = true;
	});
	
	$('newsLeft').addEvent('click', function(){
		newsPos = newsUL.getStyle('left').toInt();	// position
		newsNum = Math.floor(newsPos / (-2 * newsWidth));
		showNews(newsNum, 'left');
	});
	
	// newsRight
	$('newsRight').addEvent('mouseenter', function(){
		newsPlay = false;
	});
	$('newsRight').addEvent('mouseleave', function(){
		newsPlay = true;
	});
	
	$('newsRight').addEvent('click', function(){
		newsPos = newsUL.getStyle('left').toInt();	// position
		newsNum = Math.floor(newsPos / (-2 * newsWidth));
		showNews(newsNum, 'right');
	});
	
	
	function showNews(num, side) {
		// side
		if (side == 'left') {
			side = 1;
			newNum = num - 1;
			if (newNum == -1) newNum = 4;
		} else {
			side = -1;
			newNum = num + 1;
			if (newNum == 5) newNum = 0;
		}
		// hide news
		oldLeft = num * -2 * newsWidth;
		newLeft = num * -2 * newsWidth + side * newsWidth;
		newsSlide.start({
		    'left': [oldLeft, newLeft] 	// hide news
		});

		//show News
		oldLeft = newNum * -2 * newsWidth - side * newsWidth;
		newLeft = newNum * -2 * newsWidth;
		newsSlide.start({
		    'left': [oldLeft, newLeft] 	// hide news
		});
	}


	(function(){
		if (newsPlay) {
			newsPos = newsUL.getStyle('left').toInt();	// position
			newLeft = newsPos - newsWidth;
			this.start({
			    'left': newLeft 	// hide news
			});

			if (newsPos <= (-8 * newsWidth)) newLeft = newsWidth;	// cycle

			oldLeft = newLeft;
			newLeft = newLeft - newsWidth;
			this.start({
			    'left': [oldLeft, newLeft] // show news
			});
		}
	}).periodical(newsTimer, newsSlide);

	/**
	 * Set STYLES
	 */
	// Top & Bottom rows
	$$('.rowSides').setStyle('width', 2 * dockSize + userW);
	// Middle row
	$$('.rowMiddle').setStyles({
		'width': 2 * dockSize + userW,
		'height': userH
	})
	// Middle Table
	$('intro').getElement('table').setStyles({
		'width': userW,
		'height': userH
	});
	
	// Intro Div
	$('intro').setStyles({
		'height': userH
	});

	$$('#leftMenu, #rightMenu').setStyles({
		'height': userH
	})

	$$('#topMenu, #bottomMenu').setStyles({
		'width': userW
	})

	
		/*
		 * Initial Arrows
		 */
		var firstArrows = $$('.firstArrows div.batony');


		var myEffect = new Fx.Morph('container', {duration: 'short', transition: Fx.Transitions.Sine.easeOut, link: 'chain'});
		var reset = -1 * dockSize; 	// center position
		var divTitles = $$('#leftTitle', '#topTitle', '#rightTitle', '#bottomTitle');

		// hide Titles
		divTitles.setStyle('opacity', 0);


		var open;
		batony.addEvents({
			'mousedown': function() { 
				posi = getPosi(this);
				this.setStyle('background-position', 'bottom ' + posi);
			},
			'mouseup': function() { 
				posi = getPosi(this);
				this.setStyle('background-position', 'center ' + posi); 
				
				// 'close' in all cases && 'open' if closed
				if (this.hasClass('open')) {
					open = 0;
					firstArrows.removeClass('open');
				} else {
					open = 1;
					firstArrows.removeClass('open');
					this.addClass('open');
				}

				$$('.batony').setStyle('background-position', 'left top');

				var direction = this.getProperty('title');		// Direction

				var newLeft = $('container').getStyle('left').toInt();
				var newTop = $('container').getStyle('top').toInt();


				if ((newLeft != '-1 * dockSize') || (newTop != '-1 * dockSize')) {
					// RESET
					newLeft = reset;
					newTop = reset;
					// Go Center
					myEffect.start({
					    'left': newLeft, //Morphs Left from the current to Default.
					    'top': newTop   //Morphs Top width from the current to Default.
					});
				}

				switch (direction) {
					case 'left':
						var newLeft = newLeft + dockSize * open;
						break;
					case 'top':
						var newTop = newTop + dockSize * open;
						break;
					case 'right':
						var newLeft = newLeft - dockSize * open;
						break;
					case 'bottom':
						var newTop = newTop - dockSize * open;
						break;
				}

				myEffect.start({
				    'left': newLeft, //Morphs Left from the current to newLeft.
				    'top': newTop   //Morphs Top width from the current to newTop.
				});
			},
			'mouseenter': function() { 
				posi = getPosi(this);
				this.setStyle('background-position', 'center ' + posi);				
				var direction = this.getProperty('title');		// Direction
				var divTitle = $(direction + 'Title');
				if (divTitle) {divTitle.setStyle('opacity', 1);}
			},
			'mouseleave': function() { 
				posi = getPosi(this);
				this.setStyle('background-position', 'top ' + posi); 
				divTitles.setStyle('opacity', 0);
			}
		});

		$('logoBig').addEvent('click', function(){
			firstArrows.removeClass('open');
			firstArrows.setStyle('background-position', 'top left');
			myEffect.start({
			    'left': reset, //Morphs Left from the current to newLeft.
			    'top': reset   //Morphs Top width from the current to newTop.
			});
		});
	
		var toSide = new Fx.Morph('container', {duration: 500, transition: Fx.Transitions.Quad.easeIn, link: 'chain'});


		var leftItems = $('leftMenu').getElements('a');
		var topItems = $('topMenu').getElements('a');
		var rightItems = $('rightMenu').getElements('a');
		var bottomItems = $('bottomMenu').getElements('a');
		var linkItem, party, newLeft, newTop, anim;

		$$(leftItems, topItems, rightItems, bottomItems).addEvent('click', function(){
			newLeft = $('container').getStyle('left').toInt();
			newTop = $('container').getStyle('top').toInt();
			party = this.getProperty('class');
			linkItem = this.getProperty('href');
			switch (party) {
				case 'left':
					anim = {
					    'left': userW, 				//Morphs Left from the current to newLeft.
					    'top': newTop   			//Morphs Top width from the current to newTop.
					}
					break;

				case 'top':				
					anim = {
					    'left': newLeft, 				//Morphs Left from the current to newLeft.
					    'top': userH   					//Morphs Top width from the current to newTop.
					}
					break;

				case 'right':					
					anim = {
					    'left': newLeft - userW, 	//Morphs Left from the current to newLeft.
					    'top': newTop   			//Morphs Top width from the current to newTop.
					}
					break;

				case 'bottom':
					anim = {
					    'left': newLeft, 					//Morphs Left from the current to newLeft.
					    'top': newTop - userH   			//Morphs Top width from the current to newTop.
					}
					break;
			}


			toSide.start(anim);										// Animation
			(function(){location.replace(linkItem)}).delay(500);	// Link
			return false;											// no href
		})

})