var speed = 0.05;
var filmCanvas = new Object();
var images = new Array();
var timeInterval ;
var totalImages = 0;
var minOpacity = 0.3;
var additionalInfoBox = "<p id='infobox'>Bitte hier klicken um weitere Informationen zu sehen</p>"
var fadedIn = false;
var msie6 = false;

$(document).ready(function () {
	var activeElement;
	var pos = new Object();
	var titleText = "";
	var j = 0;
	
	/* Create a check for the ie 6 because we have to add some css for handling the bug with the z index
	/* described here: http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
	*/
	if (jQuery.browser.msie && parseInt(jQuery.browser.version)) {
		msie6 = true;
	}
	totalImages = $("#filmcarousel img").size();
	
	filmCanvas.Height = Math.round(parseInt($("#filmcarousel").css('height'))/3.5);
	filmCanvas.Width = Math.round($("#filmcarousel").width()/2);
	
	
	$("#filmcarousel img").each(function() {
		
		$(this).attr("id", "image_"+j);
		j == 0 ? $(this).addClass("activeImage"):"";
		width = $(this).width();
		height = $(this).height();
		images[j] = new Object();
		images[j]._id = j;
		images[j]._angle = 360/totalImages*j;
		calculateImage(images[j]);
		positionImage(images[j]);
		j++;
	});
	
	//Creating INFOBOX
	activeElement = $(".activeImage");
        titleText = activeElement.parent().attr('title');
        var thisURL = activeElement.parent().attr("href");
	if (titleText != "" ) {
		activeElement.parent().parent().append("<p id='infobox'><a title='"+titleText+"' href='"+thisURL+"'>"+titleText+"</a></p>");
	} else {
		activeElement.parent().parent().append(additionalInfoBox);
	}
	
	pos = activeElement.position();
	
	$("#infobox").css({
		width: $(".activeImage").width()-18,
		top: pos.top+activeElement.height(),
		left: pos.left,
		zIndex: activeElement.css('zIndex')
	});
	
	
	$("#infobox").css({
		top: pos.top+activeElement.height()-$("#infobox").height()-8
	});

	$("#infobox").fadeIn(200).fadeOut(3500);
	
	activeElement.mouseenter(function() {
		$("#infobox").stop(true,true).fadeIn(200).fadeOut(2500);
	});

        // Create a hover effect for images hover over while not active
	$("#filmcarousel img").mouseenter(function () {
            $(this).stop(true,true).animate({opacity:1.0},500);
        });
        $("#filmcarousel img").mouseleave(function () {
            var clickedImageID = $(this).attr("id").match(/\d+/);
            var opacity = (images[clickedImageID]._opacity);
            $(this).stop(true,true).animate({opacity:opacity},200);
        });

	
	$("#filmcarousel img").click(function () {
		$("#infobox").remove();
		if (!$(this).hasClass("activeImage")) {
			clickedImageID = $(this).attr("id").match(/\d+/);
			window.clearInterval(timeInterval);
			var lastActive = $('.activeImage');
			$('.activeImage').unbind('mouseenter mouseleave');
			$(".activeImage").removeClass("activeImage");
			lastActive.mouseenter(function () {
                            $(this).stop(true,true).animate({opacity:1.0},500);
                        });
                        lastActive.mouseleave(function () {
                            var clickedImageID = $(this).attr("id").match(/\d+/);
                            var opacity = (images[clickedImageID]._opacity);
                            $(this).stop(true,true).animate({opacity:opacity},200);
                        });
			$(this).addClass("activeImage");
                        var $thisElement = $(this).parent();
                        var thisURL = $thisElement.attr("href");
			if ($thisElement.attr('title') != "" ) {
				$thisElement.parent().append("<p id='infobox'><a href='"+thisURL+"' title='"+$thisElement.attr('title')+"'>"+$thisElement.attr('title')+"</a></p>");
			} else {
				$(this).parent().parent().append(additionalInfoBox);
			}
			
			$(this).mouseenter(function() {
				$("#infobox").stop(true,true).fadeIn(200).fadeOut(2500);
				fadedIn = true;
			});
                        
			timeInterval = window.setInterval ('moveImages(clickedImageID, 0)',30);	
			return false;
		} 
	});
	
});


function moveImages (clickedImageID,targetAngle) {
	var diff = 0;
	var x = images[clickedImageID]._angle / 360;
	
	var pos = $(".activeImage").position();
	var activeElement = $(".activeImage");
	
	if (x > 1) {
		images[clickedImageID]._angle = images[clickedImageID]._angle - 360
	} else if (x < 0){
		images[clickedImageID]._angle = images[clickedImageID]._angle + 360
	}
	
	if ( Math.sin(images[clickedImageID]._angle*Math.PI/180) > 0) {
		diff = targetAngle - images[clickedImageID]._angle;
	} else if ( Math.sin(images[clickedImageID]._angle*Math.PI/180) <= 0) {
		diff = 360 - images[clickedImageID]._angle;
	}
	

	i=0;
	for (i=0;i<totalImages;i++) {
		images[i]._angle = images[i]._angle+diff*speed;
		images[i] = calculateImage(images[i], images[i]._angle);
		positionImage(images[i]);
	}
	
	
	$("#infobox").css({
		width: activeElement.width()-19,
		top: pos.top+activeElement.height()+2-$("#infobox").height()-10,
		left: pos.left,
		zIndex: activeElement.css('zIndex')
	});

	if (Math.round(images[clickedImageID]._angle) == 0 || Math.round(Math.abs(images[clickedImageID]._angle)) == 360) {
		window.clearInterval(timeInterval);
		fadedIn ? fadedIn = false : $("#infobox").fadeIn(200).fadeOut(2500);
		} 
}

function positionImage(actualImage) {
	$("#image_"+actualImage._id).css({ position: "absolute", 
						left: Math.round(actualImage._x)+filmCanvas.Width, 
						top: Math.round(actualImage._y)+filmCanvas.Height, 
						zIndex : actualImage._zindex,
						width: Math.round(actualImage._width),
						height: Math.round(actualImage._height),
						opacity: actualImage._opacity
				});
	if (msie6) {
		$("#image_"+actualImage._id).parent().parent().css({zIndex : actualImage._zindex});
		}
}

function calculateImage (image) {	
	var cossinus = Math.cos(image._angle*Math.PI/180);
	image._zindex = Math.round((cossinus+1)*9);
	image._scale = Math.max((cossinus+1)/2,0.2);
	image._width = width*image._scale;
	image._height = height*image._scale;
	image._x = Math.sin(image._angle*Math.PI/180)*filmCanvas.Width+filmCanvas.Width/2-image._width/2;
	image._y = cossinus*filmCanvas.Height+filmCanvas.Height/2-image._height/2;
	
	image._opacity = Math.max(image._zindex/18,minOpacity);
	return image;
}