/* <![CDATA[ */

var $ = jQuery;

function _debug(msg) {
	if (window.console) {
		console.debug(msg);
	} else {
		alert(msg);
	}
}

// Testen welcher Browser benutzt wird
// @param BrowserName auf den getestet wird
function checkBrowserName(name) {
	var agent = navigator.userAgent.toLowerCase();
	if (agent.indexOf(name.toLowerCase()) > -1) {
		return true;
	}
	return false;
}

// Testet ob der Browser ein IE ist
function isIE() {
	var name = 'MSIE';
	var agent = navigator.userAgent.toLowerCase();
	if (agent.indexOf(name.toLowerCase()) > -1) {
		return true;
	}
	return false;
}

var img = null;
var imgContainer = null;
var slider = null;

// setzt Fensterbreite und hoehe auf die des Klienten
// nur IE
if (isIE()) {
	userWidth = document.documentElement.clientWidth;
	userHeight = document.documentElement.clientHeight;
}

// ab welchem Sliderwert soll ein neues Bild geholt werden
var newImageTriggerValue = 150;

var minSliderValue = 100;
var maxSliderValue = 1000;

var userWidth = window.innerWidth;
var userHeight = window.innerHeight;

var img_width = 0;
var img_height = 0;

var changeListener = false;
var zoom_trigger = false;

var viewWidth = null;
var viewHeight = null;

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;

$(window).ready(function() {
	// setzt Fensterbreite und hoehe auf die des Klienten
	// nur IE 7 und 8
	if (checkBrowserName('MSIE 7.0') || checkBrowserName('MSIE 8.0')) {
		userWidth = document.documentElement.clientWidth;
		userHeight = document.documentElement.clientHeight;
	} else {
		// setzt Fensterbreite und hoehe auf die des Klienten alle anderen Browser
		userHeight = $(document).height();
		userWidth = $(document).width();
	}

	img = document.getElementById('dasBild');
	slider = document.getElementById('slider');
	imgContainer = document.getElementById('image_container');
		
	// wenn nicht IE dann Bild verstecken
	if (!isIE()) {
		$(img).hide();
	}
	
	// event handler wenn Bild fertig geladen ist	
	$(img).load(function() {

		if (zoom_trigger == false) {
			// wenn der Zoom noch nicht ausgeloest wurde dann Bild initialisieren
			initImage();
		}
	
		// wenn nicht IE dann Bild anzeigen
		if (!isIE()) {
			$(img).fadeIn('slow');
		}

	}).error(function() {

	});
	
	// Mausrad am Bildkontainer registrieren
	$(imgContainer).mousewheel(function(event, delta) {
		return false;
	});
	
	// sicherstellen das das Bild geladen wird
	showImageInBrokenBrowser();
	
	// var slideFactor = Number(zoomFactor);
	var slideFactor = 20;
	
	if (zoom_trigger == false) {

		// erst initialisierung des Slider
		$(slider).slider({
			value : minSliderValue,
			min : minSliderValue,
			max : maxSliderValue,
			step : 0,
			slide : function(event, ui) {

				// event handler fuer das sliden 
				onImageZoom($(slider).slider("option", "value"), -1, -1);
				//console.log($(slider).slider("option", "value"));
			}
		});
	}

	// wenn in den Slider geklickt wird dann wird das hier verarbeitet 
	$(slider).slider({
		change : function() {
			if (!changeListener) {
				onImageZoom($(slider).slider("option", "value"), -1, -1);
			}
			if (changeListener) {
				changeListener = false;
			}
		}
	});
	
	// die funktionen des Mausrad werden hier gesteuert
	$(img).mousewheel(function(event, delta) {
		var sliderValue = $(slider).slider("option", "value");
		changeListener = true;
		if (sliderValue == null) {
			sliderValue = 100;
		}
		if (delta > 0) {
			if (sliderValue <= maxSliderValue) {
				var plus = slideFactor;
				if (sliderValue + plus <= maxSliderValue) {
					sliderValue += plus;
				} else {
					sliderValue = maxSliderValue;
				}
			}
		} else if (delta < 0) {
			if (sliderValue <= minSliderValue) {
			} else {
				sliderValue -= slideFactor;
			}
		}
		
		// slider value wird nochmal gesetzt 
		$(slider).slider("option", "value", sliderValue);
		// zoom geht von der Mausposition aus
		onImageZoom(sliderValue, event.pageX, event.pageY);		 
		event.stopPropagation();
		// verhindert das vom Fenster mit dem Mausrad
		event.preventDefault();
	});
	
	viewWidth = parseInt($(imgContainer).css('width'));
	viewHeight = parseInt($(imgContainer).css('height'));
	//console.log(viewWidth+" : "+viewHeight);
	
	// TODO this might be obsolete
	if (mixWidth > 0 && imageOriWidth < 600) {
		$(slider).slider({disabled:true});
		$(img).unmousewheel();		
	}
});

