/**
 * windows:
 * stack
 * focusing zIndex
 * unfocused zIndex
 * controlls
 * scroll Bars
 */
/**UI objects are
 * window-based interface realization.
 * 
 * Contains:
 * -desktop;
 * -icons;
 * -dock;
 * -windows;
 * -content listing tables;
 * -content editor forms;
 * -forms for adding content;
 * 
 */

/**preferences object 
 * keeps all userPrefs info
 */

var prefObj = Class.create({
	initialize: function(options) {
		try{
		    this.options = {
			     contPane:	'content'
		    };
		    Object.extend(this.options, options || { });
		    //this.windowFadeOnDrag = false;
		    //qconsole.log(localStorage);
		}
		catch(err){
			alert('preferences: initialize error:' + console.log(err));
		}
	},
	
	desktopBackground: /*(!Object.isUndefined(localStorage["desktopBackground"])&&localStorage["desktopBackground"] !='null'&&localStorage["desktopBackground"]!='')?localStorage["desktopBackground"]:*/"/templates/img/admin/Copenhagen.jpg",
	
	windowFadeOnDrag: /*(!Object.isUndefined(localStorage["windowFadeOnDrag"])&&localStorage["windowFadeOnDrag"] !='null')?localStorage["windowFadeOnDrag"]:*/false,
	
	ui: function(){
		var backgrounds = new Array("/templates/img/admin/Copenhagen_thumb.jpg",
				"/templates/img/admin/Bryce_thumb.jpg",
				"/templates/img/admin/Flowers_thumb.jpg"
				);

		var container = new Element("div", {style:	"padding-left:20px;" +
													"padding-top:20px;" +
													"padding-right:15px;" +
													"background-color:#E8E8E8;" +
													"height:100%;"});
		
		var backContainer = new Element("div", {style:	"height:200px;" +
													  	"margin:9px;" +
													  	"padding-left:20px;" +
													  	"min-width:660px;" +
													  	"border:1px #ccc solid;" +
													  	"background-color:#E1E1E1;" +
													  	"-moz-border-radius:10px;"+
													  	"-o-border-radius:10px;"+
													  	"-webkit-border-radius:10px;"});
		
		var othersContainer = new Element("div",{style:	"height:200px;" +
														"margin:9px;" +
														"padding-left:20px;" +
														"border:1px #ccc solid;" +
														"background-color:#E1E1E1;" +
														"margin-top:20px;"+
														"-moz-border-radius:10px;"+
													  	"-o-border-radius:10px;"+
													  	"-webkit-border-radius:10px;"});
		backContainer.insert(this.showTitle("Backgrounds:"));
		
		
		backgrounds.each(function(back){
							var img = new Element("img",{
								style:"width:200px;float:left;margin-right:20px;margin-top:20px;",
								width:200,
								src: back,
								onclick: "preferences.setDesktopBackground(this);"
							});
							backContainer.insert(img);
		}.bind(this));
		
		if(this.windowFadeOnDrag!='false'){
			var fodText = "enabled";
			var fodValue = "true";
		}
		
		else{
			var fodText = "disabled";
			var fodValue = "false";
		}
		var fadeOnDragButton = new Element("button",{value:fodValue,onclick:"preferences.setDragTransitions(this);"});
		fadeOnDragButton.update(fodText);
		var otherTbl = new Element("table");
		var tr = new Element("tr");
		var left = new Element("td");
		var right= new Element("td");
		
		left.insert("Widows drag transitions:");
		right.insert(fadeOnDragButton);
		otherTbl.insert(tr.insert(left).insert(right));
		othersContainer.insert(this.showTitle("Other preferences:"));
		othersContainer.insert(otherTbl);
		container.insert(backContainer).insert(othersContainer);
		return container;
	},
	
	setDragTransitions: function(el){
		if(el.value == "false"){
			this.windowFadeOnDrag = true;
			localStorage["windowFadeOnDrag"] = true;
			el.value = "true";
			$(el).update("enabled");
		}
		else{
			this.windowFadeOnDrag = false;
			localStorage["windowFadeOnDrag"] = false;
			el.value = "false";
			$(el).update("disabled");
		}
	},
	
	setDesktopBackground: function(el){
		this.loading = new loadingBox();
		this.desktopBackround = el.src.substr(0,(el.src.length - 10)) + el.src.substr((el.src.length - 4),el.src.length);
		localStorage["desktopBackground"] = this.desktopBackround;
		$('content').style.background='url('+this.desktopBackround+') no-repeat';
		setTimeout(function(){this.loading.removeBox();}.bind(this),1000);
	},
	
	showTitle: function(text){
		return "<div style='width:150px;padding-left:10px;" +
							"font-weight:bold;margin-top:-10px;" +
							"background-color:#E8E8E8;" +
							"border:1px #ccc solid;" +
							"-moz-border-radius:5px;"+
							"-o-border-radius:5px;"+
							"-webkit-border-radius:5px;'>"+text+"</div>";
	}
});
 
 //preferences = new prefObj();
/**desktop object creates the desktop itself,
 * with icons and "start-up" windows;
 * 
 */
