jQuery(function() {
	
	jQuery('#meinung .teaser-area input[name="plakat"]').val('zuebeyde');
	
	jQuery('#multiteaser .plakat-bot a').click(eventChangePlakatClick);
	
	jQuery('#multiteaser .b_playvideo').click(eventPlayVideoClick);
	
	jQuery('#multiteaser .b_plakat').click(eventPlakatClick);
	
	jQuery('#multiteaser .b_meinung').click(eventMeinungSagenClick);
	
	jQuery('#multiteaser .b_senden').live('click', eventSendenClick);
	
	// damit die Bilder nicht draggable sind
	jQuery('#multiteaser img').live('mousedown', function(event) {
		event.preventDefault();
	});
	
	// Wenn auf Play gedrückt wird, werden alle anderen Videos pausiert
	jQuery('.video-js').bind('play', function(event) {
		
		var el = this;
		
		// alle anderen Videos pausieren
		if(!jQuery.browser.msie) {
			jQuery('.video-js').each(function() {
				if(this != el) this.pause();
			});
		}
	});
})

// liefert ein Array zurück mit den Bildpfaden und Namen der einzelnen Plakatbotschafter zurück
function getImages() {
	
	var botschafter = new Array('zuebeyde', 'marcel', 'ernst', 'thomas');
	
	var images = new Array();
	
	for(var i=0; i<botschafter.length; i++) {
		
		var bot = new Array();
		
		bot['name'] = botschafter[i];
		
		var image = new Image();
		image.src = 'img/multiteaser2011/'+botschafter[i]+'.png';
		bot['standard'] = image;
		
		
		image = new Image();
		image.src = 'img/multiteaser2011/'+botschafter[i]+'_selected.png';
		bot['selected'] = image;
		
		image = new Image();
		image.src = 'img/multiteaser2011/plakat_'+botschafter[i]+'.jpg';
		bot['plakat'] = image;
		
		images[i] = bot;
	}
	
	return images;
}

// mit dieser Funktion lässt sich der Zustand der Buttons (".b_plakat", ".b_meinung", ".b_senden") ändern
function changeButtonState(el, state) {
	
	if(jQuery(el).hasClass('b_plakat')) {
		
		var botschafter = jQuery('#meinung input[name="plakat"]').val();
		
		if(state == 'active') {
			jQuery('#multiteaser .b_plakat img').attr('src', rel2rootweb+'img/multiteaser2011/b_'+botschafter+'_selected.png');
		}
		else if(state == 'inactive') {
			jQuery('#multiteaser .b_plakat img').attr('src', rel2rootweb+'img/multiteaser2011/b_'+botschafter+'.png');
		}
	}
	else if(jQuery(el).hasClass('b_meinung')) {
		if(state == 'active') {
			jQuery('#multiteaser .b_meinung img').attr('src', rel2rootweb+'img/multiteaser2011/b_meinungsagen_selected.png');
		}
		else if(state == 'inactive') {
			jQuery('#multiteaser .b_meinung img').attr('src', rel2rootweb+'img/multiteaser2011/b_meinungsagen.png');
		}
		else if(state == 'finished') {
			jQuery('#multiteaser .b_meinung img').attr('src', rel2rootweb+'img/multiteaser2011/b_meinungsagen_finished.png');
		}
	}
	else if(jQuery(el).hasClass('b_senden')) {
		if(state == 'step1') {
			jQuery('#multiteaser .b_senden').attr('src', rel2rootweb+'img/multiteaser2011/b_weiter.png');
			jQuery('#multiteaser .b_senden').show();
		}
		else if(state == 'step2') {
			jQuery('#multiteaser .b_senden').attr('src', rel2rootweb+'img/multiteaser2011/b_senden.png');
			jQuery('#multiteaser .b_senden').show();
		}
		else if(state == 'invisible') {
			jQuery('#multiteaser .b_senden').hide();
		}
	}
}

