var Site = {
	init: function(){
		$('body').setStyles({width:window.getScrollWidth()*100+'px',height:window.getScrollHeight()-200+'px'});
		Site.build();
		Site.update.periodical(10*1000);
		new Tips($$('a'),{offsets:{x:20,y:-10},showDelay:300,maxTitleChars:0,onShow:function(tip){tip.setOpacity(0.6)}});
	},
	build: function(){
		$('add').onclick = Site.add.bindWithEvent($('add'));
		$('delete').onclick = Site.remove.bindWithEvent($('delete'));
		$('font').onclick = Site.font.selecter.bindWithEvent($('font'));
		$('fontSize').onclick = Site.font.size.bindWithEvent($('fontSize'));
		$('color').onclick = Site.color.bindWithEvent($('color'));
		$('move').onclick = Site.move.drag.bindWithEvent($('move'));
		$('front').onclick = Site.move.forwards.bindWithEvent($('front'));
		$('zoomin').onclick = Site.zoom.ins.bindWithEvent($('zoomin'));
		$('zoomout').onclick = Site.zoom.out.bindWithEvent($('zoomout'));
	},
	stop: function(caller){
		switch(caller.id){
			case 'fontSize': if(fSelector != null){fSelector.remove();fSelector=null;} if(move != null){Site.move.clean.drag();move=null;} if(forwards != null){Site.move.clean.forwards();forwards=null;}if(colorPicker != null){colorPicker.remove();colorPicker=null;} break;
			case 'font': if(fSize != null){fSize.remove();fSize=null;} if(move != null){Site.move.clean.drag();move=null;} if(forwards != null){Site.move.clean.forwards();forwards=null;}if(colorPicker != null){colorPicker.remove();colorPicker=null;} break;
			case 'move': if(fSelector != null){fSelector.remove();fSelector=null;}if(fSize != null){fSize.remove();fSize=null;} if(forwards != null){Site.move.clean.forwards();forwards=null;}if(colorPicker != null){colorPicker.remove();colorPicker=null;} break;
			case 'front': if(fSelector != null){fSelector.remove();fSelector=null;}if(fSize != null){fSize.remove();fSize=null;} if(move != null){Site.move.clean.drag();move=null;}if(colorPicker != null){colorPicker.remove();colorPicker=null;} break;
			case 'color': if(fSelector != null){fSelector.remove();fSelector=null;}if(fSize != null){fSize.remove();fSize=null;} if(move != null){Site.move.clean.drag();move=null;}if(forwards != null){Site.move.clean.forwards();forwards=null;} break;
			case 'delete': if(fSelector != null){fSelector.remove();fSelector=null;}if(fSize != null){fSize.remove();fSize=null;} if(move != null){Site.move.clean.drag();move=null;}if(forwards != null){Site.move.clean.forwards();forwards=null;}if(colorPicker != null){colorPicker.remove();colorPicker=null;} break;
		}
	},
	update: function(){
		if((iEdit == null) && (colorPicker == null) && (fSelector == null) && (fSize == null) && (move == null) && (forwards == null)){
			var present = [];
			$$('p').each(function(el){
				var number = el.id.replace(/graf_/gi,'');
				present.push(number);
			});
			new Ajax('update.php',{method:'post',postBody:'numbers='+present,onComplete: function(text,xml){
					document.body.innerHTML += text;
					Site.build();
				}
			}).request();
		}
	},
	color:function(){
		Site.stop(this);
		colorPicker = new Picker($$('p'),{img: 'style/color.png',onComplete:function(el,col){
				el.setStyle('color',col);
				colorPicker.remove();
				colorPicker = null;
				var number = el.id.replace(/graf_/gi,'');
				new Ajax('edit.php',{method:'post',postBody:'type=color&number='+number+'&value='+el.getStyle('color')}).request();
			}
		});
	},
	zoom:{
		ins: function(){
			$$('p').each(function(el){
				el.effect('font-size',{unit:'%',transition:Fx.Transitions.bounceOut}).start((el.getStyle('font-Size').toInt()+100)+'%');
			});
		},
		out: function(){
			$$('p').each(function(el){
				el.effect('font-size',{unit:'%',transition:Fx.Transitions.bounceOut}).start((el.getStyle('font-Size').toInt()-100)+'%');
			});
		}
	},
	graffittiZ: 0,
	add: function(){
		document.body.addEvent('mousedown',function(event){
			Site.graffittiZ++;
			if(!window.ie){
				graffitti = new Element('p').setStyles('position:absolute;z-index:'+Site.graffittiZ+';font-size:180%;left:'+event.pageX+'px;top:'+event.pageY+'px;').setHTML('new graffiti').injectInside(document.body);
			} else{
				graffitti = new Element('p').setStyles('position:absolute;z-index:'+Site.graffittiZ+';font-size:180%;left:'+event.clientX+'px;top:'+event.clientY+'px;').setHTML('new graffiti').injectInside(document.body);
			}
			iEdit = new inlineEdit(graffitti,{onComplete:function(el,oldContent,newContent){
					if(newContent != ''){
						new Ajax('save.php',{method:'post',postBody:'text='+newContent+'&font='+el.getStyle('font-family')+'&left='+el.getStyle('left').toInt()+'&top='+el.getStyle('top').toInt()+'&fontSize='+el.getStyle('font-size').toInt()+'&color='+el.getStyle('color')+'&zIndex='+el.getStyle('z-index'), onComplete: function(text,xml){el.setProperty('id','graf_'+text);}
						}).request();
					}
					iEdit = null;
				}
			});
			document.body.removeEvents('mousedown');
		}.bind(this));
		
	},
	remove: function(){
		Site.stop(this);
		$$('p').each(function(el){
			el.addEvent('click', function(){
				var number = el.id.replace(/graf_/gi,'');
				new Ajax('edit.php',{method:'post',postBody:'type=delete&number='+number}).request();
				el.remove();
				$$('p').each(function(el2){el2.removeEvents('click');});
			});
		});
	},		
	font:{
		selecter: function(){
			Site.stop(this);
			fSelector = new fontSelector($$('p'),{fontList:['Arial','Century Gothic','Georgia','Verdana','Times new roman','Tahoma','Trebuchet'], onSelect: function(el){
					var number = el.id.replace(/graf_/gi,'');
					new Ajax('edit.php',{method:'post',postBody:'type=font&number='+number+'&value='+el.getStyle('font-family')}).request();
				}.bind(this)
			});
		},
		size: function(){
			Site.stop(this);
			fSize = new fontSizer($$('p'),{onSelect: function(el){
					var number = el.id.replace(/graf_/gi,'');
					new Ajax('edit.php',{method:'post',postBody:'type=fontSize&number='+number+'&value='+el.getStyle('font-size').toInt()}).request();
				}.bind(this)
			});
		}
	},
	move:{
		drag:function(){
			Site.stop(this);
			move = 'active';
			$$('p').each(function(el){
				el.setStyle('cursor','move');
				el.makeDraggable({onComplete: function(el){
						var number = el.id.replace(/graf_/gi,'');
						new Ajax('edit.php',{method:'post',postBody:'type=move&number='+number+'&top='+el.getStyle('top').toInt()+'&left='+el.getStyle('left').toInt()}).request();
					}.bind(this)
				});
			});
		},
		clean: {
			drag:function(){
				$$('p').each(function(el2){
					el2.setStyle('cursor','');
					el2.replaceWith(el2.clone());
				});
			},
			forwards:function(){
				$$('p').each(function(el2){
					el2.removeEvents('click');
				});
			}
		},
		forwards:function(){
			Site.stop(this);
			$$('p').each(function(el){
				el.addEvent('click',function(){
					Site.graffittiZ++;
					el.setStyle('z-index',Site.graffittiZ);
					Site.move.clean.forwards();
					forwards = null;
					var number = el.id.replace(/graf_/gi,'');
					new Ajax('edit.php',{method:'post',postBody:'type=front&number='+number+'&value='+el.getStyle('z-index')}).request();
				}.bind(this));
			});
			forwards = 'active';
		}
	}
};
var fSize;
var fSelector;
var move;
var iEdit;
var forwards;
var colorPicker;
window.onDomReady(Site.init);