var desktop = Class.create({ 
	initialize: function(options) {
		try{
		    this.options = {
			     showClock: true, 
			     elements:	{},
			     contPane:	'content'
		    };
		    Object.extend(this.options, options || { });
		    this.elements = this.options.elements;
		    //this.tabs = new stackObj;
		    document.observe("contextmenu",function(e){
		    	//e.stop();
		    	//	e.stopPropagation();
	    		e.preventDefault();
		    	return false;
		    }.bind(this));
		    
		    document.observe("mousedown",function(e){
		  
		    	if(!Object.isUndefined($('context'))&&$('context')!=null)$('context').hide();//fade({duration:0.3});
		    	if(e.isRightClick()||e.button==2){
		    		e.stop();
		    		e.stopPropagation();
		    		e.preventDefault();
		    		e.returnValue = false;
		    		if(e.element().className=='icon'||e.element().parentNode.className=='icon')this.showIconContext(e);
		    		else this.showContext(e);
		    		return false;
		    	}
		    }.bind(this));
		    setTimeout(function(){this.createDesktop();}.bind(this),100);
		}
		catch(err){
			alert('dock: initialize error:' + console.log(err));
		}
	},
	createDesktop: function(){
	/**info container message*/
		var infoText="<div style='text-align:justify;padding:10px;'><br/>" +
				"<b>Welcome to system administration area!</b><br/><br/>" +
				"<p>The admin area based on WEBdesktop + windows interface.</p>" +
				"<p>You can see icons on the left side of desktop." +
				"Each icon starts it's application as simple as double click.</p>" +
				"<p>We tried to make your work with this interface as easy as possible," +
				"and designed system that incorporates years of experience " +
				"and introduces new level of usability and funtionality.</p></div>";
	/**eof*/
		
	//$(this.options.contPane).style.height =document.viewport.getHeight() + 'px';
	//$(this.options.contPane).style.width ="100%";
	//$(this.options.contPane).style.backgroundImage = "url("+preferences.desktopBackground+")";
	//$(this.options.contPane).setStyle({"\-moz\-background-\size":"100% auto"});
	//$(this.options.contPane).style['-moz-background-size']= "100% auto";
	

	
	/**Dancing around FF bug, setting styles 
	 * with setAttribute method;
	 */
	$(this.options.contPane).setAttribute("style",	"-moz-background-size:100% auto;" +
													"-khtml-background-size:100% auto," +
													"-o-background-size:100% auto;" +
													"-webkit-background-size:100% auto;" +
													"background-image:url("+preferences.desktopBackground+");" +
													"min-height:"+document.viewport.getHeight()+"px;"+
													"height:100%;");									

	

	document.body.style.overflow = 'hidden';
	document.body.style.cursor = 'progress';
	this.loading = new loadingBox();
	Dock = new dock;
	appWindowsStack = null;
	new windowCreate({
		 title: 'about SMKadmin',
	     scale: false,
	     content: infoText,
	     withTopMenu: false,
	     withScrollBars: false,
	     withControls: true,
	     width:		'350',
	     height:	'400',
	     contPane:	'content'});
		
	
	/**pages manager*/
	var pagesList = new tableObj({table:'page',columns:Array({name:'id',type:'text'},	
															{name:'title',type:'text'},
															{name:'text',type:'textarea'})});
	
	var nodesList = new tableObj({table:'node',columns:Array({name:'id',type:'text'},
															{name:'name',type:'text'},
															{name:'module',type:'text'},
															{name:'params',type:'textarea'})});
	
	var collateralList = new tableObj({table:'collateral',
										columns:Array({name:'id',type:'text'},
													{name:'title',type:'text'},
													{name:'cat',type:'text'},
													{name:'preview',type:'text'},
													{name:'active',type:'text'},
													{name:'image',type:'file'}),
										addButton:true});
	
	var collateralCatsList = new tableObj({table:'collateral_cats',
		columns:Array({name:'id',type:'text'},
					{name:'title',type:'text'},
					{name:'image',type:'file'},
					{name:'infolink',type:'text'},
					{name:'bgcolor',type:'text'},
					{name:'active',type:'text'}),
		addButton:true});
	
	//var editPage = new editorObj({table:'page',columns:Array('id','title','text'), id:1});
	
	
	setTimeout(function(){
	
		new iconCreate({
			title: 'Pages manager',
			content: pagesList.table,
			xPos: 20,
			yPos: 20,
			width:600,
			height:400,
			className:'icon',
			src:"/templates/img/ui/icons/pages.png",
			contPane:	'content'});
		
		new iconCreate({
			title: 'Structure manager',
			content: nodesList.table,
			xPos: 20,
			yPos: 100,
			className:'icon',
			src:"/templates/img/ui/icons/structureMan.png",
			contPane:	'content'});
		
		new iconCreate({
			title: 'Collateral manager',
			content: collateralList.table,
			xPos: 20,
			yPos: 190,
			className:'icon',
			src:"/templates/img/ui/icons/collateral.png",
			contPane:	'content'});
		
		new iconCreate({
			title: 'Collateral categories manager',
			content: collateralCatsList.table,
			xPos: 20,
			yPos: 280,
			width: 500,
			className:'icon',
			src:"/templates/img/ui/icons/collateral.png",
			contPane:	'content'});
		
		new iconCreate({
			title: 'System preferences',
			content: preferences.ui(),
			id:'sysPrefs',
			xPos: 20,
			yPos: 370,
			width:740,
			height:400,
			className:'icon',
			src:"/templates/img/ui/icons/PrefIco.png",
			contPane:	'content'});
		
		document.body.style.cursor = 'default';
		this.loading.removeBox();
		Droppables.add(this.options.contPane,{
			onDrop: function(drag, drop, perc){
			//alert('hi');
			//drag.style.zIndex='9999999';
			}
		});
	}.bind(this), 1500);
	/**EOF pages manager*/
	
	},
	
	showContext: function(e){
		if(!Object.isUndefined($('context'))&&$('context')!=null){
			if($('context').childNodes.length>1){
				$('context').removeChild($('context').childNodes[0]);
			}
			$('context').show();
			$('context').setStyle({
				top:e.pointerY()+'px',
				left:e.pointerX()+'px'
			});
		}
		else{
			var div = new Element("div",{
				id:"context",
				style:"background-color:#F9F9F9;" +
						"width:250px;" +
						"height:100px;" +
						"top:"+e.pointerY()+"px;" +
						"left:"+e.pointerX()+"px;" +
						"position:absolute;" +
						"z-index:999;" +
						"-moz-border-radius:7px;" +
						"-webkit-border-radius:7px;" +
						"-khtml-border-radius:7px;" +
						"padding-top:5px;" 
			});
			var item = new Element("div",
									{style:	"font-size:15px;" +
											"padding:3px 3px 3px 20px;" +
											"height:15px;"});
			item.update("Change Desktop Background...");
			div.insert(item);
			document.body.insert(div);
			div.setOpacity(0.9);
			item.setOpacity(1);
			this.setCDBObserver(item);
		}	
	},
	
	showIconContext: function(e){
		//console.log(e.element());
		if(!Object.isUndefined($('context'))&&$('context')!=null){
			//if($('context').childNodes.length<2){
				$('context').update();
				var cdb = this.createDesktopContextContents();
				var mtt = this.createIconContextContents();
				$('context').insert(mtt);
				$('context').insert(cdb);
				this.setCDBObserver(cdb);
				this.setMTTObserver(mtt,e.element());
		
			
			//}
			
			$('context').show();
			$('context').setStyle({
				top:e.pointerY()+'px',
				left:e.pointerX()+'px'
			});
		}
		else{
			var div = new Element("div",{
				id:"context",
				style:"background-color:#F9F9F9;" +
						"width:250px;" +
						"height:100px;" +
						"top:"+e.pointerY()+"px;" +
						"left:"+e.pointerX()+"px;" +
						"position:absolute;" +
						"z-index:999;" +
						"-moz-border-radius:7px;" +
						"-webkit-border-radius:7px;" +
						"-khtml-border-radius:7px;" +
						"padding-top:5px;" 
			});
			var item = new Element("div",
									{style:	"font-size:15px;" +
											"padding:3px 3px 3px 20px;" +
											"height:15px;"});
			var item2 = new Element("div",
					{style:	"font-size:15px;" +
							"padding:3px 3px 3px 20px;" +
							"height:15px;"});
			item.update("Change Desktop Background...");
			item2.update("Move To Trash");
			div.insert(item);
			div.insert(item2);
			document.body.insert(div);
			div.setOpacity(0.9);
			item.setOpacity(1);
			this.setCDBObserver(item);
			this.setMTTObserver(item2,e.element());
		}	
	},
	
	createDesktopContextContents: function(){
		var item = new Element("div",
					{style:	"font-size:15px;" +
							"padding:3px 3px 3px 20px;" +
							"height:15px;"});
		item.update("Change Desktop Background...");
		return item;
	},
	
	createIconContextContents: function(){
		var item2 = new Element("div",
		{style:	"font-size:15px;" +
				"padding:3px 3px 3px 20px;" +
				"height:15px;"});
		item2.update("Move To Trash");
		
		return item2;
		
	},
	
	setCDBObserver: function(el){
		el.observe("mousedown",function(e){
			/**Creating prefs Window*/
			new windowCreate({
				title: 'System preferences',
			    scale: false,
			    content: preferences.ui(),
			    withTopMenu: false,
			    withScrollBars: false,
			    withControls: true,
			    width:		740,
			    height:		400,
			    contPane:	'content'});
			/**eof*/
		}.bind(this));
		el.observe("mouseover",function(){
			el.setStyle(	"font-size:15px;" +
						"padding:3px 3px 3px 20px;" +
						"height:15px;" +
						"background:#0E37E7;" +
						"background:-moz-linear-gradient(top, #4A6AF5, #0E37E7);" +
						"background:-webkit-gradient(linear, left top, left bottom, from(#4A6AF5), to(#0E37E7));");
		/*	el.style.background="#0E37E7," +
								"-moz-linear-gradient(top, #4A6AF5, #0E37E7)," +
								"-webkit-gradient(linear, left top, left bottom, from(#4A6AF5), to(#0E37E7))";*/
		}.bind(this));
		el.observe("mouseout",function(){el.style.background="transparent";}.bind(this));
		
	},
	
	setMTTObserver: function(el,target){
		try{
		el.observe("mousedown",function(e){
			/**Moving Item To Trash*/
			try{
				if(target.parentNode.className =='icon') var delme = target.parentNode;
				else console.log(target);
			Dock.trashElements.push(target.parentNode);
			target.parentNode.fade();
			}
			catch(err){
				console.log(err);
			}
			/**eof*/
		}.bind(this));
		el.observe("mouseover",function(){
			el.setStyle(	"font-size:15px;" +
						"padding:3px 3px 3px 20px;" +
						"height:15px;" +
						"background:#0E37E7;" +
						"background:-moz-linear-gradient(top, #4A6AF5, #0E37E7);" +
						"background:-webkit-gradient(linear, left top, left bottom, from(#4A6AF5), to(#0E37E7));");
		}.bind(this));
		el.observe("mouseout",function(){el.style.background="transparent";}.bind(this));
		}
		catch(err){
			console.log(err);
		}
	}
});