// wird gefeuert, wenn man auf den Button unten links klickt
// Animiert das Plakatbild in den Sichtbereich
function eventPlakatClick(event) {
	event.preventDefault();
	
	jQuery('#multiteaser .video-wrapper').addClass('hidden');

	jQuery('#multiteaser .teaser-area').stop();
	jQuery('#multiteaser .teaser-area').animate({ left: '0' }, 1000, function() {
		changeButtonState(jQuery('#multiteaser .b_plakat'), 'active');
		changeButtonState(jQuery('#multiteaser .b_meinung'), 'inactive');
		changeButtonState(jQuery('#multiteaser .b_senden'), 'invisible');
	});
	
	// alle Videos pausieren
	if(!jQuery.browser.msie) {
		jQuery('.video-js').each(function() {
			this.pause();
		});
	}
	else {
		$f("*").each(function() {
			this.pause();
		});
	}
}

// wird gefeuert, wenn auf den Play Video Button geklickt wird.
function eventPlayVideoClick(event) {
	event.preventDefault();
	
	var botschafter = jQuery('#meinung input[name="plakat"]').val();	
	
	jQuery('#multiteaser .video-wrapper').removeClass('hidden');
	
	jQuery('#multiteaser .video-wrapper').children().addClass('hidden');
	jQuery('#multiteaser .video-wrapper .'+botschafter).removeClass('hidden');
	
	
	if(!jQuery.browser.msie) {
		// Video abspielen
		jQuery('#multiteaser .video-wrapper .'+botschafter + ' .video-js').get(0).play();
	}
	else {
		$f("*").each(function() {
			if(this.id().toLowerCase() != 'vid-'+botschafter+'-730') {
				this.pause();
			}
		});
//		
//		$f("*").each(function() {
//			if(this.id().toLowerCase() == 'vid-'+botschafter+'-730') {
//				this.play();
//			}
//		});
	}
	
	// schaltet wieder zum Plakat um, nachdem das Video zuende ist
//	jQuery('#multiteaser .video-wrapper .'+botschafter + ' .video-js').bind('ended', function() {
//		jQuery('#multiteaser .video-wrapper').addClass('hidden');
//	});
}

// wird gefeuert, wenn auf einen Plakatbotschafter in der rechten Leiste geklickt wird
function eventChangePlakatClick(event) {
	event.preventDefault();
	
	var images = getImages();
	
	jQuery('#multiteaser .form_title').attr('src', 'img/multiteaser2011/form_title_'+images[jQuery(this).index()]['name']+'.gif');
		
	jQuery('#multiteaser .plakat-bot a img').each(function(index) {
		var image = images[index]['standard'];
		jQuery(this).replaceWith(jQuery(image).clone());
	});

	jQuery('#multiteaser input[name=plakat]').val(images[jQuery(this).index()]['name']);

	var image = images[jQuery(this).index()]['selected'];
	jQuery(this).find('img').replaceWith(jQuery(image).clone());
	image = images[jQuery(this).index()]['plakat'];
	jQuery('#multiteaser img.plakat').replaceWith(jQuery(image).addClass('plakat').attr('usemap', '#plakat_Map').clone());
	
	changeButtonState(jQuery('#multiteaser .b_plakat'), 'active');
	
	jQuery('#multiteaser .video-wrapper').addClass('hidden');
	
	jQuery('#multiteaser .b_more').attr('href', rel2rootweb + 'menschen/index.php?bid=' + plakatbotschafter[images[jQuery(this).index()]['name']] + '&view=portrait');
	
	jQuery('#multiteaser .b_plakat').click();
	
	// alle Videos pausieren
//	if(!jQuery.browser.msie) {
//		jQuery('.video-js').each(function() {
//			this.pause();
//		});
//	}
//	else {
//		flowplayer("*").each(function() {
//			this.pause();
//		});
//	}
}

function eventMeinungSagenClick(event) {
	event.preventDefault();

	goToStep1();
}

