var duration = 0.5;
var width = 100;

window.onresize = function() {
	var windowHeight = document.viewport.getHeight();
	var pageHeight = $('frame').getHeight();
	
	$("logo").style.marginTop = Math.max(20, (windowHeight-pageHeight)/2)+"px";
};

var tt = (function() {
	var BounceOut = function(p) {
		p = 1-p;
		var value;
		for (var a = 0, b = 1; 1; a += b, b /= 2){
			if (p >= (7 - 4 * a) / 11){
				value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
				break;
			}
		}
		return 1-value;
	};
	
	return {
	startEffect: function() {
		var images = $('images')
		new Effect.Tween(images, 0, width, {duration: duration, transition: Effect.Transitions.sinoidal, afterFinish: function() {
			new Effect.Tween(images, width, 0, {duration: duration*2, transition: BounceOut}, 'scrollLeft');
		}}, 'scrollLeft');
	},
	
	initCards: function() {
		var images = $('images'), image;
		images.select('div.overlay').each(function(overlay) {
			image = overlay.up();
			
			xb.addEvent(image, 'mouseenter', tt.enterCard, false);
			xb.addEvent(image, 'mouseleave', tt.leaveCard, false);
		});
	},
	
	enterCard : function(event) {
		tt._enterLeaveCard(this, true);
	},

	leaveCard : function(event) {
		tt._enterLeaveCard(this, false);
	},
	
	_enterLeaveCard : function(cardContent, opening) {
		var cardOverlay = cardContent.down('.overlay');
		if (!cardOverlay.effectQueue) {
			var uniqueQueueName = (cardContent && cardContent.id ? cardContent.id : Math.round(1000000000 * Math.random()));
			cardOverlay.effectQueue = Effect.Queues.get('cardoverlay_'+uniqueQueueName);
			cardOverlay.overlayHeight = cardOverlay.getHeight();
			var overlayHeader = cardOverlay.getElementsByClassName('overlayheader');
			cardOverlay.overlayHeaderHeight = (overlayHeader.length == 1 ? overlayHeader[0].getHeight() : 0);
			var overlayText = cardOverlay.getElementsByClassName('overlaytext');
			cardOverlay.overlayTextHeight = (overlayText.length == 1 ? overlayText[0].getHeight() : 0);
		}
		var queue = cardOverlay.effectQueue;

		var canceledPrevious = (queue.effects.length > 0);
		queue.each(function(e) { e.cancel() });

		var from = parseInt(cardOverlay.getStyle('bottom'));
		if (from == 1000) {
			// move overlay to initial start position on first action
			var overlayHeight = cardOverlay.getHeight();
			cardOverlay.style.bottom = - overlayHeight + 'px';
			from = -overlayHeight;
		}
		var to = (opening ? 0 : -cardOverlay.overlayHeight);
		if (to == from) return;

		var delay = (canceledPrevious ? 0.0 : (opening ? 0.3 : 0.1));
		if (opening) {
			var via = cardOverlay.overlayHeaderHeight - cardOverlay.overlayHeight;
			if (cardOverlay.overlayHeaderHeight && from < via) {
				new Effect.Tween(cardOverlay,
					from,
					via,
					{
						delay: delay,
						duration: tt._getOverlayDuration(from, to, true),
						queue: {position: 'end', scope: queue}
					},
					function(pos) { this.style.bottom = pos + 'px'; }
				);
				from = via;
			}
			if (cardOverlay.overlayTextHeight && from < to) {
				delay = (queue.effects.length > 0 ? 0.4 : 0.0);
				new Effect.Tween(cardOverlay,
					from,
					to,
					{
						delay: delay,
						duration: tt._getOverlayDuration(from, to, false),
						queue: {position: 'end', scope: queue}
					},
					function(pos) { this.style.bottom = pos + 'px'; }
				);
			}

		} else {
			new Effect.Tween(cardOverlay,
				from,
				to,
				{
					delay: delay,
					duration: tt._getOverlayDuration(from, to, false),
					queue: {position: 'end', scope: queue}
				},
				function(pos) { this.style.bottom = pos + 'px'; }
			);

		}
	},
	
	_getOverlayDuration : function(from, to, header) {
		var maxSinoidal = 1000;  // pixel
		var maxSinoidalDuration = 2.5;  // seconds
		var maxSpeed = 500;  // pixel/seconds
		var minDuration = (header ? 0.3 : 0.8);  // seconds

		var delta = (from > to ? from - to : to - from);
		var duration = minDuration;
		if (delta > maxSinoidal) {
			duration += delta / maxSpeed;
		} else {
			var fraction = delta / maxSinoidal;
			var sinoidal = (-Math.cos(fraction * Math.PI) / 2) + 0.5;
			duration += maxSinoidalDuration * sinoidal;
		}
		return duration;
	}
};})();

function displayButtons() {

	var imagesdataWidth = $('imagesdata').getWidth();
	
	var displayImagesWidth = document.viewport.getWidth();
	displayImagesWidth = displayImagesWidth - 355;
	
	var max = imagesdataWidth - displayImagesWidth;

	// var leftValue left-Wert von #imagesdata (ist negativer Wert), deshalb *(-1)
	
	var leftValue = $('imagesdata').getStyle('left');

	var cutoffPX = leftValue.length - 2;
	var temp = leftValue.charAt(0);
	for (var i=1; i<cutoffPX; i++) {
		temp = temp + leftValue.charAt(i);	
	}
	
	leftValue = temp;
	leftValue = leftValue * (-1);
	
	if (leftValue >= max) {
		$('imagesdown').setStyle({display: 'none'});
	}else{
		$('imagesdown').setStyle({display: 'block'});
	}
	
	if (leftValue == "0") {
		$('imagesup').setStyle({display: 'none'});	
	}else{
		$('imagesup').setStyle({display: 'block'});	
	}

}




document.observe('dom:loaded', function() {




	window.onresize = function() {
      displayButtons();
    };
    
	tt.startEffect();
	
	tt.initCards();

	displayButtons();

});