/**Top menu object introduces 
 * realization of windows top menu
 */
var topMenu = Class.create({
		 
		initialize: function(options) {
			try{
			    this.options = {
			     parentElement: "",
			     items: new Array()
			    };
			    Object.extend(this.options, options || { });
			    this.items = this.options.items;
			}
			catch(err){
				alert('topMenu: initialize error:' + console.log(err));
			}
		},
		
		items: new Array(),
		
		parentElement: $('content'),
		
		createMenuArea: function(){
			
		},
		
		createMenuItem: function(){
			
		},
		
		createSubMenu: function(){
			
		}
		
});

/**dock object creates dock,
 * trashbox, clock and other "widgets".
 * It also handles collapsed windows
 */
var dock = Class.create({
	initialize: function(options) {
		try{
		    this.options = {
			     height:	'60',
			     showClock: true,
			     elements:	{},
			     contPane:	'content'
		    };
		    Object.extend(this.options, options || { });
		    this.elements = this.options.elements;
		    //this.tabs = new stackObj;
		    setTimeout(function(){this.createDock();}.bind(this),10);
		}
		catch(err){
			alert('dock: initialize error:' + console.log(err));
		}
	},
	
	elements: {},
	
	tabsPane: '',
	
	trashBox: '',
	
	trashElements: Array(),
	
	tabs: {},
	
	createDock: function(){
		try{
			var dockBox = new Element('div',{id:'dock',
											style:"height:"+this.options.height+"px;" +
													"width:100%;" +
													"background:#ffbbcc;" +
													"position:absolute;" +
													"bottom:0px;" +
													"z-index:1100;"});
			dockBox.setOpacity(0.8);
			if(this.options.showClock){
				dockBox.insert(this.createClock());
			}
			dockBox.insert(this.createTrashBox());
			
			var dockTable = new Element('table',{style:"width:40%;"});
			var dockTabsPane = new Element('tr',{id:"dockTabsPane"});
			
			dockBox.insert(dockTable.insert(dockTabsPane));
			
			$(this.options.contPane).insert(dockBox);
			this.tabsPane = $('dockTabsPane');
			
			/**trash actions*/
			Droppables.add(this.trashBox.id,{
				/*onHover: function(drag, drop, perc){
					drop.style.backgroundColor = '#ccffcc';
				}*/
				hoverclass: 'trashHover',
				onDrop: function(drag, drop, perc){
				this.trashElements.push(drag);
				drag.fade();
				}.bind(this)
			});
		
		$(this.trashBox.id).observe("dblclick", function(event){
				event.stop();
				var cont = new Element('div');
				this.trashElements.each(function(el){
					el.style.display = 'block';
					el.style.position = 'static';
					cont.insert(el); 
				});
				new windowCreate({
					 title: 'trash',
				     scale: false,
				     content: cont,
				     withTopMenu: false,
				     withScrollBars: false,
				     withControls: true,
				     width:		'300',
				     height:	'300',
				     contPane:	'content'});
				
			}.bind(this));
		}
		catch(err){
			console.log(err);
		}
	},
	
	insertTab:function(element){
		try{
			this.tabs[element.id] =element;
			var tabBox = new Element('td',{id:"dockTab" + element.id,
											width:"120",
											style:"border:1px #ccc solid;" +
													"width:120px;" +
													"max-width:200px;" +
													"cursor:pointer;" +
													"display:none;" +
													"background:#0077dd"});
			tabBox.insert(element.title);
			
			this.tabsPane.insert(tabBox);
			new Effect.Grow(tabBox);
			tabBox.observe("click", function(event){
				new Effect.Grow($(tabBox.id.substr(7,tabBox.id.length)));
				new Effect.Fade(tabBox,{duration:'0.8'});
				setTimeout(function(){tabBox.parentNode.removeChild(tabBox);}.bind(this),800);
				
				delete this.tabs[tabBox.id.substr(7,tabBox.id.length)];
			}.bind(this));
		}
		catch(err){
			alert('dock. insertTab error'+console.log(err));
		}
	},
	
	createTrashBox: function(){
		var trashBox = new Element('div',{id:"trashBox",
		style:"float:right;" +
			"width:60px;" +
			"height:60px;"+
			"font-size:14px;" +
			"font-family:Comic Sans MS,Herculanum;" +
			"background:url(/templates/img/ui/trashBox.png) center no-repeat;"});
		this.trashBox = trashBox;
		return trashBox;
	},
	
	createClock: function(){
		var date = new Date();
		var hours = date.getUTCHours() + 2;
		var minutes = date.getUTCMinutes();
		//alert((""+minutes).length);
		if((""+minutes).length == 1) minutes = '0' + minutes;
		var dateBox = new Element('div',{style:"float:right;" +
												"width:90px;" +
												"font-size:30px;" +
												"font-family:Comic Sans MS,Herculanum"});
		var hoursBox = new Element("span",{id:'hoursBox'});
		var minutesBox = new Element("span",{id:'minutesBox'});
		hoursBox.insert(hours);
		minutesBox.insert(minutes);
		dateBox.insert(hoursBox).insert(':').insert(minutesBox);
		
		setInterval(function(){this.updateTime();}.bind(this),5000);
		return dateBox;
	},
	
	updateTime: function(){
		var date = new Date();
		var hours = date.getUTCHours() + 2; 
		var minutes = date.getUTCMinutes();
		if((""+minutes).length == 1) minutes = '0' + minutes;
		$('hoursBox').update(hours);
		$('minutesBox').update(minutes);
		
	}
});

/**Icons class handling
 * creation of icons and assigning
 * actions that will perform 
 * on icon click.
 */
