/*
	Copyright 2009 by GRIPS Theater and Dienstleistung Kultur
*/

function Debug ( text )
{
	if ( window.console )		console.log ( text );
}

var firstItem	= null;
var rubberBand	= null;

var owItems	=
{
//	r01	: {	o : 'Abschnittsbevollmächtigter (ABVler)',	w : 'Kontaktbereichsbeamter'	},
	r01	: {	o : 'Abschnittsbevollmächtigter',				w : 'Kontaktbereichsbeamter'	},
	r02	: {	o : 'Broiler',					w : 'gebratenes Hähnchen'	},
	r03	: {	o : 'Datsche',					w : 'Ferienhaus'	},
	r04	: {	o : 'Fahrerlaubnis',			w : 'Führerschein'	},
	r05	: {	o : 'Jahresendflügelfigur',	w : 'Weihnachtsengel'	},
	r06	: {	o : 'Jägerschnitzel (aus Jagdwurst)',	w : 'Jägerschnitzel (mit Pilzen)'	},
	r07	: {	o : 'Kader',					w : 'Personalabteilung'	},
	r08	: {	o : 'Kaufhalle',				w : 'Supermarkt'	},
	r09	: {	o : 'Ketwurst',				w : 'Hot Dog'	},
	r10	: {	o : 'Kollektiv',				w : 'Team'	},
	r11	: {	o : 'Kosmonaut',				w : 'Astronaut'	},
	r12	: {	o : 'Krusta',					w : 'Pizza'	},
	r13	: {	o : 'Lehrling',				w : 'Azubi'	},
	r14	: {	o : 'Nicki',					w : 'T-Shirt'	},
	r15	: {	o : 'Niethosen',				w : 'Jeans'	},
	r16	: {	o : 'Nudossi',					w : 'Nutella'	},
	r17	: {	o : 'Pfeffi',					w : 'Minzbonbon'	},
	r18	: {	o : 'Selters',					w : 'Mineralwasser'	},
	r19	: {	o : 'Specki-Tonne',			w : 'Biotonne'	},
	r20	: {	o : 'Winkelement',			w : 'Fahne'	},
	r21	: {	o : 'Würzfleisch',			w : 'Ragout Fin'	},
	r22	: {	o : 'Zur Fahne gehen',		w : 'Zum Bund gehen'	}
};

function ran() { return ( Math.random() < 0.5 ) ? -1 : 1; }

function createGame ()
{
	firstItem	= null;

	var $gDiv	= $("#ost_west_ratespiel");

	$gDiv.empty();

	var hImg		= document.createElement('img');
	var $hImg	= $(hImg);

//	$hImg.attr('src','gif/ost-west.gif');
	$hImg.attr('src','/img/ost-west.gif');
/*
	$hImg.attr('title','Ratespiel neu starten');
	$hImg.attr('alt','Ratespiel neu starten');

	$hImg.click
	(
		function (e)
		{
			createGame();
		}
	);
*/

	$gDiv.append ( $hImg );

	var oWrap	= document.createElement('div');		var wWrap	= document.createElement('div');
	var $oWrap	= $(oWrap);									var $wWrap	= $(wWrap);

	$oWrap.addClass ( 'o_wrapper' );						$wWrap.addClass ( 'w_wrapper' );

	var p	= $gDiv.offset();

	var l	= p.left;
	var t	= p.top + $hImg.height();	//	!!

	var oKeys	= [];
	var wKeys	= [];

	for ( var k in owItems )		oKeys.push ( k );
	for ( var k in owItems )		wKeys.push ( k );

	oKeys.sort(ran);		//	randomize list
	wKeys.sort(ran);		//	randomize list

//	Debug ( $.dump ( owKeys ) );

	var i	= 0;

	for ( var i = 0; i < oKeys.length; i++ )
	{
		var ko	= oKeys[i];									var kw	= wKeys[i];

		var hO	= document.createElement('div');		var hW	= document.createElement('div');
		var $hO	= $(hO);										var $hW	= $(hW);

		$hO.addClass ( 'o_item' );							$hW.addClass ( 'w_item' );

		$hO.text ( owItems[ko].o );						$hW.text ( owItems[kw].w );

		$hO.attr ( 'id', $.data($hO) );					$hW.attr ( 'id', $.data($hW) );	//	returns unique id !
		$hO.attr ( 'name', ko );							$hW.attr ( 'name', kw );			//	name !

		$( $hO ).add ( $hW ).click
		(
			function (e)
			{
				checkClick ( $(this) );
			}
		);

		$oWrap.append ( $hO );								$wWrap.append ( $hW );
	}

	$gDiv.append ( $oWrap );								$gDiv.append ( $wWrap );

	var clearer	= document.createElement('div');
	var $clearer= $(clearer);

	$clearer.addClass ( 'clearer' );

	$gDiv.append ( $clearer );
}

