if (typeof jQuery != 'undefined') {
	jQuery(document).ready(function(){
		kitchenObj.init();	
	});
}

var kitchenObj= {
	ie6: false,
	kitchenImages : null,
	activeElem: 0,

	init: function() {
		if (jQuery.browser.msie && jQuery.browser.version<7)
			kitchenObj.ie6=true;

		// get kitchen images
		kitchenObj.kitchenImages=$('.canvas-kitchen .kitchen-image');
		
		jQuery(jQuery('.kitchen-selector div')[0]).addClass('selected');
		
		// set hover effects
		if (!kitchenObj.ie6) {
			jQuery('.menu-offers li').mouseover( function() {$(this).addClass('active')});
			jQuery('.menu-offers li').mouseout( function() {$(this).removeClass('active')});				
		}
		else {
			jQuery('.menu-offers li').mouseover(function(){
				$(this).removeClass('selected');
				$(this).removeClass('active');
				var className=this.className+'-selected';
				className=className.replace(/ /, '');
				this.className='';
				$(this).addClass(className);
				
			});
			jQuery('.menu-offers li').mouseout(function(){
				var className=this.className;
				className=className.replace(/-selected/, '');
				this.className='';
				$(this).addClass(className);
				
			});
			
		}

		
		// set onclick action
		//jQuery('.kitchen-selector div').click( function() {kitchenObj.triggerClick(this);});
		jQuery('.menu-offers li').click( function() {kitchenObj.triggerClick(this);});


		// set display values
		$('.kitchen-image').css('display','none');
		$('.kitchen-1').css('display','block');

		// Init Countdown Bar
		kitchenObj.countdown();
	},
	
	triggerClick: function(elem){
		// Reset Counter
		$('#counter').width(0);
		
		// remove all selections
		//jQuery('.kitchen-selector div').removeClass('active').removeClass('selected');
		jQuery('.menu-offers li').removeClass('active').removeClass('selected');

		jQuery(elem).addClass('selected');
		var className = elem.className;
		className = className.replace(/\s*active\s*/g, '');
		var tmp = className.match(/\d+/);
		if (tmp && tmp[0]) {
			var id = tmp[0];
			kitchenObj.toFront(id);
		}
	},
	
	// Countdown Bar
	countdown: function(){
		// Wenn Countdown Bar größer/gleich 958  ist... 958
		if( $('#counter').width() <= 716 ) /* 985 */
		{
			// Countdown Bar +3px Zuwachs pro Interval... 2
			$('#counter').css('width',$('#counter').width()+3);
		}
		// Countdown Bar voll...
		else
		{
			// Dann neu starten...
			$('#counter').width(0);

			// Ich benutze hier eine Globale Var,
			// um zu jedem Zeitpunkt überall auf das
			// aktive Element zugreifen zu können.
			kitchenObj.activeElem++;
			var maxImages=jQuery('.kitchen-selector li').length;
			if( kitchenObj.activeElem > maxImages ) kitchenObj.activeElem = 1;

			// Alle aktiven Menüeinträge inaktiv machen...
			jQuery('.menu-offers li').removeClass('active').removeClass('selected');
			// Nächsten Eintrag aktiv machen...
			$('.mi-item-' + kitchenObj.activeElem).addClass('selected');

			// Content rechts auch ändern...
			kitchenObj.toFront(kitchenObj.activeElem);
		}
		// Legt den Interval fest, indem die Countdown Bar sich füllt... 25ms
		setTimeout('kitchenObj.countdown()',10);
	},

	setZIndex: function(elem, num) {
		elem.css('z-index', num);
	},
	
	toFront: function(num, fade) {
		if (typeof fade=='undefined')
			fade=true;
		else
			fade=false;
		// Damit die Countdown Bar manuelle Wechsel berücksichtigt :)
		kitchenObj.activeElem = num;
	
		for (i=0; i<kitchenObj.kitchenImages.length; i++) {
			var className=kitchenObj.kitchenImages[i].className;
			className=className.replace(/\s*kitchen-image\s*/g, '');
			var tmp = className.match(/\d+/);
			if (tmp && tmp[0]) {
				var id = tmp[0];
				if (id == num) {
					kitchenObj.setZIndex($('.canvas-kitchen .kitchen-' + id), 10);
					if (fade)
						$('.canvas-kitchen .kitchen-' + id).fadeIn(1000);
					else
						$('.canvas-kitchen .kitchen-' + id).fadeIn(1);
				}
				else
				{
					if (fade)
						$('.canvas-kitchen .kitchen-' + id).fadeOut(1000);
					else
						kitchenObj.setZIndex($('.canvas-kitchen .kitchen-' + id), i + 1);
				}
			}
			
		}
		return;
		var elem=$('.canvas-kitchen .kitchen-'+num);
		if (elem) {
			var zIndex=parseInt(elem.css('z-index'));
			zIndex+=10;
			elem.css('z-index', parseInt(zIndex));
		}
	}		
};