var iconCreate = Class.create({
	initialize: function(options) {
		try{
		    this.options = {
			     title: '',
			     src:'/templates/img/admin/pages.gif',
			     contPane:	'content',
			     xPos: 20,
			     yPos: 20,
			     id:'',
			     className:'icon',
			     width:350,
			     height:350,
			     color:'#ffe',
			     content: ''
		    };
		    Object.extend(this.options, options || { });
		    this.title = this.options.title;
		   
		    this.createIcon();
		}
		catch(err){
			alert('window: initialize error:' + console.log(err));
		}
	},
	
	icon:{},
	
	edit: '',
	
	destroyEdit: function(){
		//this.edit.destroy();
		this.icon.childNodes[2].style.backgroundColor = "transparent";
		//this.edit='';
	},
	
	createIcon: function(){
		var icon = new Element('div',{style:"width:98px;" +
											"text-align:center;" +
											"position:absolute;" +
											"color:"+this.options.color+";" +
											"top:"+this.options.yPos+"px;" +
											"left:"+this.options.xPos+"px;"});
		icon.addClassName(this.options.className);
		if(this.options.id !='')icon.id=this.options.id;
		var img = new Element('img',{style:"width:48px;",
									 src:this.options.src});
		var text = new Element('span',{style:	"width:98px;" +
												"display:inline-block;" +
												"font-family:arial,tahoma,verdana;" +
												"font-size:13px;" +
												"font-weight:100;" +
												"text-shadow:#333 2px 2px;" +
												"-moz-border-radius:10px;"+
												"-o-border-radius:10px;"+
												"-webkit-border-radius:10px;" +
												"border-radius:10px;" +
												"padding:3px;"}).update(this.options.title);
		icon.insert(img).insert('<br/>').insert(text);
		$(this.options.contPane).insert(icon);
		new Draggable(icon,{
			ghosting: true
		});
		
		this.icon = icon;
		
		icon.observe('mousedown',function(event){
			
			if(icon.childNodes[2].style.backgroundColor !="#7788ff"&&icon.childNodes[2].style.backgroundColor !="rgb(119, 136, 255)"){
				//alert(icon.childNodes[2].style.backgroundColor);
				icon.childNodes[2].style.backgroundColor = "#7788ff";
			}
			else{
				if(this.edit == ''){
					this.edit = new Ajax.InPlaceEditor(icon.childNodes[2], '/ui.php',{
						cancelControl:false,
						okControl:false,
						highlightcolor:'none',
						externalControl:'elementNotExists',
						externalControlOnly:true,
						highlightendcolor:'none',
						hoverClassName:'',
						submitOnBlur:true,
						onLeaveEditMode: function(form,value){ 
							//console.log(this.edit);
							//this.destroyEdit();
						//console.log(icon.childNodes[2]);
							icon.childNodes[2].style.backgroundColor='transparent';
						}.bind(this)
					});
					
					//alert(icon.childNodes[2].style.backgroundColor);
					//icon.childNodes[2].style.backgroundColor='transparent';
					//console.log(icon.childNodes[2]);
					/*setTimeout(function(){
						icon.childNodes[3].style.backgroundColor='transparent';
					}.bind(this),300);*/
				}
				else icon.childNodes[2].style.backgroundColor='transparent';
				//this.edit.enterEditMode('click');
				
			}
			
			
				
		}.bind(this));
		
		icon.observe('dblclick',function(){
			icon.childNodes[2].style.backgroundColor='transparent';
			new windowCreate({
				title: this.options.title,
			    scale: false,
			    content: this.options.content,
			    withTopMenu: false,
			    withScrollBars: false,
			    withControls: true,
			    width:		this.options.width,
			    height:	this.options.height,
			    contPane:	'content'});
			}.bind(this));
		
	}
});

/**Window object
 * handles windows creation, 
 * widows controlls,
 * resizing, and creates 
 * new stack of windows
 * to perform focusing, position restoring, etc.
 */
