/*
Copyright (c) Alnovi
Author: Andreas Jonderko
All rights reserved 
*/

Quiz = {
	offset :{x: 275, y: 90},
	board : '#content_right',
	ready : false,
	started : false,
	current : null,
	ie55: null,
	ie6: null,
	

	navigation: [
		{id: 'quiz', title: 'Start Quiz', x: 380, y:0, target: 'quiz.html'},
		{id: 'gewinnspiel', title: 'Gewinnspiel', x: 380, y:0},
		{id: 'downloads', title: 'Downloads', x: 530, y:0}
	],

	layer : [
		{id: 'Background' ,x: 0, y:0, index:0, visible: 1},
		{id: 'Wasser' ,x: 0, y:0, index:18, visible: 1},
		{id: 'Reier' ,x: 0, y:0, index:4, visible: 0},
		{id: 'Schwanen' ,x: 0, y:0, index:5, visible: 0},
		{id: 'Mosaik' ,x: 0, y:0, index:5, visible: 0},
		{id: 'Seefrosch' ,x: 0, y:0, index:7, visible: 0},
		{id: 'Froschbiss' ,x: 0, y:0, index:20, visible: 0},
		{id: 'Krebs' ,x: 0, y:0, index:9, visible: 0},
		{id: 'Wasser2' ,x: 0, y:0, index:1, visible: 1},
		{id: 'Wasserlinse' ,x: 0, y:0, index:10, visible: 0},
		{id: 'Hecht' ,x: 0, y:0, index:12, visible: 0},
		{id: 'Armleuchter' ,x: 0, y:0, index:13, visible: 0},
		{id: 'Schlamm' ,x: 0, y:0, index:14, visible: 0},
		{id: 'Teller' ,x: 0, y:0, index:15, visible: 0},
		{id: 'Maus' ,x: 0, y:0, index:10, visible: 0},
		{id: 'Post' ,x: 0, y:0, index:20, visible: 0},
		{id: 'Wasserspinne' ,x: 0, y:0, index:14, visible: 0},
		{id: 'Kaefer' ,x: 0, y:0, index:10, visible: 0}
	],

	targets : [
		{id: 'Krebs' ,x: 355, y:290, hit:0},
		{id: 'Mosaik' ,x: 330, y:130, hit:0},
		/*{id: 'Mosaik' ,x: 245, y:365, hit:0},*/
		{id: 'Schlamm' ,x: 320, y:450, hit:0},
		{id: 'Armleuchter' ,x: 635, y:480, hit:0},
		{id: 'Post' ,x: 340, y:530, hit:0},
		{id: 'Teller' ,x: 600, y:535, hit:0},
		{id: 'Kaefer' ,x: 205, y:400, hit:0},
		{id: 'Wasserspinne' ,x: 525, y:505, hit:0},
		{id: 'Maus' ,x: 150, y:315, hit:0},
		{id: 'Seefrosch' ,x: 215, y:200, hit:0},
		{id: 'Wasserlinse' ,x: 480, y:400, hit:0},
		{id: 'Froschbiss' ,x: 375, y:370, hit:0},
		{id: 'Schwanen' ,x: 20, y:95, hit:0},
		{id: 'Reier' ,x: 110, y:130, hit:0},
		{id: 'Hecht' ,x: 535, y:435, hit:0}
	],

	/* category_atrisk = gefährdet 
	   category_extinction = Vom Aussterben bedroht
	   category_notatrisk = derzeit nicht gefährdet 
	   category_hardatrisk = Stark gefährdet
	*/
	items : [
		{id: 'Krebs' ,target: '.category_atrisk', title: 'Krebsschere'},
		{id: 'Mosaik' ,target: '.category_extinction', title: 'Gruene Mosaikjungfer'},
		{id: 'Schlamm' ,target: '.category_hardatrisk', title: 'Schlammpeitzger'},
		{id: 'Armleuchter' ,target: '.category_notatrisk', title: 'Feine Armleuchteralge'},
		{id: 'Post' ,target: '.category_notatrisk', title: 'Posthornschnecke'},
		{id: 'Teller' ,target: '.category_extinction', title: 'Feine (Zierliche) Tellerschnecke'},
		{id: 'Kaefer' ,target: '.category_hardatrisk', title: 'Großer Kolbenwasserkäfer'},
		{id: 'Wasserspinne' ,target: '.category_atrisk', title: 'Wasserspinne'},
		{id: 'Maus' ,target: '.category_hardatrisk', title: 'Wasserspitzmaus'},
		{id: 'Seefrosch' ,target: '.category_atrisk', title: 'Seefrosch'},
		{id: 'Wasserlinse' ,target: '.category_notatrisk', title: 'Dreifurchige Wasserlinse'},
		{id: 'Froschbiss' ,target: '.category_notatrisk', title: 'Froschbiss'},
		{id: 'Schwanen' ,target: '.category_atrisk', title: 'Schwanenblume'},
		{id: 'Reier' ,target: '.category_notatrisk', title: 'Graureiher'},
		{id: 'Hecht' ,target: '.category_atrisk', title: 'Hecht'},
		/*dummy*/
		{id: '' ,target: '.category_atrisk', title: ''},
		{id: '' ,target: '.category_notatrisk', title: ''},
		{id: '' ,target: '.category_extinction', title: ''}
	],
	/* start */
	init: function(){
		this.initNavigation();
		this.initElements();
		this.useFireFox();
				
		switch (Quiz.current){
			case 'index':
				this.initContent();
				this.intro();
				break;
			case 'downloads':
				this.initContent();
				break;
			case 'quiz':
				this.initContent();
				this.start();
			default:
			
			break;
		}
		
	},
	/* preload */
	load: function(id)	{
	  this.current = id;
	  this.ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
	  this.ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

	  $.each(Quiz.layer, function(nr, layer){
      		var src = 'content/'+layer.id+'_layer.png';
            var img = new Image();
            img.src = src;
      });
	},
	/* function check if images and items are loaded */
	completed: function()
	{
		n = 0;
		l = document.images.length;
		for(i=0; i < l; i++) if(document.images[i].complete == true) n++;
		if(n < l) setTimeout("Quiz.completed()",100); else Quiz.ready();
	},
	/*called when everything is loaded*/
	ready: function()
	{
		$(document).ready(function(){
			Quiz.init();
			$('#preload').css({display: 'none'});
		});
	},
	
	initNavigation: function(){
	
		$(this.board).append('<div id="navigation"></div>');
		$.each( this.navigation, function(nr, nav){ 
  		var id = 'nav_'+nav.id;
  		var className = 'nav_normal';
  		
		var target = nav.id+'.html';
  		if (nav.target) target = nav.target;
  		
  		if (nav.id == Quiz.current) className='nav_selected'; 
  		var el = '<a class="'+className+'" href="'+target+'" id="'+id+'" title="'+nav.title+'" />>> '+nav.title+'</a>';
  		$('#navigation').append(el);
		});
	},
	
	initContent : function(){
		$.each( this.layer, function(nr, layer){ 
  			var id = 'layer_'+layer.id;
  			var visibility = '';
 			//if (!layer.visible) visibility = 'display: none; ';
 			
			var src = 'content/'+layer.id+'_layer.png';
			var style= visibility+'width: 675px; height: 590px; position:absolute; z-index:'+layer.index+'; top: '+ (Quiz.offset.y + layer.y)+'px; left: '+(Quiz.offset.x + layer.x)+'px;'; 
  			
  			//if (!layer.visible) visibility = 'opacity: 0.0; filter:alpha(opacity=30);';
  			var className = 'layer';
  			var alt = nr;
  			var title = '';
  			var img = Quiz.createImage(src, id, className, style, alt, title);

  			$(Quiz.board).append(img);
		});
		Quiz.fixPNG();
	},

	initElements: function(){
	
		var extinction = '<h1>Vom Aussterben bedroht</h1>';
		var hardrisk = '<h1>Stark gefährdet</h1>';
		var risk = '<h1>Gefährdet</h1>';
		var notrisk = '<h1>Derzeit nicht gefährdet</h1>';
		$('.category_extinction').append(extinction);
		$('.category_hardatrisk').append(hardrisk);
		$('.category_atrisk').append(risk);
		$('.category_notatrisk').append(notrisk);
	
		$.each( this.items, function(nr, item){
			var className = 'draggable';
			if (item.id) {
				var id = 'item_'+item.id;
				// decide which graphics to take
				var pic = '';
				if (Quiz.current == 'quiz')
				{

				}
				else
				{
					pic = '_grey';
				}
				var src = 'content/'+item.id+pic+'.png';
				
			}
			else {
				var id = 'dummy_'+nr;
				var src = 'gfx/dummy.png';
				className = '';
			}
			var img = '<img id="'+id+'" class="item '+className+'" src="'+src+'" alt="'+item.title+'" title="'+item.title+'"/>';
			$(item.target).append(img);

		});
	},
	createImage : function(src, id, className, style, alt, title)
	{
		if (id) id = ' id="'+id+'" ';  
		var img = '<img src="'+src+'" '+id+' class="'+className+'" style="'+style+'"  alt="'+alt+'" title="'+title+'"  />';
		return img;
	},
	fixPNG: function(){
	  
  	  if (!jQuery.browser.msie || !(Quiz.ie55 || Quiz.ie6)) {
	  	return;
	  }
 

	  $.each( $('img'), function(nr, img){ 
	  		
	  		img = $(img);
	  		var src = img.attr('src');
	  		
	  		if (src.substring(src.length-3, src.length).toUpperCase() == "PNG")
      		{		
				// set default attributes
				if (img.css('display') == 'inline')
				{
					img.css({display:'inline-block'});	// set css display by default if nothing else is set
				}
				img.css({width:img.width(), height: img.height()});	// set width / height
				
				// get attributes
				var id = img.attr('id') ? ' id="' + img.attr('id') + '" ' : "";
				var className = img.attr('class') ? ' class="' + img.attr('class') + '" ' : "";
				var title = img.attr('title') ? ' title="' + img.attr('title') + '" ' : "";
				var style = img.get(0).style.cssText;
				// create span with filter style attribute
				var replacement = '<span '+title+className+id+' style="'+style+' ;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+src+'\', sizingMethod=\'scale\');" >&nbsp;</span>';
				// overwrite image
				img.before(replacement);
				img.remove();
			}
	  });
	},
	
	remove : function(el){
		$(this).remove();
	},
	/* image toggle wrapper , wath out for the browser differences */
	toggleImage : function(id, newSrc)
	{
		img = $('#'+id);
		
	  	if (newSrc.substring(newSrc.length-3, newSrc.length).toUpperCase() == "PNG" && (jQuery.browser.msie && (Quiz.ie55 || Quiz.ie6)) )
		{
			img.css({filter:''});
			var style = img.get(0).style.cssText;
			var newImage = Quiz.createImage(newSrc, id, img.attr('class'), style, img.attr('alt'), img.attr('title'));
			img.before(newImage);
			img.remove();
			Quiz.fixPNG();
		}
		else
		{
			img.get(0).src = newSrc;
		}
	},
	
	useFireFox : function(){
	
		if (jQuery.browser.msie && (Quiz.ie55 || Quiz.ie6)) {
	  		id = 'useFireFox';
	  		var el = $('#'+id);
	  		el.css({display: 'block'});
		}
	},	
	// Animate
	intro : function(){
		
		var animation1 = '<h1 id="animation1">Willkommen beim <br /><span style="padding-left: 75px;">Bremer-Graben-Spiel!</span></h1>'; 
		var animation2 = '<h2 id="animation2">Was ist was? Wer kennt die Tiere und Pflanzen?</h2>'; 
		
		$('#content_top').append(animation1);
		$('#content_top').append(animation2);
	},
	start: function(){
		if (!Quiz.started){
			Quiz.started = true;

			$.each( Quiz.layer, function(nr, layer){ 
				var id = 'layer_'+layer.id;
	  			if (!layer.visible) 
	  			{
	  				var id = 'layer_'+layer.id;
	  				var el = $('#'+id);
	  				el.pause(nr*1400, Quiz.fadeOut(el, nr));
	  				//el.css({display:'none'});
	  			}
			});
			
		
			$('#content_top').empty();
			var animation1 = '<div id="animation1" style="opacity: 1.0;"><h1>Jetzt geht es los!</h1><h2>Einfach die Abbildung einer Art von der linken Bildleiste auf den richtigen Punkt ziehen und Du erfährst mehr über die Vielfalt im Bremer Graben!</h2></div>';		
			$('#content_top').append(animation1);

			$.each( Quiz.targets, function(nr, target){ 
	  			var id = 'target_'+target.id;
	  			var thick_id = 'thick_'+target.id;
	  			var src = 'gfx/point.png';
	  			if (target.point) src = 'gfx/'+target.point;
	  			var style = 'width: 17px; height: 17px; z-index: 30; position: absolute; top: '+ (Quiz.offset.y + target.y)+'px; left: '+(Quiz.offset.x + target.x)+'px;';
	 			var className = 'droppable';
	 			var alt = '';
	 			var title = '';
	  			
	  			var img = Quiz.createImage(src, id, className, style, alt, title);
	  			var a = '<a id="'+thick_id+'" class="thickbox">'+img+'</a>';
	  			$(Quiz.board).append(a);
			});
			
			Quiz.fixPNG();
			// init dragable elements
			$('#content .draggable').Draggable({
	   			zIndex: 	1000,
	  			ghosting:	true,
	  			revert:		true,
	  			opacity: 	0.7
	    	});
			$('#content .droppable').Droppable({
	    		accept : 'draggable',
	    		tolerance:	'intersect',
	    		ondrop:	function (drag){
					var i = this.id.substring(this.id.indexOf('_')+1);
					var t = drag.id.substring(drag.id.indexOf('_')+1);
					
					if (i==t)
					{
		 				Quiz.toggleImage(drag.id, 'content/'+i+'_grey.png');
		 				$(drag).DraggableDestroy();
		 				Quiz.hit(i);
		 			}
	    		}
	    	});
		}
		return false;
	},
	
	
	fadeOut : function(el, nr)
	{
		if (jQuery.browser.msie && (Quiz.ie55 || Quiz.ie6)) {
			//el.pause(1000);
			el.css({display:"none"});
			//el.css({filter:"alpha(opacity=60)"});
			//el.fadeOut(nr*800);
		}
		else
		{
			//el.animate({className: 'animationStart'},800);
			el.fadeOut(nr*800);
			//el.animate({opacity: '0.0'},nr*800);
			//el.css({display:"none"});
		}
		
	},

	
	initThick : function(target){
		
		var href='ajax.php?id='+target+'&amp;height=530&amp;width=320';
		$('#thick_'+target).get(0).href = href; 
		tb_init($('#thick_'+target).get(0));	// thickbox
		
		// thickbox
		var el = $('#thick_'+target).get(0);
		var t = el.title || el.name || null;
  		var a = el.href || el.alt;
  		var g = el.rel || false;
  		tb_show(t,a,g);
  		el.blur();
	},
	
	hit : function(target){
      	this.currentHit = target;  

	
	    $.each( this.layer, function(nr, layer){
	 	if (layer.id == Quiz.currentHit){
	 			
	 			layer.visible = 1;
	 			//$('img#layer_'+layer.id).css({display: 'block', opacity: '1.0'});
	 			$('#layer_'+layer.id).css({display: 'block', opacity: '1.0'});
	 			//$('#target_'+layer.id).get(0).src = 'gfx/point_disabled.png';
	 			Quiz.toggleImage('target_'+layer.id, 'gfx/point_disabled.png');

	 			var id = 'layer_'+layer.id;
	  			var el = $('#'+id);
				el.pause(nr*800);
				//el.fadeOut(800);
				el.animate({className: 'animationStop'},800);
	 		}
		});
		
		this.initThick(target);	// initialize the click function on the point
		
        Quiz.ready = true;
        $('#content_top').empty();
	 	$.each( this.targets, function(nr, item){
	 		if (item.id == Quiz.currentHit){
	 			item.hit = 1;
	 		}
			if (!item.hit) Quiz.ready = false;
		});
		//Quiz.ready = true;
		if (Quiz.ready)
		{
		/*
			$.each( Quiz.targets, function(nr, target){ 
  				var thick_id = '#thick_'+target.id;
 				var targetObj = $(thick_id);
 				targetObj.css({display: 'none'});
			});
			*/

			var top = '<h1>Herzlichen Glückwunsch!</h1><h2>Du bist Meister des Bremer Grabens.</h2>';
			//var bottom = '<p>Bist Du in der 5. - 12. Klasse<br />  an einer Bremer Schule?<br /> Dann kannst Du mit Deiner Klasse in<br />  der Zeit vom 20. Juni - 19. Juli 2008<br /> am Bremer Graben-Gewinnspiel teil-<br /> nehmen und einen Tag im Freilandlabor<br /> gewinnen. <a href="gewinnspiel.html">Hier klicken, um mehr zu erfahren.</a></p>';
			
			$('#legend').css({display: 'none'});
			
			$('#content_top').append(top);
			//$('#content_bottom').append(bottom);
		}
	}
}