var presbeton = window.presbeton = window.presbeton || {};

presbeton.PanZoomController = function(element, options)
{
	this.options = $.extend({
		imgUrl: BASE_HREF + "img/samples/hires_map.jpg"
	}, options);
	
	this.$element = $(element);
	this.scrollOffset = { x: 0, y: 0};
};

presbeton.PanZoomController.prototype.init = function()
{
	this.$element.empty();
	this.$imgBox = $('<div/>');
	this.$imgBox.css({ width: '100%', height: '100%'});
		
	this.$element.append(this.$imgBox);
	
	this.showLoader();

	this.$img = $('<img/>');
	this.$img.bind('load', $.proxy(this.loadImg, this));
	this.$img.attr('src', this.options.imgUrl);	
};

presbeton.PanZoomController.prototype.showLoader = function()
{
	this.$imgBox.append('<div class="loader"></div>');
};

presbeton.PanZoomController.prototype.hideLoader = function()
{
	this.$imgBox.find('.loader').remove();
};

presbeton.PanZoomController.prototype.loadImg = function()
{
	this.hideLoader();
	
	this.imgWidth = this.$img.get(0).width; 
	this.imgHeight = this.$img.get(0).height;
	
	this.$img.css({ position: 'absolute', left: 0, top: 0 });
	
	this.$imgBox.css({ cursor: 'url("' + BASE_HREF + 'img/openhand.cur"), move'});
	this.$imgBox.append(this.$img);
	
	this.$imgBox.bind('mousedown', $.proxy(this.mouseDown, this));
	this.$imgBox.bind('mousewheel', $.proxy(this.mouseWheel, this));
	
	this.$imgBox.scrollLeft(this.scrollOffset.x);
	this.$imgBox.scrollTop(this.scrollOffset.x);
	
	this.$zoomControls = $('<div class="zoom-controls"/>');
	this.$element.append(this.$zoomControls);
	
	var maxScaleX = this.imgWidth / this.$imgBox.width();
	var maxScaleY = this.imgHeight / this.$imgBox.height();
	this.maxScale = maxScaleX > maxScaleY ? maxScaleX : maxScaleY;
	
	this.boxWidth = this.$imgBox.width();
	this.boxHeight = this.$imgBox.height();
	
	this.zoomSlider = new kff.widgets.ButtonSlider(this.$zoomControls, {
		axis: 'y',
		steps: 107,
		step: 0.2,
		min: 1,
		max: this.maxScale,
		position: 1,
		change: $.proxy(this.zoomDrag, this),
		drag: $.proxy(this.zoomDrag, this),
		speed: 0
	});
	this.zoomSlider.init();
	this.zoom = this.maxScale;
	this.zoomSlider.setPosition(this.zoom);
	
	this.center();
};

presbeton.PanZoomController.prototype.mouseDown = function(event)
{
	this.downEvent = event;

	this.scrollOffset.x = this.$img.position().left;
	this.scrollOffset.y = this.$img.position().top;
	
	this.$imgBox.css({ cursor: 'url("' + BASE_HREF + 'img/closedhand.cur"), move'});
	$('body').css({ cursor: 'url("' + BASE_HREF + 'img/closedhand.cur"), move'});
	
	$(document).bind('mousemove', $.proxy(this.mouseMove, this));
	$(document).bind('mouseup', $.proxy(this.mouseUp, this));
	
	event.preventDefault();
	return false;
};

presbeton.PanZoomController.prototype.mouseMove = function(event)
{
	var delta = { x: event.pageX - this.downEvent.pageX, y: event.pageY - this.downEvent.pageY };
	
	this.$img.css({ left: this.scrollOffset.x + delta.x, top: this.scrollOffset.y + delta.y});
	
	event.preventDefault();
	return false;
};

presbeton.PanZoomController.prototype.mouseUp = function(event)
{
	this.$imgBox.css({ cursor: 'url("' + BASE_HREF + 'img/openhand.cur"), move'});
	$('body').css({ cursor: 'auto'});
	$(document).unbind('mousemove', this.mouseMove).unbind('mouseup', this.mouseUp);
	
	this.scrollOffset.x = this.$img.position().left;
	this.scrollOffset.y = this.$img.position().top;
	
		
	event.preventDefault();	
	return false;
};