var windowCreate = Class.create({
	 
	initialize: function(options) {
		try{
		    this.options = {
			     title: '',
			     scale: false,
			     content: {},
			     withTopMenu: false,
			     withScrollBars: false,
			     withControls: true,
			     width:		'300',
			     height:	'300',
			     contPane:	'content'
		    };
		    Object.extend(this.options, options || { });
		   // alert(this.options.content);
		    this.title = this.options.title;
		    this.content = this.options.content;
		    this.createWindow();
		}
		catch(err){
			alert('window: initialize error:' + console.log(err));
		}
	},
	
	id:			'',
	
	title: 		'',
	
	content:	{},
	
	scrollbars:	'',
	
	topMenu:	'',
	
	controls:	'',

	window: 	'',
	
	resizer:	'',
	
	state:		{},

	createWindow: function(){
		try{
			this.checkStack();
			this.id = 'appWindow' + appWindowsStack.elements().length;
			this.window = {
					id: 		this.id,
					title:		this.title,
					content:	this.content,
					scrollbars:	this.scrollbars,
					topMenu:	this.topMenu,
					controls:	this.controls
			},
			
			this.addToStack(this.window);
			
			var windowBox = new Element('div',{
					id: this.id,
					width:this.options.width,
					height:this.options.height,
					style:	"overflow:hidden;" +
							"position:absolute;" +
							"height:"+this.options.height+'px;'+
							"width:"+this.options.width+'px;'+
							"z-index:"+appWindowsStack.elements().length +";" });
			
			var windowHeader = this.createHeader();
			if(this.options.withControls) windowHeader.insert(this.createControls());
			windowHeader.insert(this.title);
			
			var contentBox = new Element('div',{id:windowBox.id + 'contentBox',
												style:	"width:"+(this.options.width-2)+"px;"+
														"height:"+(this.options.height-25-13)+"px;" +
														"overflow:hidden;" +
														"border:1px #ccc solid;" +
														"background-color:#FFFFFF;"});
			var windowFooter = new Element('div',{
				style:"width:100%;" +
						"height:13px;" +
						"background-color:#ededed;" +
						"text-align:right;"
			});
			var resizer = new Element('img',{
				style:"" +
						"cursor:nwse-resize;",
				src:"/templates/img/ui/window/windowResize.png",
				id:windowBox.id + 'resizer'
			});
			this.resizer = resizer;
			//alert(this.content);
			windowBox.insert(windowHeader);
			$(contentBox).insert(this.content);
			if(this.options.withTopMenu) contentBox.insert(this.createMenuArea());
			if(this.options.withScrollBars) this.createScrollBars();
			windowBox.insert(contentBox);
			windowFooter.insert(resizer);
			windowBox.insert(windowFooter);
			
			
			
			this.injectWindow(windowBox);
			this.addObservers();
		}
		catch(err){
			alert('Window: create window error ' + console.log(err));
		}
		
	},
	
	checkStack: function(){
	//	alert(appWindowsStack);
		if(!appWindowsStack || appWindowsStack === null ||Object.isUndefined(appWindowsStack)) appWindowsStack = new stackObj();
		return true;
	},
	
	addToStack: function(){
		appWindowsStack.push(this.window);
	},
	
	removeFromStack: function(id){
		appWindowsStack.unsetById(id);
	},
	
	changeZIndex: function(active){
		var i =0;
		appWindowsStack.elements().each(function(el){
			$(el.id).style.zIndex = i;
			i++;
		});
		setTimeout(function(){active.style.zIndex = appWindowsStack.elements().length +1;}.bind(this),10);
	},
	createHeader: function(){
		var headContainer = new Element('div',{'class': 'handle',
												width:this.options.width,
												style:	"background:url(/templates/img/ui/window/headerBack.png);" +
														"height:23px;" +
														"color:#222;" +
														"text-shadow: 0 1px 0 #ffffff;"+
														"cursor:move default;" +
														"text-align:left;" +
														"font-family: Arial, Tahoma;" +
														"font-size:15px;" +
														"line-height:22px;" +
														"-moz-border-radius:5px 5px 0 0;"+
														"-o-border-radius:5px 5px 0 0;"+
														"-webkit-border-radius:5px 5px 0 0;"});
		var leftCorner = new Element('div',{style:	"background:url(/templates/img/ui/window/headerLC.png);" +
													"float:left;" +
													"width:5px;" +
													"height:23px;" +
													"-moz-border-radius:10px 0 0 0;"+
													"-o-border-radius:10px 0 0 0;"+
													"-webkit-border-radius:10px 0 0 0;"});
		var rightCorner = new Element('div',{style:	"background:url(/templates/img/ui/window/headerRC.png);" +
													"float:right;" +
													"width:5px;" +
													"height:23px;"+
													"-moz-border-radius:0 10px 0 0;"+
													"-o-border-radius:0 10px 0 0;"+
													"-webkit-border-radius:0 10px 0 0;"});
		headContainer.insert(leftCorner);
		headContainer.insert(rightCorner);
		return headContainer;
	},
	createMenuArea: function(){
		
	},
	
	createScrollBars: function(){
		
	},
	
	createControls: function(){
		var closeButton = new Element('div',{id:	this.id + "closeButton",
											style:	"width:14px;" +
													"height:14px;" +
													"float:left;"+
													"margin-top:4px;" +
													"margin-left:3px;" +
													"cursor:pointer;"+
													"background:url(/templates/img/ui/window/headerCloseBut.png);"});
		var collapseButton = new Element('div',{id:	this.id + "collapseButton",
												style:	"width:14px;" +
												"height:14px;" +
												"float:left;"+
												"margin-top:4px;" +
												"margin-left:7px;" +
												"cursor:pointer;"+
												"background:url(/templates/img/ui/window/headerCollapseBut.png);"});
		var expandButton = new Element('div',  {id:	this.id + "expandButton",
												style:	"width:14px;" +
												"height:14px;" +
												"float:left;"+
												"margin-top:4px;" +
												"margin-left:7px;" +
												"cursor:pointer;"+
												"background:url(/templates/img/ui/window/headerExpandBut.png);"});
		var buttonsContainer = new Element('div', {style:"width:70px;" +
														"float:left;"
														
												});
		buttonsContainer.insert(closeButton);
		buttonsContainer.insert(collapseButton);
		buttonsContainer.insert(expandButton);
		return buttonsContainer;
	},
	
	injectWindow: function(domWindow){
		if(!this.options.contPane)
			var contPane = $('contPane');
		else var contPane = $(this.options.contPane);
		domWindow. style.display = 'none';
		contPane.insert(domWindow);
		domWindow.appear();
		if(preferences.windowFadeOnDrag!='false'){
			var stEff = function(element) { 
							new Effect.Opacity(element,{ from: 1, to: 0.8,duration:0.5 }); 
						};
			var endEff = function(element) { 
							new Effect.Opacity(element,{ from: 0.8, to: 1,duration:0.5 }); 
						};
		}
		else{
			var stEff = false;
			var endEff = false;
		}
		new Draggable($(domWindow.id),{handle:'handle',
			starteffect: stEff,
			endeffect: endEff,
			onEnd: function(element){
				//this.changeZIndex();
				var i =0;
				appWindowsStack.elements().each(function(el){
					$(el.id).style.zIndex = i;
					i++;
				});
				setTimeout(function(){element.element.style.zIndex = appWindowsStack.elements().length +1;}.bind(this),10);
				//alert(appWindowsStack.elements().length);
		} });
		var qwe = domWindow.id;
		$(domWindow.id).observe("mousedown",function(event){
			var i =0;
			appWindowsStack.elements().each(function(el){
				$(el.id).style.zIndex = i;
				i++;
			});
			setTimeout(function(){$(this.id).style.zIndex = appWindowsStack.elements().length +1;}.bind(this),10);
		}.bind(this));
	},
	
	addObservers: function(){
		$(this.id + 'closeButton').observe('click',function(){
			new Effect.Fade(this.id);
			setTimeout(function(){
				$(this.id).parentNode.removeChild($(this.id));
			}.bind(this),1000);
			this.removeFromStack(this.id.substr(9,this.id.length));
			
		}.bind(this));
		
		$(this.id + 'collapseButton').observe('click',function(){
			var pos = $(this.id).cumulativeOffset();
			this.state.xPos = pos.left;
			this.state.yPos = pos.top;
			this.state.height = $(this.id).getHeight();
			this.state.width = $(this.id).getWidth();
			
			new Effect.DropOut(this.id,{duration:'0.8'});
			Dock.insertTab(this);
			/*setTimeout(function(){//new Effect.Move($(this.id),{x:this.state.xPos,y:this.state.yPos+1000,mode:'absolute'});
				$(this.id).fade();
			}.bind(this),250);*/
			//Effect.Puff($(this.id));
			//this.removeFromStack(this.id);
			
		}.bind(this));
		
		$(this.id + 'expandButton').observe('click',function(event){
			//new Effect.Grow(this.id);
			if(this.state.expanded != 1){
				//alert('his');
				this.state.expanded = 1;
				var pos = $(this.id).cumulativeOffset();
				this.state.xPos = pos.left;
				this.state.yPos = pos.top;
				this.state.height = $(this.id).getHeight();
				this.state.width = $(this.id).getWidth();
				new Effect.Scale($(this.id), 100,{scaleContent:false,
												scaleMode:{originalHeight:document.body.getHeight()-60, 
													originalWidth:document.body.getWidth()
													}});
				new Effect.Scale($(this.id + 'contentBox'), 100,{scaleContent:false,
					scaleMode:{originalHeight:document.body.getHeight()-60 -25-13, 
						originalWidth:document.body.getWidth()-2
						}});
				new Effect.Move($(this.id),{x:0,y:0,mode:'absolute'});
				this.changeZIndex(event.element().parentNode.parentNode.parentNode);
				
			}
			else{
				
				new Effect.Scale($(this.id), 100,{scaleContent:false,
					scaleMode:{originalHeight:this.state.height, 
						originalWidth:this.state.width
						}});
				new Effect.Scale($(this.id + 'contentBox'), 100,{scaleContent:false,
				scaleMode:{originalHeight:this.state.height -25 -13, 
				originalWidth:this.state.width-2
				}});
				new Effect.Move($(this.id),{x:this.state.xPos,y:this.state.yPos,mode:'absolute'});
				this.changeZIndex(event.element().parentNode.parentNode.parentNode);
				this.state.expanded = 0;
			}
		}.bind(this));
		
		new Draggable($(this.resizer),{
			starteffect: false,
			endeffect: false,
			onDrag: function(object, event){
				try{
					//event.pointerX;	
					//event.pointerY;
					var offs = $(this.id).cumulativeOffset();
				//object.delta[1];
				if((event.pointerX() -offs.left + 7 >150 && event.pointerY() -offs.top +13 >90) || (object.delta[0] >0&&object.delta[1] >0)){
					$(this.id).style.width= event.pointerX() -offs.left + 7+ 'px';
					$(this.id).style.height =event.pointerY() -offs.top +13 + 'px';
					
					$(this.id+'contentBox').style.width= event.pointerX() -offs.left - 2 +7 + 'px';
					$(this.id+'contentBox').style.height =event.pointerY() -offs.top -10-25 + 'px';
					
					
					object.element.style.position="static";	
				}
				else object.element.style.position="static";	
				}
				catch(err){
					alert('window.add resize observer error' + console.log(err));
				}
			}.bind(this)
		});
		
	}
	
});

/**Table object 
 * generates simple table structure 
 * commonly used to view content list
 */