function solveGame ()
{
	var $gDiv	= $("#ost_west_ratespiel");

	$gDiv.empty();

	var hImg		= document.createElement('img');
	var $hImg	= $(hImg);

//	$hImg.attr('src','gif/ost-west.gif');
	$hImg.attr('src','/img/ost-west.gif');
/*
	$hImg.attr('title','Ratespiel neu starten');
	$hImg.attr('alt','Ratespiel neu starten');

	$hImg.click
	(
		function (e)
		{
			createGame();
		}
	);
*/

	$gDiv.append ( $hImg );

	var oWrap	= document.createElement('div');		var wWrap	= document.createElement('div');
	var $oWrap	= $(oWrap);									var $wWrap	= $(wWrap);

	$oWrap.addClass ( 'o_wrapper' );						$wWrap.addClass ( 'w_wrapper' );

	var p	= $gDiv.offset();

	var l	= p.left;
	var t	= p.top + $hImg.height();	//	!!

	var oKeys	= [];
	var wKeys	= [];

	for ( var k in owItems )		oKeys.push ( k );
	for ( var k in owItems )		wKeys.push ( k );

	var i	= 0;

	for ( var i = 0; i < oKeys.length; i++ )
	{
		var ko	= oKeys[i];									var kw	= wKeys[i];

		var hO	= document.createElement('div');		var hW	= document.createElement('div');
		var $hO	= $(hO);										var $hW	= $(hW);

		$hO.addClass ( 'o_item' );							$hW.addClass ( 'w_item' );
		$hO.addClass ( 'clicked' );						$hW.addClass ( 'clicked' );
		$hO.addClass ( 'solved' );							$hW.addClass ( 'solved' );

		$hO.text ( owItems[ko].o );						$hW.text ( owItems[kw].w );

		$hO.attr ( 'id', $.data($hO) );					$hW.attr ( 'id', $.data($hW) );	//	returns unique id !
		$hO.attr ( 'name', ko );							$hW.attr ( 'name', kw );			//	name !

		$oWrap.append ( $hO );								$wWrap.append ( $hW );
	}

	$gDiv.append ( $oWrap );								$gDiv.append ( $wWrap );

	var clearer	= document.createElement('div');
	var $clearer= $(clearer);

	$clearer.addClass ( 'clearer' );

	$gDiv.append ( $clearer );
}

function checkClick ( oItem )
{
	if ( firstItem )
	{
		if			( oItem.attr ( 'id' ) == firstItem.attr ( 'id' ) )
		{
			oItem.removeClass ( 'clicked' );
			firstItem	= null;
		}
		else if	( oItem.attr ( 'name' ) == firstItem.attr ( 'name' ) )
		{
			endRubber();

			oItem.addClass ( 'clicked' );

			oItem.addClass ( 'solved' );
			firstItem.addClass ( 'solved' );

			var $oWrap	= $('.o_wrapper');
			var $wWrap	= $('.w_wrapper');

			if ( oItem.parent().is('.o_wrapper') )			oItem.remove().prependTo ( $oWrap );			//	will unbind...
			else														oItem.remove().prependTo ( $wWrap );

			if ( firstItem.parent().is('.o_wrapper') )	firstItem.remove().prependTo ( $oWrap );
			else														firstItem.remove().prependTo ( $wWrap );

			firstItem	= null;
		}
		else
		{
			oItem.effect("shake");
		}
	}
	else
	{
		firstItem	= oItem;

		firstItem.addClass ( 'clicked' );

		beginRubber(firstItem);
	}
}

