/* <![CDATA[ */

function _debug(msg) {
	if (window.console) {
		// console.debug(msg);
		console.log(msg);
	} else {
		alert(msg);
	}
}

var $ = jQuery;

var img = null;
var imgContainer = null;
var slider = null;

var newImageTriggerValue = 150;

var zoom_trigger = false;

var img_width = null;
var img_height = null;

var imageOriginalWidth = 0;
var imageOriginalHeight = 0;

var currentTopPos = 0;
var currentLeftPos = 0;

var changeListener = false;

var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;

var viewWidth = null;
var viewHeight = null;

function checkBrowserName(name){
	var agent = navigator.userAgent.toLowerCase();  
	
	if (agent.indexOf(name.toLowerCase())>-1) {
		return true;  
	}
	return false;
}

function isIE() {
	var name = 'MSIE';
	var agent = navigator.userAgent.toLowerCase();	
	if (agent.indexOf(name.toLowerCase())>-1) {
		return true;
	}
	return false;
}

$(window).ready(function() {
	img = document.getElementById('dasBild');
	slider = document.getElementById('slider');
	imgContainer = document.getElementById('image_container');
	
	viewWidth = parseInt($(imgContainer).css('width'));
	viewHeight = parseInt($(imgContainer).css('height'));
	
	//viewWidth= 344;
	
	if(!isIE()){		
		$(img).hide();
		addLoaderToImage();		
	} else {
		//fix fuer den IE damit das load Event getriggert wird
		$(img).attr("src", $(img).attr("src"));
	}

	$(img).load(function() {		//
		if(checkBrowserName('MSIE 8.0') || checkBrowserName('MSIE 9.0')){						

			initImage(false);
				
		} else {
			if(zoom_trigger == false) {	
				//$(img).hide();
			}
			initImage(true);
		}
			
	}).error(function() {
			
	});		
	imageOriginalWidth = img_width;
	imageOriginalHeight = img_height;
	
	var slideFactor = Number(zoomFactor);
	$(slider).slider({
		value : 100,
		min : 100,
		max : 500,
		step : slideFactor,
		slide : function(event, ui) {
			onImageZoom($(slider).slider("option", "value"), -1, -1);
		}
	});
	
	$(slider).slider({
		change: function(){
			if(!changeListener) {
				
				onImageZoom($(slider).slider("option","value"), -1, -1);
			}
			if(changeListener) {
				changeListener = false;
			}
		}
	});
	
	$(img).mousewheel(function(event, delta) {
		var sliderValue = $(slider).slider("option", "value");
		changeListener = true;		
		if (sliderValue == null) {
			sliderValue = 0;
		}
		if (delta > 0) {
			if (sliderValue >= 500) {
			} else {
				sliderValue += 10+slideFactor;
			}
		} else if (delta < 0) {
			if (sliderValue <= 100) {

				$(img).css({
					'left': function() {			
						var res = parseInt($(imgContainer).css('width')) / 2 - parseInt($(img).width()) / 2;					
						return res;
					},
					'top': function() {
						var res = parseInt($(imgContainer).css('height')) / 2 - parseInt($(img).height()) / 2;
						return res;
					}
				});

			} else {
				sliderValue -= 10+slideFactor;
			}
		}

		$(slider).slider("option", "value", sliderValue);

		if (sliderValue != 0) {
			onImageZoom(sliderValue, event.pageX, event.pageY);
		}

		event.stopPropagation();
		event.preventDefault();
	});	

	if(imageOriWidth < viewWidth) {
		$(slider).slider({disabled:true});
		$(slider).hide();
		$(img).unmousewheel();		
	}

});

function initImage(browser) {
	
	if(zoom_trigger == false) {	
		
		var value = $(slider).slider("option", "value");
			if (value >= newImageTriggerValue) {
				$(img).attr({
					width : dreisatzWidth(value),
					height : dreisatzHeight(value)
				});		
			}
			
			if(browser) {
				$('#loader').css('display','none');
				$(img).fadeIn();
			}
			
		if (zoom_trigger == false) {
			img_width = $(img).width();
			img_height = $(img).height();
		}		
		
		scaleDown();
		
		$(img).css({
			'left': function() {			
				var res = parseInt($(imgContainer).css('width')) / 2 - parseInt($(img).width()) / 2;					
				return res;
			},
			'top': function() {
				var res = parseInt($(imgContainer).css('height')) / 2 - parseInt($(img).height()) / 2;
				return res;
			}
		});
		
		setDrag();

	}
	if(browser) {
		$('#loader').css('display','none');
	}
}