var tableObj = Class.create({
	initialize: function(options) {
		try{
		    this.options = {
		    		table: 'pages',
		    		columns: Array(),
		    		addButton: false
		    };
		    Object.extend(this.options, options || { });
		   // this.title = this.options.title;
		    
		    this.getData();
		}
		catch(err){
			alert('window: initialize error:' + console.log(err));
		}
	},
	
	data: '',
	
	table: '',
	
	createTable: function(){
		var data = this.getData();
	
		
		
	},
	
	setEditObserver: function(el,id){
		el.observe("click", function(){
			var editPage = new editorObj({table:this.options.table,columns:this.options.columns, id:id});
			setTimeout(function(){
				new windowCreate({
					 title: this.options.table + ' - edit',
				     scale: false,
				     content: editPage.table,
				     withTopMenu: false,
				     withScrollBars: false,
				     withControls: true,
				     width:		'650',
				     height:	'400',
				     contPane:	'content'});
				nicEditors.allTextAreas({iconsPath : '/templates/js/lib/nicEditorIcons.gif',
										width:'100%',
										fullPanel : true});
			}.bind(this),160);
			
			}.bind(this));
	},
	
	setAddObserver: function(el,id){
		el.observe("click", function(){
			var editPage = new editorObj({table:this.options.table,columns:this.options.columns, id:''});
			setTimeout(function(){
				new windowCreate({
					 title: this.options.table + ' - edit',
				     scale: false,
				     content: editPage.table,
				     withTopMenu: false,
				     withScrollBars: false,
				     withControls: true,
				     width:		'650',
				     height:	'300',
				     contPane:	'content'});
				nicEditors.allTextAreas({iconsPath : '/templates/js/lib/nicEditorIcons.gif',
										width:'100%',
										fullPanel : true});
			}.bind(this),160);
			
			}.bind(this));
	},
	
	getData: function(){
		try{
		//	alert(this.options.table + '/');
			var req = new Ajax.Request(this.options.table + '/',{
										onSuccess:	function(responce){
														this.data = responce.responseJSON;
														var table = new Element('table',{width:"100%",cellspacing:0,style:"margin:0px;padding:0px;"});
														var tr = new Element('tr');
														
														this.options.columns.each(function(col){
															var td = new Element('td',{style:"border:1px #ccc solid;"}).update(col.name);
															tr.insert(td);
														}.bind(this));
														tr.insert(new Element('td',{style:"border:1px #ccc solid;"}).update('edit'));
														table.insert(tr);
														
														var i = 0;
														this.data.each(function(el){
															if(i%2==0) var tr = new Element('tr',{style:"background:#efefef;"});
															else var tr = new Element('tr',{style:"background:#e1e1e1;"});
															//{style:"border:1px #ccc solid;"}
															//var tr = new Element('tr');
																this.options.columns.each(function(col){
																	var td = new Element('td',{style:"border:1px #ccc solid;"}).update(el[col.name]);
																	tr.insert(td);
																}.bind(this));
																var edit = new Element("input", {type:"submit",value:"edit"});
																var td = new Element('td',{style:"border:1px #ccc solid;"}).update(edit);
																tr.insert(td);
															this.setEditObserver(edit,el.id);
															table.insert(tr);
															i++;
														}.bind(this));
														var tableContainer = new Element("div",{style:"width:100%;height:100%;background-color:#E8E8E8;"});
														tableContainer.insert(table);
														if(this.options.addButton){
															var addButton = new Element("button",{value:'add',style:"float:right;"});
															addButton.update("add");
															tableContainer.insert(addButton);
															this.setAddObserver(addButton);
														}
														this.table=tableContainer;
														
													}.bind(this)
			});
			
			setTimeout(function(){return this.table;}.bind(this),1000);
		}
		catch(err){
			alert("error in tableObj: getData"+ console.log(err));
		}
	}
	
});

/**Editor object
 * creates forms for adding 
 * and editing content
 */
var editorObj = Class.create({
	initialize: function(options) {
		try{
		    this.options = {
		    		table: 'pages',
		    		columns: Array(),
		    		id: '1'
		    };
		    Object.extend(this.options, options || { });
		   if(this.options.id !='')
			   this.getData();
		   else
			   this.createEmptyForm();
		}
		catch(err){
			alert('window: initialize error:' + console.log(err));
		}
	},
	
	data: '',
	
	table: '',
	
	loading:{},
	
	createTable: function(){
		var data = this.getData();
	
		
		
	},
	
	submitFile: function(form){
		var iframe = new Element("iframe",{	id:"submitFrame",
											name:"submitFrame",
											style:"width:1px;" +
													"height:1px;" +
													"border:none;"});
		document.body.insert(iframe);
		form.target = iframe.name;
		form.submit();
		var loader = new loadingBox();
		iframe.observe("load",function(event){
			setTimeout(function(){
			document.body.removeChild(iframe);
			loader.removeBox();
			document.fire('load');
			}.bind(this),500);
		});
		
		
	},
	
	setEditObserver: function(edit){
		if(!Object.isUndefined($('dropfile'))){
			
			/*document.getElementById('dropfile').addEventListener("drop", upload, false);
			document.getElementById('dropfile').addEventListener('dragover', function(event) { 
                event.returnValue = false; 
        }, false);
			function upload(event){
				alert('hello');
				console.log(event.dataTransfer);
				event.stopPropagation();

			}*/
			
			
			
			setTimeout(function(){
				console.log($('dropfile').up().firstDescendant());
				$('dropfile').addEventListener('dragover', function(event) { 
	                event.returnValue = false; 
				}, false);
				
				
				$('dropfile').observe('drop',function(event){
					console.log(event.dataTransfer.types);
					console.log(event.dataTransfer.getData('dyn.agk86rexuqu2u'));
					console.log(event.dataTransfer.getData('text/uri-list'));
					event.stop();
					$('dropfile').up().firstDescendant().value = files[0];
				}.bind(this));
			}.bind(this),2000);
		}
			edit.observe("click",function(){
			//	try{
				var data = {};
				var form = $(this.options.table + 'form'+this.options.id);
				/*console.log(form.image);
				$(this.options.table + 'form'+this.options.id).request({
					method:"POST",
					onCreate: function(){
					this.loading = new loadingBox();
				}.bind(this),
				onSuccess: function(){
					setTimeout(function(){this.loading.removeBox();}.bind(this),500);
				}.bind(this)
				});
				}
				catch(err){
					console.log(err);
				}*/
				
				if(form.getInputs('file').size()!=0&&form.getInputs('file')[0].value!='') this.submitFile(form);
				else{
					this.options.columns.each(function(col){
						data[col.name] = $(this.options.table + col.name +this.options.id).value;
					}.bind(this));
					
					new Ajax.Request(form.action,{
						method: 'post',
						parameters: data,
						
						onCreate: function(){
							this.loading = new loadingBox();
						}.bind(this),
						
						onSuccess: function(){
										
							setTimeout(function(){this.loading.removeBox();}.bind(this),500);
						}.bind(this)
					});
					return false;
				}
			}.bind(this));
	},
	
	createEmptyForm: function(){
		var form = new Element("form",{
			action:this.options.table + '/subm/'+this.options.id,
			enctype:'multipart/form-data',
			id: this.options.table + 'form'+this.options.id,
			method: 'post',
			onsubmit: "return false;"});
		
			var table = new Element('table',{width:"100%",cellspacing:0,style:"margin:0px;padding:0px;"});
			var i = 0;
				this.options.columns.each(function(col){
					if(i%2==0) var tr = new Element('tr',{style:"background:#efefef;"});
					else var tr = new Element('tr');
					var tdTitle = new Element('td',{style:"border:1px #ccc solid;"}).update(col.name);
					
					switch(col.type){
					case "textarea":
						var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
													"<textarea name='"+ col.name +"' style='width:100%;height:100%;' id='"+this.options.table + col.name +this.options.id+"'></textarea>");
					break;
					case "text":
						var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
								"<input name='"+ col.name +"' type='text' style='width:100%;height:100%;' " +
								"id='"+this.options.table + col.name +this.options.id+"' value=''/>");
					break;
					case "file":
						var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
								"<input name='"+ col.name +"' type='file' style='width:100%;height:100%;' " +
								"id='"+this.options.table + col.name +this.options.id+"' value=''/>");
					break;
					default:
						var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
								"<input name='"+ col.name +"' type='text' style='width:100%;height:100%;' " +
								"id='"+this.options.table + col.name +this.options.id+"' value=''/>");
					break;
					}
					
					
					tr.insert(tdTitle).insert(tdCont);
					table.insert(tr);
				}.bind(this));
				var edit = new Element("input", {type:"submit",value:"save"});
				var td = new Element('td',{style:"border:1px #ccc solid;"}).update(edit);
				var tr = new Element('tr');
				tr.insert(td);
				table.insert(tr);
				i++;
			
			this.table=form.insert(table);
			this.setEditObserver(edit);
			return this.table;
		
	},
	
	getData: function(){
		try{
			var req = new Ajax.Request(this.options.table + '/edit/'+this.options.id,{
										onSuccess:	function(responce){
														
														var form = new Element("form",{
																	action:this.options.table + '/subm/'+this.options.id,
																	id: this.options.table + 'form'+this.options.id,
																	method: 'post',
																	enctype:'multipart/form-data',
																	onsubmit: "return false;"});
														this.data = responce.responseJSON;
														var table = new Element('table',{width:"100%",cellspacing:0,style:"margin:0px;padding:0px;"});
														//var tr = new Element('tr');
														console.log(this.data);
													
														
														var i = 0;
														var el = this.data;	
																this.options.columns.each(function(col){
																	if(i%2==0) var tr = new Element('tr',{style:"background:#efefef;"});
																	else var tr = new Element('tr');
																	var tdTitle = new Element('td',{style:"border:1px #ccc solid;"}).update(col.name);
																	/**Here goes input types switching*/
																	switch(col.type){
																	case "textarea":
																		var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
																									"<textarea name='"+ col.name +"' style='width:100%;height:100%;' id='"+this.options.table + col.name +this.options.id+"'>" + el[col.name] + "</textarea>");
																	break;
																	case "text":
																		var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
																				"<input name='"+ col.name +"' type='text' style='width:100%;height:100%;' " +
																				"id='"+this.options.table + col.name +this.options.id+"' value='" + el[col.name] + "'/>");
																	break;
																	case "file":
																		var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
																				"<input name='"+ col.name +"' type='file' style='width:100%;height:100%;' " +
																				"id='"+this.options.table + col.name +this.options.id+"' value='" + el[col.name] + "'/>" +
																				"<div id='dropfile' style='border:1px #ccc solid;height:200px;' onmouseover='this.style.border=\"1px #000 solid\"'><span>or drop file here(experimental)</span></div>");
																	break; 
																	default:
																		var tdCont = new Element('td',{style:"border:1px #ccc solid;"}).update(
																				"<input name='"+ col.name +"' type='text' style='width:100%;height:100%;' " +
																				"id='"+this.options.table + col.name +this.options.id+"' value='" + el[col.name] + "'/>");
																	break;
																	}
																	tr.insert(tdTitle).insert(tdCont);
																	table.insert(tr);
																}.bind(this));
																var edit = new Element("input", {type:"submit",value:"save"});
																var td = new Element('td',{style:"border:1px #ccc solid;",colspan:2}).update(edit);
																var tr = new Element('tr');
																tr.insert(td);
															table.insert(tr);
															i++;
														//}.bind(this));
														this.table=form.insert(table);
													this.setEditObserver(edit);
													return this.table;
													}.bind(this)
			});
			
		}
		catch(err){
			alert("error in tableObj: getData"+ console.log(err));
		}
	}
	
});

