/* ______________________________________________________
 *
 *	URL:		www.ardzdfundsie.de
 *	AUTHOR: 	Markus Müller & Christian Schiffler @ feedback media design
 *	DATE:		October 20th, 2011
 * ______________________________________________________
 */

function popup(url) {
	
	win = window.open(url, 'popup', 'width=400,height=600,resizable=no,scrollbars=yes');
	win.focus();
	return false;
}

function popup_image(url) {
	
	win = window.open(url, 'popup', 'width=427,height=576,resizable=no,scrollbars=yes');
	win.focus();
	return false;
}

function popup_form(url) {
	
	win = window.open(url, 'popup', 'width=400,height=450,resizable=no,scrollbars=yes');
	win.focus();
	return false;
}

var MyAZUS=null;
$(document).ready(function(){
	MyAZUS=new AZUS({
		background: {
			img: 'img.background',
			width: 1600,
			height: 700
		},
		content:[
			{
				tooltip: '#t_printmotive',
				tooltippos: [220,315],
				content: '#c_printmotive',
				init: function() {
					$('#c_printmotive a.imagelink').click(function()
					{
						return popup_image(this.href);
					});
				}
			},
			{
				tooltip: '#t_ardundzdf',
				tooltippos: [370,615],
				content: '#c_ardundzdf'
			},
			{
				tooltip: '#t_ichwardabei',
				tooltippos: [750,440],
				content: '#c_ichwardabei',
				init: function() {
					$('#facebook-share-button-ichwardabei').click(function(){
						var me=MyAZUS.content;
						postToFacebook(me.socialtext+' http://ardzdf.de', me.url, me.image);
						return false;
					});
					$('#ichwardabeiback a').click(function(){
						$('#postcardbuilder').show();
						$('#postcarddisplay').hide();
						$('#ichwardabeiback').hide();
						$.address.value('ichwardabei');
						return false;
					});
				},
				show: function(subpath){
					if(subpath.length)
					{
						if(MyAZUS.mypicture)
						{
							$('#postcarddisplay .socialmedia').show();
						} else {
							$('#postcarddisplay .socialmedia').hide();
						}
						MyAZUS.mypicture=false;
						var me=MyAZUS.content;
						var text=['Ich war beim Fall der Berliner Mauer dabei. Mittendrin. Dank ARD und ZDF.',
						'Ich war bei der Hochzeit von William und Kate dabei. Mittendrin. Dank ARD und ZDF.',
						'Ich war beim WM Sommermärchen 2006 dabei. Mittendrin. Dank ARD und ZDF.',
						'Ich war bei der Mondlandung 1969 dabei. Mittendrin. Dank ARD und ZDF.'
						];
						$('#postcardbuilder').hide();
						me.pic=subpath[0];
						me.pictype=me.pic.split('_').shift()-1;
						me.socialtext=text[me.pictype];
						me.url=pageRoot+'i_'+me.pic;
						me.image=pageRoot+'output/'+me.pic+'.jpg';
						var btn=$('#twitter-share-button-ichwardabei')[0];
						btn.href='http://twitter.com/home?status='+encodeURIComponent(me.socialtext+' '+me.url);
						$('#ichwardabeipic')[0].src=me.image;
						$('#postcarddisplay').show();
						$('#ichwardabeiback').show();
					}
				}
			},
			{
				tooltip: '#t_spotansehen',
				tooltippos: [1190,295],
				content: '#c_spotansehen',
				show: function(){
					var video = $('video')[0];
					// autoplay
					// video.play();
				},
				hide: function(){
					var video = $('video')[0];
					if(video && typeof(video.pause)!='undefined')
						video.pause();
					var obj = swfobject.getObjectById("videocontainer");
					if(obj) { obj.JavaScriptToFlash(); }
				}
			},
			{
				tooltip: '#t_wowarwas',
				tooltippos: [1135,585],
				content: '#c_wowarwas',
				show: function(){
					map.resize();
				}
			}
		]
	});
});

var AZUS = function(options)
{
	this.init(options);
};
AZUS.prototype={
	init: function(options)
	{
		this.options=options;
		this.content=null;
		this.background=$($(options.background.img)[0]);
		this.options.background.ratio=this.background.width()/this.background.height();
		var me=this;
		$(options.content).each(function(i, e){
			var c=e;
			$(e.tooltip).click(function(e){
				me.showContent(c);
				e.stopPropagation();
				return false;
			});
			if(e.init)
				e.init(me);
		});
		$('.close a, #layer').click(function(e)
		{
			me.hideContent();
			e.stopPropagation();
			return false;
		});
		$('a.popup').click(function() {
				return popup(this.href);
		});
		// document behaviour, Escape, scroll and resize.
		var pf=$.proxy(me, 'setLayer');
		$(window).scroll(pf).resize(pf);
		$(document).keydown(function(e){if((e.keyCode?e.keyCode:e.which) == 27){me.hideContent();}});
		//	Init and change hash handlers
		$.address.init(function(event) {
			me.setHash($.address.value());
		}).change(function(event) {
			if(event.pathNames)
			{
				me.setHash($.address.value());
			}
		});
		$(window).resize();
		this.positionTooltips();
		$('ul#tooltips').show();
	},
	setHash: function(hash)
	{
		if(hash != '/') {
			if(hash.substring(1,3)=='c_')
				$.address.value(hash.substr(3));
			var content=this.options.content;
			hash=hash.substring(1).split('/');
			var cl=content.length;
			for(var i=0;i<cl;i++)
			{
				var c=content[i];
				if(c.content.substr(3)==hash[0])
				{
					hash.shift()
					this.showContent(c, hash);
					return;
				}
			}
		} else {
			this.hideContent();
		}
	},
	showContent: function(content, subpath)
	{
		if(!content)
			return;
		$('#claim').hide();
		$('ul#tooltips').hide();
		$('#layer').show();
		this.content=content;
		$(content.content).show();
		var hash=content.content.substring(3);
		if(!subpath)
			subpath=[];
		if(subpath.length)
			hash+='/'+subpath.join('/');
		$.address.value(hash);
		if(content.show)
			content.show(subpath);
		$(window).resize();
		this.positionTooltips();
	},
	hideContent: function()
	{
		if(!this.content)
			return;
		var content=this.content;
		this.content=null;
		if(content.hide)
			content.hide();
		$(content.content).hide();
		$('#layer').hide();
		$('#claim').show();
		$('ul#tooltips').show();
		$.address.value('/');
		$(window).resize();
		this.positionTooltips();
	},
	setLayer: function()
	{
		$('#layer').css({
			'top': 0,
			'height': $(document).height()
		});
		this.positionTooltips();
	},
	positionTooltips: function()
	{
		var obg=this.options.background, bg=this.background, w=bg.width(), winh=$(document).height(), h=winh/obg.ratio; // problem getting image height, falling back to document then. h=bg.height();
		var bgh=bg.height();
		var fw=obg.width, fh=obg.height, fx=w/fw;
		// window lager as bg, move bg to bottom
		var bgshift=((bgh>0) && (winh>bgh))?winh-bgh:0;
		bg.css('top', bgshift);
		$(this.options.content).each(function(i, c){
			var x=c.tooltippos[0],y=c.tooltippos[1];
			// reposition in correlation
			$(c.tooltip).css({
				'top': (y*fx)+bgshift,
				'left': x*fx
			})
		});
	}
};