Preloader = new Class({
	Implements: [Events, Options],
	options:{
		width	: 	177,
		height	:	90,
		shadow	:	true,
		defText	:	'Data se načítají'
	},
	visibled : false,
	objectivies	:	new $H(),
	
	initialize: function(options){
		this.setOptions(options);
		
		new Asset.css('/js/preloader/preloader.css');
		this.createPreloader();
	},
	
	createPreloader: function(){
		// create overall div
		//alert('here');
		
		var all = new Element('div');
		all.inject($('created_runtime'),'inside');
		all.setProperties({
				'id'	:	'page_preloader',
				'class'	:	'preloader_obal noprint'
			})
		all.setStyles({
				opacity	:	0,
				width	:	this.options.width,
				height	:	this.options.height
			});
			
		
		
		// create body div	
		var bodyD = new Element('div')
			.setProperty('class','preloader')
			.setStyles({
				width	:	this.options.width,
				height	:	this.options.height
			})
		bodyD.inject(all);
		// create field for text
		var caption = new Element('span',{'class':'text'}).setHTML('data se nacitaji');
		caption.inject(bodyD)
		
		// create progress over
		var progressOver = new Element('div',{'class':'progress_over'});
		progressOver.inject(bodyD);
		var progress = new Element('div',{'class':'progress'});
		progress.inject(progressOver);
		
		if (this.options.shadow){
			//Insert canvas
			var canvas = new Element('canvas', {
				'class'	: 'preloaderCanvas',
				'id'	: 'preloaderCanvas'
			}).injectInside(all);
		
			if (Browser.Engine.trident) {
				G_vmlCanvasManager.initElement(canvas);
			}
		
			canvas.setStyles({
				position: 'absolute',
				top: '2px',
				left: '2px'
			});
			this.draw(all);
		} else {
			bodyD.setStyle('border','1px solid #CCC');
		}
		
	},
	
	draw: function(el){
		width = this.options.width;
		height = this.options.height;
		
		
		var canvas = el.getElement('.preloaderCanvas');
		
		if (Browser.Engine.webkit ) {
			//canvas.setProperties({
			//	'width': 4000,
			//	'height': 2000
			//});
		} else {
			canvas.width = width;
			canvas.height = height;
		}
		
		var ctx = canvas.getContext('2d');

		
		ctx.clearRect(0, 0, window.getSize().x, window.getSize().y);
		
		this.drawRect(ctx, 0, 0, width, height, 0, 0, 0, 0.06); //shadow
		this.drawRect(ctx, 1, 1, width - 2, height - 2,  0, 0, 0, 0.08); //shadow
		this.drawRect(ctx, 2, 2, width - 4, height - 4,  0, 0, 0, 0.3); //shadow
		
		this.drawRect(ctx, 3,2,width-6,height-6, 233, 243, 253, 1); //fore
	},
	
	drawRect: function(ctx,x,y,width,height,r,g,b,a){
		ctx.fillStyle = 'rgba(' + r +',' + g + ',' + b + ',' + a + ')';
		ctx.beginPath();
		ctx.moveTo(x,y);
		ctx.lineTo(x,y+height);
		ctx.lineTo(x+width,y+height);
		ctx.lineTo(x+width,y);
		ctx.lineTo(x,y);
		ctx.fill(); 
	},
	
	show: function(index){
		$('page_preloader').getElement('.preloader').setStyle('z-index',index+2);
		$('page_preloader')
			.setStyles({
				'z-index'	:	index,
				'display'	:	'block'
			})
			.center()
			.fade('toggle');
		this.visibled = true;
	},
	
	hide: function(){
		var fade = $('page_preloader').get('tween', 'opacity');
		fade.addEvent('onComplete',function(){$('page_preloader').setStyle('display','none')});
		fade.start(0);
		this.visibled = false;
	},
	
	add:function(name,value,zIndex){
		if (!name || !value) return;
		if (!zIndex) zIndex = getHighestIndex();
		this.objectivies[name] = value;
		var values = this.objectivies.getValues();
		if (values.length != 0 && !this.visibled)
			this.show(zIndex);
		$('page_preloader').getElement('.text').setHTML(values[0]);
		this.updateProgress(values);
	},
	
	remove: function(name){
		if (!name || !this.objectivies[name]) return;
		delete this.objectivies[name];
		var values = this.objectivies.getValues();
		if (values.length == 0)
			this.hide();
		else {
			$('page_preloader').getElement('.text').setHTML(values[0]);
			this.updateProgress(values);
		}
	},
	updateProgress: function(values){
		var len = values.length;
		var progressbar = $('page_preloader').getElement('.progress');
		progressbar.setStyle('width',100/len + '%');
	}	
 });
 
 window.addEvent('load', function() {
//	new Element('div',{'id':'created_runtime'}).inject($(document.body));
	if (!document.preloader) 
		document.preloader = new Preloader();
 });