//	adapted from www.openstudio.fr/Library-for-simple-drawing-with.html

var
	xArray = [],
	yArray = [],
	preloadedImages;

function drawLine( lineIndex, x1, y1, x2, y2 )
{
	var objectHandle = document.getElementById( "line"+ lineIndex )

	if( !objectHandle )
	{
		document.body.innerHTML += "<img id='line"+ lineIndex +"' class='line' />"
		objectHandle = document.getElementById( "line"+ lineIndex )
	}

	updateLine( objectHandle, x1, y1, x2, y2 )
}

function updateLine( lineObjectHandle, Ax, Ay, Bx, By )
{
	var
		xMin			= Math.min( Ax, Bx ),
		yMin			= Math.min( Ay, By ),
		xMax			= Math.max( Ax, Bx ),
		yMax			= Math.max( Ay, By ),
		boxWidth		= Math.max( xMax-xMin, 1 ),
		boxHeight	= Math.max( yMax-yMin, 1 ),
		tmp			= Math.min( boxWidth, boxHeight, 256 ),
		lineIndex	= (Bx-Ax)*(By-Ay)<0?0:1;

	while( tmp>>=1 )
		lineIndex+=2;

	lineObjectHandle.src = preloadedImages[lineIndex].src;

	with( lineObjectHandle.style )
	{
		width		= boxWidth	+"px";
		height	= boxHeight	+"px";
		left		= xMin		+"px";
		top		= yMin		+"px";
	}
}

function updateFrame()
{
/*
	var damping		= 0.8;

	for( var i=0;i<xArray.length-1; i++ )
	{
		xArray[ i ] = xArray[ i ]*damping+xArray[ i+1 ]*(1.0-damping);
		yArray[ i ] = yArray[ i ]*damping+yArray[ i+1 ]*(1.0-damping);
	}

	Debug ( $.dump ( xArray ), $.dump ( yArray ) );

	for( var i=0;i<xArray.length-1; i++ )
		drawLine( i, xArray[ i ], yArray[ i ], xArray[ i+1 ], yArray[ i+1 ] );
*/
	var i	= 0;

	Debug ( $.dump ( xArray ), $.dump ( yArray ) );

	drawLine( i, xArray[ i ], yArray[ i ], xArray[ i+1 ], yArray[ i+1 ] );
}

function beginRubber ( $oItem )
{
/*
//	clearInterval ( rubberBand );

	var p	= $oItem.offset();

	var r	= p.left	+ $oItem.width();
	var b	= p.top	+ $oItem.height();

	xArray = [r,r];
	yArray = [b,b];

	$("#ost_west_ratespiel").mousemove
//	$("document").mousemove
	(
		function (e)
		{
//			xArray[ xArray.length-1 ] = e.clientX;
//			yArray[ yArray.length-1 ] = e.clientY;
			xArray[ 1 ] = e.clientX;
			yArray[ 1 ] = e.clientY;

			updateFrame();
		}
	);

//	rubberBand	= setInterval( updateFrame, 25 );
*/
}

function endRubber ()
{
/*
	$("#ost_west_ratespiel").unbind ( 'mousemove' );
//	$("document").unbind ( 'mousemove' );

//	clearInterval ( rubberBand );

	$('.line').remove();
*/
}

$(document).ready
(
	function()
	{
		preloadedImages = $('#preload img');

		$('#start_game').click
		(
			function (e)
			{
				createGame();
			}
		);

		$('#show_solved').click
		(
			function (e)
			{
				solveGame();
			}
		);

		createGame();
	}
);