presbeton.PanZoomController.prototype.mouseWheel = function(event, delta)
{
	var sign = -delta/Math.abs(delta);
	
	var step = (this.maxScale - 1) / 10;
	var d = this.zoomSlider.getPosition() + step * sign;
	
	if(d > this.maxScale) d = this.maxScale;
	if(d < 1) d = 1;

	this.zoomSlider.setPosition(d);
	this.setZoom(d);
	return false;
};

presbeton.PanZoomController.prototype.zoomDrag = function(p)
{
	this.setZoom(p);	
	return false;
};

presbeton.PanZoomController.prototype.setZoom = function(p)
{
	/* Výpočet centrování */
	var bw = this.boxWidth;
	var w1 = this.imgWidth / this.zoom;
	var w2 = this.imgWidth / p;	
	var o2x = -(-this.scrollOffset.x + bw/2)/w1*w2 + bw/2;

	var bh = this.boxHeight;
	var h1 = this.imgHeight / this.zoom;
	var h2 = this.imgHeight / p;	
	var o2y = -(-this.scrollOffset.y + bh/2)/h1*h2 + bh/2;
	
	this.$img.css({width: this.imgWidth / p, height: this.imgHeight / p });
	
	if(!o2x) o2x = 0; 
	if(!o2y) o2y = 0;
	
	this.$img.css({left: o2x, top: o2y });

	this.scrollOffset.x = o2x;
	this.scrollOffset.y = o2y;
	this.zoom = p;
		
};

presbeton.PanZoomController.prototype.center = function()
{
	this.scrollOffset.x = (this.$imgBox.width() - this.imgWidth / this.zoom) /2 ;
	this.scrollOffset.y = (this.$imgBox.height() - this.imgHeight / this.zoom) /2 ;
		
	this.$img.css({left: this.scrollOffset.x, top: this.scrollOffset.y });
};


/**
 * 
 */
presbeton.PanZoomDialog = function(options)
{
	options = $.extend({
		title: 'Dialog',
		htmlTemplate: '<div class="presbeton-dialog"></div>',
		width: 850,
		height: 500,
		imgUrl: null
	}, options);

	kff.dialogs.Dialog.call(this, options);
};

kff.extend(presbeton.PanZoomDialog, kff.dialogs.Dialog);

presbeton.PanZoomDialog.prototype.init = function()
{
	
};

presbeton.PanZoomDialog.prototype.okCallback = function()
{
	this.close();
};

presbeton.PanZoomDialog.prototype.cancelCallback = function()
{
	this.close();
	return false;
};

presbeton.PanZoomDialog.prototype.render = function()
{	
	if(!this.isOpen)
	{
		kff.dialogs.Dialog.prototype.render.call(this);
		
		this.$inner = $('.presbeton-dialog');
		
		this.$elements = {
			btnClose: $('<a class="btn-close">Zavřít</a>'),
			dialogBody: $('<div class="dialog-body"></div>'),
			dialogHead: $('<div class="dialog-head"></div>'),
			dialogFoot: $('<div class="dialog-foot"></div>'),
			title: $('<h2>' + this.options.title + '</h2>')
		}
	
		this.$inner.append(this.$elements.dialogHead).append(this.$elements.dialogBody).append(this.$elements.dialogFoot);
		this.$elements.dialogHead.append(this.$elements.title).append(this.$elements.btnClose);
	
		this.$inner.delegate('.btn-close, .close', 'click',  $.proxy(this.cancelCallback, this))
		
		this.$inner.closest('.popup').css('height', 'auto');

		this.overlay.options.click = $.proxy(function(){ this.close() }, this);
		
		this.$elements.dialogBody.append('<div id="panzoom"></div>');

		var panzoom = new presbeton.PanZoomController('#panzoom', { imgUrl: this.options.imgUrl });
		panzoom.init();
	}
};