var KREATION={
	
	overlay:null,
	fadeDuration:600,
	zoomOpacity:0.85,
	autoslideDelay:5,
	autoslideProcCounter:0,
	autoslideCounter:-1,
	autoslideInterval:null,
	autoslide:true,
	remoteURL:'/kreation/praesentation.php',
	kunden:[],
	charts:[],
	activeChart:-1,
	
	createOverlay:
		function()
		{
			if($('#kreation_overlay').length < 1)
			{
				this.overlay = $('<div id="kreation_overlay"></div>').css({
					opacity:0
				}).appendTo('body');
				$('<div id="praesentation"><div id="nav_praesentation"></div> <div id="charts"><div id="chart_inner"></div></div></div>').css({
					display:'none'
				}).appendTo('body');
			}
			$('#nav_praesentation, #chart_inner').html('');
			$('#praesentation').css('display', 'block');
			$('#chart_inner').html('').css("left", "0px");
		},
		
	prev:
		function()
		{
			var nextChart = KREATION.activeChart -1;
			if (nextChart < 0)
			{
				nextChart = KREATION.charts.length - 1;	
			}
			KREATION.showChart(nextChart);
		},
		
	next:
		function()
		{
			var nextChart = KREATION.activeChart +1;
			if (nextChart > KREATION.charts.length - 1)
			{
				nextChart = 0;	
			}
			//alert(KREATION.activeChart + ' - '+nextChart);
			KREATION.showChart(nextChart);
		},
		
	showcase:
		function(id)
		{
			this.createOverlay();
			this.autoslide = true;
			$('#nav_praesentation, #chart_inner').html('');
			this.overlay
				.css({
					opacity:0,
					display:'block'
				}).animate({
					opacity:this.zoomOpacity
				},{
					duration:500,
					complete:
						function(){
							$('#praesentation').css('display', 'block');
							KREATION._createNavigation(id);
						}
				});
		},
		
	closeShowcase:
		function()
		{
			KREATION._clearAutoSlide();
			$('#nav_praesentation, #chart_inner').html('');
			$('#praesentation').css({
							display:'none'
						});
			$('#kreation_overlay').animate({
					opacity:0
				},{
					duration:500,
					complete:function(){
						$('#kreation_overlay').css({
							display:'none'
						});
					}
				});
		
			$(document).unbind('keyup', KREATION._onKeypress);
		},
		
	setKunde:
		function(id, data)
		{
			this.kunden[id] = data;	
		},
		
	_onThumbClick:
		function(event)
		{
			event.preventDefault();
			KREATION.showChart($(this).data('index'));
		},
	
	_onTimer:
		function(index)
		{
			if (KREATION.autoslideProcCounter == index)
			{
				KREATION.next();	
			}
		},
		
	_onInterval:
		function(index)
		{
			if (KREATION.autoslideProcCounter == index)
			{
				if (KREATION.autoslideCounter < 0)
				{
					KREATION.autoslideCounter = KREATION.autoslideDelay;
				}
				KREATION.autoslideCounter --;
				if (KREATION.autoslideCounter <= 0)
				{
					KREATION.next();
				}
				else{
					$('#counter')
						.removeClass()
						.addClass('counter-'+KREATION.autoslideCounter);
				}
			}
			else{
				KREATION._clearAutoSlide();
			}
		},
		
	stop:
		function()
		{
			this.autoslide = false;
			this._clearAutoSlide();
			$('#counter').removeClass().addClass('counter-off');
		},
		
	start:
		function()
		{
			this.autoslide = true;
			this.next();
		},
		
	_clearAutoSlide:
		function()
		{
			KREATION.autoslideProcCounter++;
			$('#counter').removeClass();
			if (KREATION.autoslide)
			{
				$('#counter').addClass('counter-running');
			}
			else{
				$('#counter').addClass('counter-off');
			}
			KREATION.autoslideCounter = KREATION.autoslideDelay;
			clearInterval(KREATION.autoslideInterval);
		},
	
	showChart:
		function(index)
		{
			if(this.charts[index])
			{
				this.activeChart = index;
				this._clearAutoSlide();
				$('#chart_inner').stop();
				var left = index * 800 * -1;
				$('#chart_inner')
					.animate({
						left:left+'px'
					},{
						duration:KREATION.fadeDuration,
						easing:'easeInOutCirc',
						complete:function(){
							if (KREATION.autoslide)
							{
								$('#counter')
									.removeClass()
									.addClass('counter-'+KREATION.autoslideCounter);
								KREATION.autoslideInterval = setInterval("KREATION._onInterval("+KREATION.autoslideProcCounter+")", 1000);
							}	
						}
					});
							
				$('#nav_praesentation .active').removeClass('active');
				$('#chart_link_'+index)
					.addClass('active')
					.parents('li.projects_nav').addClass('active');
				this.activeChart = index;
			}
		},
		
	_createNavigation:
		function(id)
		{
			if (typeof(this.kunden[id]) == 'object')
			{
				this.charts = [];
				var counter = 0;
				var projectNavUl = $('<ul></ul>');
				$('#chart_inner').html('');
				
				$.each(this.kunden[id]['projects'], function(index1){
													
						var projectName = this.name;
						var chartsNavUl = $('<ul></ul>');
						var firstChartLink = '';
						$.each(this.charts, function(index2){
							
							if (this.thumb)
							{
								var chart = {};
								var thumb = this.thumb;
								var url = this.src;
								var type = this.type;
								var subtitle = this.beschreibung;

								chart['url'] = url;
								chart['type'] = type;
								chart['subtitle'] = this.beschreibung;
								KREATION.charts.push(chart);
		
								var link = $('<a></a>')
									.attr({
										href:url
									})
									.data('index', counter)
									.attr('id', 'chart_link_'+counter)
									.html('<img src="'+thumb+'" />')
									.focus(function(){this.blur();})
									.click(KREATION._onThumbClick);
									
								if (0 == index2)
								{
									firstChartLink =link;	
								}
								
								$('<li></li>')
									.append(link)
									.appendTo(chartsNavUl);
								
								var wrap = $('<div class="chart_wrapper"></div>')
														.css('left', (counter*800)+'px');
								switch(type)
								{
									case 'image':
										var img = $('<img src="'+url+'" class="chart"/>');
										img.preload({
											onFinish:function(){		
													var dt = $('<dt></dt>').append(img);
													var dd = $('<dd></dd>').html(subtitle);		
													var dl = $('<dl></dl>')
														.append(dt)
														.append(dd)
														.appendTo(wrap);
														
						
													
													dl.css({
														width:img.width()+'px' 
													});
													img.click(function(event){
														KREATION.next();				
														KREATION.autoslideProcCounter ++;
													});
												}
											});
										break;
									
									case 'template':
										$.ajax({
											url:url,
											success:function(data)
											{
													wrap.html(data);
												
											}
										});
								}
								$('#chart_inner').append(wrap);
								counter ++;
								
								
							}
						});
						$('<a></a>')
							.attr({
								href:firstChartLink.attr('href')
							})
							.html(projectName)
							.focus(function(){this.blur();})
							.click(function(event){
								event.preventDefault();
								$(this).next('ul:first').find('a:first').trigger('click');				
							})
							.wrap('<li></li>')
							.parent()
							.addClass('projects_nav')
							.hover(
								function()
								{
									$(this).addClass('hover');	
								},
								
								function()
								{
									$(this).removeClass('hover')	
								}
							)
							.append(chartsNavUl)
							.appendTo(projectNavUl );
				});
				
				
				$('#nav_praesentation')
					.html('')
					.append(projectNavUl);
					
				$('<a id="toggleBtn"></a>')
					.html('stop')
					.attr('href', '#')
					.addClass('stop')
					.click(function(event){
						event.preventDefault();
						if ($(this).hasClass('stop') || $(this).hasClass('stop_over'))
						{
							KREATION.stop();
							$(this)
								.removeClass()
								.addClass('start')
								.html('start');
						}
						else if ($(this).hasClass('start') || $(this).hasClass('start_over'))
						{
							KREATION.start();
							$(this)
								.removeClass()
								.addClass('stop')
								.html('stop');
						}
					})
					.hover(
								function()
								{
									if ($(this).hasClass('stop'))
									{	
										$(this)
											.removeClass('stop')
											.addClass('stop_over');
									}
									else if ($(this).hasClass('start'))
									{
										$(this)
											.removeClass('start')
											.addClass('start_over');
									}
								},
								function()
								{
									if ($(this).hasClass('stop_over'))
									{	
										$(this)
											.removeClass('stop_over')
											.addClass('stop');
									}
									else if ($(this).hasClass('start_over'))
									{
										$(this)
											.removeClass('start_over')
											.addClass('start');
									}
								}
							)
					.appendTo('#nav_praesentation');
					
					$('<span id="counter">5</span>')
						.appendTo('#nav_praesentation');
				
				KREATION.showChart(0);
				$(document).bind('keyup', KREATION._onKeypress);
			}
			else{
				$('#nav_praesentation')
					.html('<span class="loading">Daten werden geladen</span>')
				this._loadCustomer(id, KREATION._createNavigation);	
			}	
			
			$('<a href="#" id="kreation_close" title="schließen">schließen</a>')
					.click(KREATION.closeShowcase)
					.appendTo('#nav_praesentation');
		},
		
	_onKeypress:
		function(event)
		{
			switch(event.keyCode)
			{
				case 37: 	KREATION.prev();
								break;
				case 39: 	KREATION.next();
								break;
				case 27: 	KREATION.closeShowcase();
								break;
			}
		},
		
	_loadCustomer:
		function(id, callback)
		{	
			var _this = this;
			$.ajax({
				url:this.remoteURL,
				data:{
					ajax:1,
					kunde:id
				},
				dataType:'json',
				success:
					function(data)
					{
						_this.setKunde(id, data);
						if(typeof(callback) == 'function')
						{
							callback.apply(_this, [id]);	
						}
					}
			});
		}
};