function setDrag() {
	
	var offset = $(imgContainer).offset();

	img_width = $(img).width();
	img_height = $(img).height();

	x1 = offset.left - $(img).width() + 100;
	y1 = offset.top - $(img).height() + 100;
	x2 = Math.round(offset.left + viewWidth - 100);
	y2 = Math.round(offset.top + viewHeight - 100);

	var arr = [ x1, y1, x2, y2 ];

	$(img).draggable({
		containment : arr,
		scroll : false
	});
}

function scaleDown() {
	
	img_width = $(img).width();
	img_height = $(img).height();	
	
	//var viewWidth = 600;
	//var viewHeight = 1000;
	
	var perWidth = (100 * parseInt(img_width)) / viewWidth;
	var perHeight = (100 * parseInt(img_height)) / viewHeight;
	
	var per = 100;
	
	if (perWidth < perHeight)
		per = perHeight;
	else
		per = perWidth;
	
	img_width = (parseInt(img_width) * 100) / per;
	img_height = (parseInt(img_height) * 100) / per;
	
	$(img).attr({
		height : img_height,
		width : img_width
	});
	
	$(imgContainer).css({
		width : 600,
		height : img_height
	});

}

function renderToolBox(userHeight) {
	if ($('#tool_box').css('display') == 'none') {
		$('#tool_box').css({
			'display' : 'block',
			'height' : userHeight
		});
	} else if ($('#tool_box').css('display') == 'block') {
		$('#tool_box').css('display', 'none');
	}
}

function dreisatzWidth(wert) {
	var res = Math.round((img_width / 100) * wert);
	return res;
}

function dreisatzHeight(wert) {
	var res = Math.round((img_height / 100) * wert);
	return res;
}

function addLoaderToImage() {	
	var imageContainer = $(imgContainer);
	var hei =parseInt($('#loader').css('height'))*3;
	imageContainer.css({
		'min-height':hei
	});
	
	var position = imageContainer.position();	
	//$('#loader').appendTo(imageContainer);
	$('#loader').css({
		'top':position.top+ parseInt(imageContainer.css('height')) / 2 - parseInt($('#loader').css('height')) / 2,
		'left':position.left+parseInt(imageContainer.css('width')) / 2 - parseInt($('#loader').css('width')) / 2,
		'display':'block'
	});
}

var doubleImageSrc = "#{activeDocumentBean.viewManager.currentImageDoubleUrl}";

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 viewWidth = parseInt($(imgContainer).css('width'));
	var viewHeight = parseInt($(imgContainer).css('height'));

	var currentWidth = $(img).attr('width');
	var currentHeight = $(img).attr('height');

	var sliderValue = $(slider).slider("option", "value");

	if ($(img).css('left') != null) {
		currentLeftPos = $(img).css('left');
	}

	if ($(img).css('top') != null) {
		currentTopPos = $(img).css('top');
	}
	if (sliderValue != 0) {
		$(img).attr({
			width : dreisatzWidth(value),
			height : dreisatzHeight(value)
		}).css(
				{
					'left' : function() {
						var w_half = parseInt(currentLeftPos)
								+ 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 = parseInt(currentTopPos)
								+ 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) {
			if(!isIE()) {
				
				addLoaderToImage();
			}

			$(img).attr('src', doubleImageSrc);				
			
			zoom_trigger = true;
		}
	}

	var offset = $(imgContainer).offset();

	x1 = offset.left - $(img).width() + 100;
	y1 = offset.top - $(img).height() + 100;
	x2 = Math.round(offset.left + viewWidth - 100);
	y2 = Math.round(offset.top + viewHeight - 100);

	var arr = [ x1, y1, x2, y2 ];
	$(img).draggable('option', 'containment', arr);

}

/* ]]> */