menuOver = function(key, over) {
	var $li = $('#menu>li').filter(function() { return $(this).attr('i:key') == key });
	if ($li.hasClass('active')) return;
	$li.css('background-position', 'left ' + (over ? 'center' : 'top'));
}

nextColor = function() {
	if (window.igo.cStep == 100) {
		window.igo.cStep = 0;
		window.igo.colorA = window.igo.colorB;
		window.igo.colorB = ((window.igo.colorB + 1) % window.igo.colors.length);
	} else {
		window.igo.cStep += 2;
	}

	col = [Math.round(window.igo.colors[window.igo.colorA][0] / 100 * (100-window.igo.cStep) + window.igo.colors[window.igo.colorB][0] / 100 * window.igo.cStep),
		   Math.round(window.igo.colors[window.igo.colorA][1] / 100 * (100-window.igo.cStep) + window.igo.colors[window.igo.colorB][1] / 100 * window.igo.cStep),
		   Math.round(window.igo.colors[window.igo.colorA][2] / 100 * (100-window.igo.cStep) + window.igo.colors[window.igo.colorB][2] / 100 * window.igo.cStep)];
	col = [(col[0]<16 ? '0' : '') + col[0].toString(16),
		   (col[1]<16 ? '0' : '') + col[1].toString(16),
		   (col[2]<16 ? '0' : '') + col[2].toString(16)];

	document.getElementById('headerWrap').style.background = '#' + col[0] + col[1] + col[2];
}

nextAnimFrame = function() {
	var box = window.animBox;
	switch (++box.frame) {
		case 1:
		case 2:
			box.pages[0].animate({left: box.frame * -264}, box.tt);
		break;

		case 3:
			box.pages[1].css({left: 24, top: 84, width: 105, height: 70}).show().animate({left: 0, top: 0, width: 264, height: 176}, box.tt);
		break;

		case 4:
			box.pages[2].css({left: 0, top: 0}).show();
			box.pages[1].hide();
		
		case 5:
		case 6:
		case 7:
		case 8:
		case 9:
		case 10:
			box.pages[2].animate({left: box.pages[2].position().left - 264}, box.tt);
		break;

		case 11:
			box.pages[4].css({opacity: 0}).show().animate({opacity: 1}, box.tt);
		break;

		case 12:
			box.pages[3].css({left: 0, top: 0, width: 264, height: 176, opacity: 1}).show();
			box.pages[4].hide();
			box.pages[2].hide();
			box.pages[3].animate({left: 24, top: 84, width: 105, height: 70}, box.tt);
			setTimeout(animFadeFrame, box.tt);
		break;

		case 13:
		case 14:
			box.pages[0].animate({left: (14-box.frame)*-264}, box.tt);
		break;
	}

	if (box.frame == 14)
		box.frame = 0;
}

animFadeFrame = function() {
	window.animBox.pages[3].animate({opacity: 0}, window.animBox.tt);
}

startAnim = function(box) {
	window.animBox = box;
	var wrap = $('<div class="animWrap"></div>');
	wrap.append($('<img src="/skins/chameleon/gfx/comics/back.png" class="back" />'));
	
	box.pages = [];
	for (var i = 0; i <= 4; i++)
		wrap.append(box.pages[i] = $('<img src="/skins/chameleon/gfx/comics/page' + i + '.png" />').hide());

	box.pages[0].show();
	box.frame = 0;
	box.tt = 500; //transition time
	box.timer = setInterval(nextAnimFrame, 1500 + box.tt);

	box.append(wrap);
}

$(document).ready(function() {
	window.igo = {
		lang:	document.documentElement.getAttribute('xml:lang'),
		menu:	[],
		colors:	[[171, 58, 58], [217, 217, 45], [53, 126, 53], [45, 132, 132], [62, 62, 124], [118, 70, 118]],
		colorA:	0,
		colorB:	1,
		cStep:	0
	};

	if ($(window).height() > 600)
		$('#body').addClass('tall');

	$('#languages').children().addClass('item');
	$('#languages').prepend('<li class="capT">&nbsp;</li>').append('<li class="capB">&nbsp;</li>');


	$('#menu').removeClass('undone').addClass('done').children('li').each(function() {
		var $this = $(this), key = $this.attr('i:key'), href = $this.children().attr('href');
		$this.empty();
		$this.css("background", "url(/skins/chameleon/gfx/header/menu-" + window.igo.lang + "/" + key + ".png) no-repeat left " + ($this.hasClass('active') ? 'bottom' : 'top'));
		window.igo.menu.push({key: key, href: href});
	});

	var menumap = "<map name=\"menumap\">", n = 0, x = 0;
	for (var n in window.igo.menu) {
		var item = window.igo.menu[n];
		x = 80*n;
		menumap += "<area shape=\"polygon\" coords=\"" + [x+141, 0, x+155, 0, x+155, 20, x+30, 84, x+30, 100, x, 100, x, 73].join(',') + "\" href=\"" + item.href + "\" onmouseover=\"menuOver('" + item.key + "', true);\" onmouseout=\"menuOver('" + item.key + "', false);\" />";
	}
	var w = 75 + 80*n;
	menumap += "</map><img id=\"menuImg\" src=\"/skins/chameleon/gfx/pix.gif\" width=\"" + w + "\" height=\"100\" style=\"margin-left:-" + w + "px\" usemap=\"#menuMap\" />";
	$('#menu').after(menumap);

	nextColor();
	window.t = setInterval("nextColor();", 66);

	if (anim = $('.comics_slideshow'))
		startAnim(anim);

	$('.tooltip')
	.bind('mouseenter', function(e) {
		var $this = $(this);
		if (typeof $this.data('tooltip') == "undefined") {
			var pos = $this.offset();
			$this.data('tooltip', $('<div class="tooltip_popup" style="top: -1000px;">' + $this.attr('tooltip') + '</div>'));
			$(document.body).append($this.data('tooltip'));
			var x = pos.left, y = pos.top;
			switch ($this.attr('ttdir')) {
				case 'sene':
					x = x + $this.outerWidth() - $this.data('tooltip').outerWidth();
					y = y + $this.outerHeight();
				break;
				
				case 'swse':
					x = x - $this.data('tooltip').outerWidth();
					y = y + $this.outerHeight() - $this.data('tooltip').outerHeight();
				break;
				
				case 'swnw':
					y = y + $this.outerHeight();
				break;
				
				case 'sesw':
					x = x + $this.outerWidth();
					y = y + $this.outerHeight() - $this.data('tooltip').outerHeight();
				break;
			}
			$this.data('tooltip').css({left: x, top: y}).hide();
		}
		$this.data('tooltip').fadeIn(200);
	})
	.bind('mouseleave', function(e) { 
		$(this).data('tooltip').fadeOut(200);
	});
});



// vim: ts=4 sw=4