/**Loading box
 * This object was developed to visualize 
 * data transfer and calculation processes.
 */
var loadingBox = Class.create({
	initialize: function(options) {
		try{
			this.createBox();
		}
		catch(err){
			alert('loadingBox: initialize error:' + console.log(err));
		}
	},
	
	container: {},
	
	createBox: function(){
		try{
			var overlay = 	new Element("div",{
										id:		"overlay",
										style:"position:absolute;" +
										"z-index:9998;" +
										"width:100%;" +
										"height:100%;" +
										"background:#000000;" +
										"top:0px;" +
										"left:0px"
									});
			/*var container = new Element("div",{
										id:		"loading",
										style:"position:absolute;" +
												"z-index:9999;" +
												"width:100px;" +
												"height:100px;" +
												"background:#77ccff;" +
												"top:"+(document.viewport.getHeight()/2) + "px;" +
												"left:"+(document.viewport.getWidth()/2 - 50) + "px"
							});*/
			var container = new Element("img",{
				src: "/templates/img/ui/loading.gif",
				id:		"loading",
				style:"position:absolute;" +
						"z-index:9999;" +
						"top:"+(document.viewport.getHeight()/2) + "px;" +
						"left:"+(document.viewport.getWidth()/2 - 25) + "px"
					});
			overlay.setOpacity(0.1);
			//container.setOpacity(0.85);
			overlay.insert(container);
			this.container = overlay;
			document.body.insert(overlay);
			new Effect.Opacity(this.container,{from:0.1,to:0.8,duration:0.5});
		}
		catch(err){
			alert('loadingBox: createBox error:' + console.log(err));
		}
	},
	
	removeBox: function(){
		try{
			document.body.removeChild(this.container);
		}
		catch(err){
			alert('loadingBox: removeBox error:' + console.log(err));
		}
	}
	
});

var cMenu =Class.create({
	
initialize: function(options) {
	try{
		
		this.options = {
	    		element: 'document',
	    		items: []
	    };
	    Object.extend(this.options, options || { });
	    
	    
	    this.options.element.observe("contextmenu",function(e){
    		e.preventDefault();
	    	return false;
	    }.bind(this));
	    
	    this.options.element.observe("mousedown",function(e){
			   
	    	if(!Object.isUndefined($('context'))&&$('context')!=null)$('context').hide();//fade({duration:0.3});
	    	if(e.isRightClick()||e.button==2){
	    		e.stop();
	    		e.stopPropagation();
	    		e.preventDefault();
	    		e.returnValue = false;
	    		this.showContext(e);
	    		return false;
	    	}
	    }.bind(this));
	}
	catch(err){
		alert('loadingBox: initialize error:' + console.log(err));
	}
},
	
	 
	
	
	
showContext: function(e){
	if(!Object.isUndefined($('context'))&&$('context')!=null){
		
		$('context').show();
		$('context').setStyle({
			top:e.pointerY()+'px',
			left:e.pointerX()+'px'
		});
	}
	else{
		var div = new Element("div",{
			id:"context",
			style:"background-color:#F9F9F9;" +
					"width:250px;" +
					"height:100px;" +
					"top:"+e.pointerY()+"px;" +
					"left:"+e.pointerX()+"px;" +
					"position:absolute;" +
					"z-index:999;" +
					"-moz-border-radius:7px;" +
					"-webkit-border-radius:7px;" +
					"-khtml-border-radius:7px;" +
					"padding-top:5px;" 
		});
		var els = [];
		this.options.items.each(function(it){
			var item = new Element("div",
									{style:	"font-size:15px;" +
											"padding:3px 3px 3px 20px;" +
											"height:15px;"});
			item.update(it.text);
			div.insert(item);
			els.push(item);
		}.bind(this));
		document.body.insert(div);
		div.setOpacity(0.9);
		//item.setOpacity(1);
		this.setItemsObserver(els);
	}	
},

setItemsObserver: function(els){
	els.each(function(el,index){
		try{
			
			el.observe("mousedown",function(e){
			/**Calling item's click fuction*/
			try{
				
				this.options.items[index].func();
			}
			catch(err){
				console.log(err);
			}
			/**eof*/
		}.bind(this));
		
		el.observe("mouseover",function(){
			el.setStyle(	"font-size:15px;" +
						"padding:3px 3px 3px 20px;" +
						"height:15px;" +
						"background:#0E37E7;" +
						"background:-moz-linear-gradient(top, #4A6AF5, #0E37E7);" +
						"background:-webkit-gradient(linear, left top, left bottom, from(#4A6AF5), to(#0E37E7));");
		}.bind(this));
		el.observe("mouseout",function(){el.style.background="transparent";}.bind(this));
		}
		catch(err){
			console.log(err);
		}
	}.bind(this));
}

});


