/**
 * post-it note handling
 */
var postitHeightRatio = 0.05;
var postitWidthRatio  = 0.05;
var langImWidthRatio  = 0.03;
var langImHeightRatio  = 0.03;

function initializePostit(backgroundImageName, src, topRatio, leftRatio, link) {
	var srcList = [ src + ".png", src + "_active.png" ];

	// create the on and off images
	var imageList = Array(2);
	for ( var x = 0; x < srcList.length; x++) {

		im = $('<img />');
		im.attr('src', srcList[x]);
		im.load(function() {
			$('#mainContainer').append($(this));
		});
		imageList[x] = im;
		im.click( function() { window.location.href=link;});
		im.css('cursor', 'pointer');
	}
	imageList[0].css('z-index', 5);
	imageList[1].css('z-index', -1);
	for( var x = 0; x < imageList.length; x++ ){
		// activate
		imageList[x].mouseenter(function() {
			imageList[1].css('z-index', 5);
			imageList[0].css('z-index', -1);
		});
		// deactivate
		imageList[x].mouseleave(function() {
			imageList[0].css('z-index', 5);
			imageList[1].css('z-index', -1);
		});
	}
	// move and resize relative to backgroundImage
	setImagePos(backgroundImageName, imageList, topRatio, leftRatio, postitWidthRatio, postitHeightRatio);

	// add the moving and resizing to the window resize event
	$(window).resize(function() {
		setImagePos(backgroundImageName, imageList, topRatio, leftRatio, postitWidthRatio, postitHeightRatio);
	});
	return imageList;
}

function setImagePos(backgroundImageName, imageList, topRatio, leftRatio, widthRatio, heightRatio) {

	for ( var x = 0; x < imageList.length; x++) {
		im = imageList[x];
		height = $("#" + backgroundImageName).attr('height');
		width = $("#" + backgroundImageName).attr('width');
		if (height == 0) {
			height = width * .59;
		}
		im.css('position', 'absolute');
		im.css('width', Math.round(width * widthRatio));
		im.css('height', Math.round(width * heightRatio));
		im.css('top', Math.round(height * topRatio));
		im.css('left', Math.round(width * leftRatio));
	}
}

function initializeLanguageImages( backgroundImageName, activeLang ) {
	deIm = $('<img id=\'de_im\'/>')
	deIm.attr('src', "/img/home_de" + ( activeLang == "de" ? "_bold" : "" ) + ".png");
	deIm.css('z-index', 5);
	deIm.load(function() {
		$('#mainContainer').append($(this));
	});
	if( activeLang == 'en') {
	  deIm.click(function() { window.location='/de'});
	  deIm.css('cursor', 'pointer');
	}
	setImagePos(backgroundImageName, [deIm], 0.89, 0.14, 0.017, 0.015);
	// add the moving and resizing to the window resize event
	$(window).resize(function() {
		setImagePos(backgroundImageName, [deIm], 0.89, 0.14, 0.017, 0.015);
	});

	enIm = $('<img id=\'en_im\'/>')
	enIm.attr('src', "/img/home_en" + ( activeLang == "en" ? "_bold" : "" ) + ".png");
	enIm.css('z-index', 5);
	if( activeLang == 'de') {
	  enIm.click(function() { window.location='/en'});
	  enIm.css('cursor', 'pointer');
	}
	enIm.load(function() {
		$('#mainContainer').append($(this));
	});
	setImagePos(backgroundImageName, [enIm], 0.89, 0.17, 0.017, 0.015);
	// add the moving and resizing to the window resize event
	$(window).resize(function() {
		setImagePos(backgroundImageName, [enIm], 0.89, 0.17, 0.017, 0.015);
	});
}