function eventSendenClick(event) {
	event.preventDefault();
	
	var data = jQuery('#meinung').serializeArray();
	data.push({name: 'ajax', value: 'y'});

	jQuery.ajax ({
			url: "index.php",
			type: "POST",
			data: data,
			dataType: "html",
			contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			success: function(data){
				var result = jQuery.parseJSON(data);
		
				if(result.errormsg.step1) {
					goToStep1(result);
				}
				else if(result.errormsg.step2 || result.errormsg.formcode) {
					goToStep2(result);
				}
				else {
					goToStep3();
				}
			}
		});
//	jQuery.post('index.php?ajax=y', jQuery('#meinung').serialize(), function(data) {
//		
//		var result = jQuery.parseJSON(data);
//		
//		if(result.errormsg.step1) {
//			goToStep1(result);
//		}
//		else if(result.errormsg.step2 || result.errormsg.formcode) {
//			goToStep2(result);
//		}
//		else {
//			goToStep3();
//		}
//	});
}

function goToStep1(result) {
	jQuery('#multiteaser .step2 .errors').hide();
	jQuery('#multiteaser .step2 .title').show();
	jQuery('#multiteaser input, #multiteaser textarea').removeClass('error');	
	
	// alle Videos pausieren
	if(!jQuery.browser.msie) {
		jQuery('.video-js').each(function() {
			this.pause();
		});
	}
	else {
		$f("*").each(function() {
			this.pause();
		});
	}
	
	jQuery('#multiteaser .teaser-area').stop();
	jQuery('#multiteaser .teaser-area').animate({ left: '-731' }, 1000, function() {
	
		changeButtonState(jQuery('#multiteaser .b_plakat'), 'inactive');
		changeButtonState(jQuery('#multiteaser .b_meinung'), 'active');
		changeButtonState(jQuery('#multiteaser .b_senden'), 'step1');
	
	});
	
	
	jQuery('#multiteaser .errors').empty();	
	jQuery('#multiteaser input, #multiteaser textarea').removeClass('error');
	
	if(result) {
		jQuery.each(result.errormsg.step1, function(key, val) {
			jQuery('#multiteaser .step1 .errors').append('<p>' + val + '</p>');
		});
		
		jQuery.each(result.errorfields, function(key, val) {
			jQuery('#meinung *[name="'+val+'"]').addClass('error');
		});
		
		jQuery('#multiteaser .step1 .title').hide();
		jQuery('#multiteaser .step1 .errors').show();
	}
	else {
		jQuery('#multiteaser .step1 .title').show();
		jQuery('#multiteaser .step1 .errors').hide();
	}
}

function goToStep2(result) {
	jQuery('#multiteaser .errors').empty();	
	jQuery('#meinung .error').removeClass('error');
	
	if(jQuery('#multiteaser .teaser-area').css('left') != '-1462px') {
	
		jQuery('#multiteaser .teaser-area').stop();
		jQuery('#multiteaser .teaser-area').animate({ left: '-1462' }, 1000, function() {
			changeButtonState(jQuery('#multiteaser .b_senden'), 'step2');
		});
	}
	else {
		if(result) {
			
			if(result.errormsg.step2) {
				jQuery.each(result.errormsg.step2, function(key, val) {
					jQuery('#multiteaser .step2 .errors').append('<p>' + val + '</p>');
				});
			}

			if(result.errormsg.formcode) {
				jQuery('#multiteaser .step2 .errors').append('<p>' + result.errormsg.formcode + '</p>');
			}

			jQuery.each(result.errorfields, function(key, val) {
				jQuery('#meinung input[name="'+val+'"]').addClass('error');
			});
			
			jQuery('#multiteaser .step2 .title').hide();
			jQuery('#multiteaser .step2 .errors').show();
		}
		else {
			jQuery('#multiteaser .step2 .title').show();
			jQuery('#multiteaser .step2 .errors').hide();
		}
	}
}

function goToStep3() {
	jQuery('#multiteaser .errors').empty();	
	jQuery('#meinung input').removeClass('error');
	jQuery('#meinung textarea[name="comment"], #meinung input[name="name"], #meinung input[name="email"], #meinung input[name="formcode"]').val('');
	
	
	jQuery('#multiteaser .teaser-area').stop();
	jQuery('#multiteaser .teaser-area').animate({ left: '-2193' }, 1000, function() {
		
		changeButtonState(jQuery('#multiteaser .b_plakat'), 'inactive');
		changeButtonState(jQuery('#multiteaser .b_meinung'), 'finished');
		changeButtonState(jQuery('#multiteaser .b_senden'), 'invisible');
		
	});
}