// Methode zum sicherstellen das das Bild auch geladen wird
function showImageInBrokenBrowser() {
	if (checkBrowserName('MSIE 7.0') && !img.complete) {
		initImage();
	}
	if (checkBrowserName('MSIE 8.0') && !img.complete) {
		initImage();
	}
	if (checkBrowserName('MSIE 9.0') && !img.complete) {
		initImage();
	}
}

// get image dimension, resize image_container and show image
function initImage() {
	img_width = $(img).width();
	img_height = $(img).height();
	
	if (mixWidth > 0) {
	    // Calculate the max zoom percentage using the initial with and the full size width
	    maxSliderValue = Math.round((imageOriWidth / img_width) * 100);
	    // If no zoom is possible (small image), disabled the controls
	    if (maxSliderValue == minSliderValue) {
	    	$(slider).slider({disabled:true});
	    	$(img).unmousewheel();	
	    }
	    //_debug("maxSliderValue: " + maxSliderValue);
	    // Update the max zoom percentage on the slider widget
	    $(slider).slider({ max: maxSliderValue });
    }
	
	$(img).css({
		'width' : function() {
			$(img).width();
		},

		'height' : function() {
			$(img).height();
		}
	});

	$(imgContainer).css({
		'width' : userWidth,
		'height' : userHeight
	});

	/* Zentrieren des Image */

	$(img).css({
		'left' : function() {
			var res = userWidth / 2 - img_width / 2;
			return res;
		},
		'top' : function() {
			var res = userHeight / 2 - img_height / 2;
			return res;
		}
	});

	setDrag();
}

// setzen der DragAndDrop funktion
function setDrag() {

	x1 = 0 - $(img).width() + 100;
	y1 = 0 - $(img).height() + 100;
	x2 = Math.round(userWidth - 100);
	y2 = Math.round(userHeight - 100);

	var arr = [ x1, y1, x2, y2 ];

	$(img).draggable({
		containment : arr,
		scroll : false
	});
}

function dreisatzWidth(wert) {
	var res = Math.round((img_width / 100) * (wert));
	//_debug("new width: " + res + " = " + img_width +  " / 100 * " + (wert));
	return res;
}

function dreisatzHeight(wert) {
    var res = Math.round((img_height / 100) * (wert));
	return res;
}

// hier wird der zoom gesteuert
function onImageZoom(value, x, y) {
	var viewContainer = $(imgContainer);
	var viewContainerOffset = viewContainer.offset();

	var viewOffsetTop = Math.round(viewContainerOffset.top);
	var viewOffsetLeft = Math.round(viewContainerOffset.left);

	var currentWidth = $(img).attr('width');
	var currentHeight = $(img).attr('height');

	var img_offset = $(img).offset();

	if ($(img).css('left') != null) {
		currentLeftPos = $(img).css('left');
	}

	if ($(img).css('top') != null) {
		currentTopPos = $(img).css('top');
	}
	$(img).attr({
		width : dreisatzWidth(value),
		height : dreisatzHeight(value)
	}).css(
			{
				'left' : function() {

					var w_half = img_offset.left + parseInt(currentWidth / 2);

					if ((x >= 0) && (y >= 0))
						w_half = x - viewOffsetLeft;

					var res = w_half - (w_half - parseInt(currentLeftPos))
							* (dreisatzWidth(value) / currentWidth);
					res = Math.round(res);
					return res;
				},
				'top' : function() {

					var h_half = img_offset.top + parseInt(currentHeight / 2);

					if ((x >= 0) && (y >= 0))
						h_half = y - viewOffsetTop;

					var res = h_half - (h_half - parseInt(currentTopPos))
							* (dreisatzHeight(value) / currentHeight);
					res = Math.round(res);
					return res;
				}
			});

	if (value >= newImageTriggerValue) {
		if (zoom_trigger == false) {
			// addLoaderToImage();
			$(img).attr({
				src : doubleImageSrc,
				width : dreisatzWidth(value),
				height : dreisatzHeight(value)
			});

			zoom_trigger = true;
		}
	}
	x1 = 0 - $(img).width() + 100;
	y1 = 0 - $(img).height() + 100;
	x2 = Math.round(userWidth - 100);
	y2 = Math.round(userHeight - 100);
	var arr = [ x1, y1, x2, y2 ];
	$(img).draggable('option', 'containment', arr);

}

// wenn sich die Fenstergroesse veraendert dann passe den imageContainer und Bildposition an
$(window).resize(function() {

	userWidth = window.innerWidth;
	userHeight = window.innerHeight;

	if (isIE()) {
		userWidth = document.documentElement.clientWidth;
		userHeight = document.documentElement.clientHeight;
	}

	var img_width = $(img).width();
	var img_height = $(img).height();

	$(imgContainer).css({
		width : userWidth,
		height : userHeight
	});

	$(img).css({

		left : function() {
			var res = userWidth / 2 - img_width / 2;
			return res;
		},
		top : function() {
			var res = userHeight / 2 - img_height / 2;
			return res;
		}
	});
});

// 
function loadData() {
	var url = document.getElementById('pageDropdown').value;
	location.href = url;
}
/* ]]> */