var messageCreate = Class.create({
	initialize:function(options){
		this.options = {
			image: "",
			text: "",
			caption:""
		};
	Object.extend(this.options,options);
	this.run();
	},
	
	run: function(){
		this.overlay = this.showOverlay();
		this.messageBox = this.createMessageBox();
		this.overlay.insert(this.messageBox);
		
		document.body.insert(this.overlay);
		new Effect.Opacity(this.messageBox,{from:0,to:1.0,duration:1.1});
		new Effect.Opacity(this.overlay,{from:0,to:0.9,duration:1.0});
		new Draggable(this.messageBox,{starteffect:false,endeffect:false});
		this.setObserver(this.button);
	},
	
	showOverlay: function(){
		var overlay = 	new Element("div",{
			id:		"overlay",
			style:"position:absolute;" +
			"z-index:9999998;" +
			"width:"+document.body.getWidth() +"px;" +
			"height:"+document.body.getHeight() +"px;" +
			"background:#000000;" +
			"top:0px;" +
			"left:0px"
		});
		
		overlay.setOpacity(0.3);
		return overlay;
		
	},
	
	createMessageBox: function(){
		var messageBox = new Element("div",{	id:"messageBoxContainer",
												style:	"position:absolute;" +
														"z-index:9999999;" +
														"top:50%;" +
														"margin-top:-100px;" +
														"left:50%;" +
														"margin-left:-230px;" +
														"background-color:#ededed;" +
														"border:1px #999999 solid;" +
														"-moz-border-radius:9px;" +
														"-webkit-border-radius:9px;" +
														"-o-border-radius:9px;" +
														"-khtml-border-radius:9px;" +
														"width:420px;" +
														"height:160px;" +
														"padding:20px;"});
		var imgContainer = this.createImgContainer();
		var imgElement =  this.createImgElement();
		var textContainer = new Element("div", {style:"float:left;width:300px;margin-left:20px;height:100px;"});
		var cleaner = new Element("div",{style:"height:1px;verflow:hidden;clear:both;"});
		this.button = this.createButton();
		if(imgContainer!=""&&imgElement!="")messageBox.insert(imgContainer.insert(imgElement));
		messageBox.insert(textContainer.insert(this.options.text)).insert(cleaner).insert(this.button);
		return messageBox;
	},
	
	createImgContainer: function(){
		return new Element("div",{style:"float:left;width:80px;text-align:center;height:100px;"});
	},
	
	createImgElement: function(){
		return new Element("img", {src:this.options.image});
	},
	
	createButton: function(){
		var buttonElement = new Element("button",{style:"width:100px;height:24px;" +
			"text-align:center;" +
			"font-size:14px;" +
			"float:right;" +
			"-moz-border-radius:8px;" +
			"-webkit-border-radius:8px;" +
			"-o-border-radius:8px;" +
			"-khtml-border-radius:8px;"});
		buttonElement.update(this.options.caption);
		return buttonElement;
	},
	
	hideMessage:function(){
		this.overlay.fade({
			afterfinish:function(){
							document.body.removeChild(this.overlay);
						}.bind(this)
		});
	},
	
	setObserver: function(element){
		element.observe("click",function(e){
			this.hideMessage();
		}.bind(this));
	}
});


var mobileMessageCreate = Class.create({
	initialize:function(options){
		this.options = {
			text: "",
			captionOk:"",
			captionCancel: "",
			okCallback:Prototype.emptyFunction,
			cancelCallback:Prototype.emptyFunction
		};
	Object.extend(this.options,options);
	this.run();
	},
	
	run: function(){
		this.overlay = this.showOverlay();
		this.messageBox = this.createMessageBox();
		this.overlay.insert(this.messageBox);
		
		document.body.insert(this.overlay);
		//new Effect.Opacity(this.messageBox,{from:0,to:1.0,duration:1.1});
		//new Effect.Opacity(this.overlay,{from:0,to:0.9,duration:1.0});
		new Draggable(this.messageBox,{starteffect:false,endeffect:false});
		this.setObserver(this.button,this.options.okCallback);
		this.setObserver(this.cancelButton,this.options.cancelCallback);
	},
	
	showOverlay: function(){
		var overlay = 	new Element("div",{
			id:		"overlay",
			style:"position:absolute;" +
			"z-index:9999998;" +
			"width:"+document.body.getWidth() +"px;" +
			"height:"+document.body.getHeight() +"px;" +
			"background:transparent;" +
			"top:0px;" +
			"left:0px"
		});
		
		//overlay.setOpacity(0.3);
		return overlay;
		
	},
	
	createMessageBox: function(){
		var messageBox = new Element("div",{	id:"messageBoxContainer",
												style:	"position:absolute;" +
														"z-index:9999999;" +
														"top:50%;" +
														"margin-top:-100px;" +
														"left:50%;" +
														"margin-left:-230px;" +
														"background-color:#000;" +
														"border:4px #ddd solid;" +
														"-moz-border-radius:15px;" +
														"-webkit-border-radius:15px;" +
														"-o-border-radius:15px;" +
														"-khtml-border-radius:15px;" +
														"-webkit-box-shadow: #333 0px 4px 5px;" +
														"width:420px;" +
														"height:160px;" +
														"padding:20px;" +
														"padding-left:0px;" +
														"opacity:0.8;"});
		

		var textContainer = new Element("div", {style:"float:left;width:300px;margin-left:60px;height:100px;color:#ddd;font-size:22px;"});
		var cleaner = new Element("div",{style:"height:1px;verflow:hidden;clear:both;"});
		this.cancelButton = this.createButton(this.options.captionCancel);
		this.button = this.createButton(this.options.captionOk);
		
		messageBox.insert(textContainer.insert(this.options.text)).insert(cleaner).insert(this.button).insert(this.cancelButton);
		return messageBox;
	},
	
	createButton: function(capt){
		var buttonElement = new Element("button",{style:"width:150px;height:40px;" +
			"text-align:center;" +
			"font-size:14px;" +
			"margin-left:20px;" +
			"color:#ccc;" +
			"-moz-border-radius:10px;" +
			"-webkit-border-radius:10px;" +
			"-o-border-radius:10px;" +
			"-khtml-border-radius:10px;" +
			"background:-webkit-gradient(linear, center top, center bottom, from(#333), to(#000)) repeat scroll 0 0 #000"});
		buttonElement.update(capt);
		return buttonElement;
	},
	
	hideMessage:function(){
		this.overlay.fade({
			afterfinish:function(){
							document.body.removeChild(this.overlay);
						}.bind(this)
		});
	},
	
	setObserver: function(element,callback){
		element.observe("click",function(e){
			this.hideMessage();
			callback();
		}.bind(this));
	}
});

var askUserCreate = Class.create(messageCreate,{
	initialize:function(options){
		this.options = {
			image: "",
			text: "",
			caption:""
		};
	Object.extend(this.options,options);
	this.run();
	},
	
	run: function(){
		this.options.text = this.options.text + '<br/><input type="text" id="askUserCreateInput" ' +
												'name="askUserCreateInput" '+
												'style="width:100%;-webkit-user-select:text;"/>';
		this.overlay = this.showOverlay();
		this.messageBox = this.createMessageBox();
		this.overlay.insert(this.messageBox);
		
		document.body.insert(this.overlay);
		new Effect.Opacity(this.messageBox,{from:0,to:1.0,duration:1.1});
		new Effect.Opacity(this.overlay,{from:0,to:0.9,duration:1.0});
		new Draggable(this.messageBox,{starteffect:false,endeffect:false});
		this.setObserver(this.button);
	},
	
	createImgContainer: function(){
		return "";
	},
	
	createImgElement: function(){
		return "";
	}
});