Spry.Utils.addLoadListener(function() { okenko.init(); });

var okenko = {
	element : Object,
	container : Object,
	titlebar : Object,
	greybox : Object,
	greybox_fade1 : Object,
	greybox_fade2 : Object,
	greybox_visible : false,
	visible : false,
	ismousedown : false,
	move_x : 0,
	move_y : 0,
	init : function () {
		this.element = document.getElementById('okenko');
		this.container = document.getElementById('okenko_in');
		this.titlebar = document.getElementById('okenko_titlebar');
		this.greybox = document.getElementById('greybox');

		/*this.element = document.createElement('div');
		this.element.id = 'okenko';
		document.getElementsByTagName('body')[0].appendChild(this.element);
		
		this.titlebar = document.createElement('div');
		this.titlebar.id = 'okenko_titlebar';
		this.titlebar.innerHTML = '<div class="okenko_ctlbox"><a href="#" onclick="javascript:okenko.hide();">x</a></div><div id="okenko_title">xxxx</div>';
		this.element.appendChild(this.titlebar);
		
		this.container = document.createElement('div');
		this.container.id = 'okenko_in';
		this.element.appendChild(this.container);

		this.greybox = document.createElement('div');
		this.greybox.id = 'greybox';
		document.getElementsByTagName('body')[0].appendChild(this.greybox);*/
		
		this.greybox_fade1 = new Spry.Effect.Fade(this.greybox, {duration: 500, from: 50, to: 0, toggle:false, finish: function () { okenko.greybox.style.display = 'none'; } });
		this.greybox_fade2 = new Spry.Effect.Fade(this.greybox, {duration: 500, from: 0, to: 50, toggle:false, setup: function () { okenko.greybox.style.display = 'block'; } });
		this.greybox_fade1.start();
		
		Spry.Utils.addEventListener(this.greybox, 'mousemove', function(event) { okenko.move(event); }, false);
		Spry.Utils.addEventListener(this.titlebar, "mousedown", function(event) { okenko.mousedown(event); } , false);
		Spry.Utils.addEventListener(this.titlebar, "mouseup", function() { okenko.ismousedown = false; } , false);
		Spry.Utils.addEventListener(this.titlebar, "mousemove", function(event) { okenko.move(event); } , false);
		Spry.Utils.addEventListener(this.container, 'mousemove', function(event) { okenko.move(event); }, false);
	},
	show : function () {
		//document.getElementById('okenko_title').innerHTML = title;
		okenko.titlebar.style.display = 'none';
		okenko.titlebar.style.width = '100px'
		//okenko.container.innerHTML = '<img src="/img/loading.gif" width="32" height="32" alt="" />';
		//Spry.Utils.updateContent(okenko.container, url, function () { okenko.resize(); });
		okenko.greybox_show();

		var my_width = okenko.element.scrollWidth;
		var my_height = okenko.element.scrollHeight;
		okenko.element.style.top = okenko.getScrollY() + ((okenko.getHeight() - my_height) / 2) + 'px';
		okenko.element.style.left = (okenko.getWidth() - my_width) / 2 + 'px';
		okenko.element.style.display = 'block';
		okenko.visible = true;
		
		okenko.resize();
	},
	hide : function () {
		okenko.visible = false;
		okenko.element.style.display = 'none';
		okenko.greybox_hide();
	},
	mousedown : function (evt) {
		var mouseX = evt.pageX?evt.pageX:evt.clientX;
		var mouseY = evt.pageY?evt.pageY:evt.clientY;
		
		okenko.ismousedown = true;
		okenko.move_x = mouseX - parseInt(okenko.element.style.left.replace('px', ''))
		okenko.move_y = mouseY - parseInt(okenko.element.style.top.replace('px', ''))
	},
	move : function (evt) {
		if (okenko.visible == true && okenko.ismousedown == true) {
		   var mouseX = evt.pageX?evt.pageX:evt.clientX;
		   var mouseY = evt.pageY?evt.pageY:evt.clientY;
		   //document.title = (mouseX + okenko.move_x) - 'px'  + ' - ' + (mouseY + okenko.move_y) - 'px';
		   okenko.element.style.left = (mouseX - okenko.move_x) + 'px';
           okenko.element.style.top = (mouseY - okenko.move_y) + 'px';
        }
	},
	resize : function () {
		okenko.titlebar.style.display = 'block';
		var my_width = okenko.element.scrollWidth;
		var my_height = okenko.element.scrollHeight;
		okenko.element.style.top = okenko.getScrollY() + ((okenko.getHeight() - my_height) / 2) + 'px';
		okenko.element.style.left = (okenko.getWidth() - my_width) / 2 + 'px';
		okenko.titlebar.style.width = my_width + 'px'
	},
	greybox_show : function () {
		if (okenko.greybox_visible) { return false; }
		okenko.greybox.style.top = okenko.getScrollY() + 'px';
		okenko.greybox.style.width = okenko.getWidth() + 'px';
		okenko.greybox.style.height = okenko.getHeight() + 'px';
		okenko.greybox_fade1.stop();
		okenko.greybox_fade2.start();
		okenko.greybox_visible = true;
	},
	greybox_hide : function () {
		if (okenko.visible == true) {return false;}
		okenko.greybox_fade1.start();
		okenko.greybox_visible = false;
	},
	getScrollY : function () {
	  	var scrOfY = 0;
	  	if( typeof( window.pageYOffset ) == 'number' ) {
			scrOfY = window.pageYOffset;
	  	} else if( document.body && ( document.body.scrollTop ) ) {
			scrOfY = document.body.scrollTop;
	  	} else if( document.documentElement && ( document.documentElement.scrollTop ) ) {
			scrOfY = document.documentElement.scrollTop;
	  	}
	  	return scrOfY;
	},
	getWidth : function () {
	  	var myWidth = 0;
	  	if( typeof( window.innerWidth ) == 'number' ) {
			myWidth = window.innerWidth;
	  	} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
			myWidth = document.documentElement.clientWidth;
	  	} else if( document.body && ( document.body.clientWidth ) ) {
			myWidth = document.body.clientWidth;
	  	}
		return myWidth;
	},
	getHeight : function () {
	  	var myHeight = 0;
	  	if( typeof( window.innerHeight ) == 'number' ) {
			myHeight = window.innerHeight;
	  	} else if( document.documentElement && ( document.documentElement.clientHeight ) ) {
			myHeight = document.documentElement.clientHeight;
	  	} else if( document.body && ( document.body.clientHeight ) ) {
			myHeight = document.body.clientHeight;
	  	}
		return myHeight;
	}
};