var Site = {
	init: function(){
		$('toolbox').makeDraggable({handle:$E('h2',$('toolbox'))});
		$('notifier').setOpacity(0);
		Site.eCoords = $('editArea').getCoordinates();
		addTextSlide =$('addText').getNext().effect('height');
		Site.save.build();
		$('save').addEvent('click',Site.save.open);
		
		//addText Slide Effect
		$('addText').addEvent('click',function(){
			if($('addText').getNext().offsetHeight > 0){
				addTextSlide.start(0);
			} else{
				addTextSlide.start(35);
			}
		});
		$('hButton').draggableTag($('editArea'));
		$('mButton').draggableTag($('editArea'));
		
		//Fancy Uploader
		var inputElement = $E('input[type="file"]');
		fUpload = new FancyUpload(inputElement,{swf:'js/Swiff.Uploader.swf',container:$('toolbox'),instantStart:true,createReplacement:function(element){
					new Element('a', {'events': {'click': fUpload.browse.bind(fUpload)}}).addClass('uploadButton').setHTML('<span class="x">upload an image</span>').injectBefore(element);
					element.remove();
			},
			onComplete:function(name,size,el){
				el.setProperty('title','http://'+window.location.host+'/scrapbook/upload/'+name.replace(/ /gi,'_')).draggableImage($('editArea')).addClass('available');
				notifier.write('Ding Ding!<br />Your picture has been uploaded, just drag it to the canvas to put it into action.');
			}
		});
		
		//editArea Dropping Stuffz
		$('editArea').addEvents({
			'over': function(el){
			},
			'leave': function(el){
			},
			'drop': function(el, drag){
				var pos = {x:drag.element.getLeft()-this.getLeft(),y:drag.element.getTop()-this.getTop()};
				
				//IMAGES
				if(el.getTag() == 'img'){
					var image = new Asset.image(el.src).setStyles({position:'absolute',top:pos.y+'px',left:pos.x+'px',zIndex:Site.gZ}).injectInside(this);
					Site.buildDragging(image);
					Site.selection.show(image);
					Site.gZ ++;
					notifier.write('Now that you&rsquo;ve Added an image, move it around to where you want it.<br /> <b>Double Click it to Crop it</b>.');
				}
				
				//HEADING
				if(el.rel == 'h1'){
					new Element('h1').setStyles({position:'absolute',top:pos.y+'px',left:pos.x+'px',zIndex:Site.gZ}).injectInside(this).editText();
					Site.gZ++;
					notifier.write('Now Type some text.<br/> press enter or click anywhere once your finished.');
				}
				
				//HEADING
				if(el.rel == 'p'){
					new Element('p').setStyles({position:'absolute',top:pos.y+'px',left:pos.x+'px',zIndex:Site.gZ}).injectInside(this).editText('textarea');
					Site.gZ++;
					notifier.write('Now Type some text.<br/> press enter or click anywhere once your finished.');
				}
			}
		});
		Site.keybinding();
	},
	buildDragging: function(el){
		el.setStyle('cursor','move').makeDraggable({limit: {
				x: [0, Site.eCoords.width-el.getStyle('width').toInt()-2], 
				y: [0, Site.eCoords.height-el.getStyle('height').toInt()-2]
			}
		});
	},
	save: {
		build: function(){
			overlay = new Element('div').setStyles('position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;cursor.pointer;z-index:3000').setOpacity(0);
			center = new Element('div').setStyles('position:absolute;left:50%;top:100px;width:500px;background:#fff;border:1px solid #999;z-index:3001').setOpacity(0);
		},
		open: function(){
			overlay.injectInside(document.body).addEvent('click',Site.save.close);
			Site.selection.hide();
			new Ajax('makePage.php',{method:'post',data:'html='+$('editArea').innerHTML,onComplete:function(text,xml){
					center.setHTML('<a href="'+text+'">Check out your page!</a>').injectInside(document.body);
				}
			}).request();
			overlay.effect('opacity').start(0.7).chain(function(){
				center.effect('opacity').start(1);
				center.setStyles({'margin-left': (-center.offsetWidth/2)-1+'px'});
			});
		},
		close: function(){
			center.effect('opacity').start(0).chain(function(){
				overlay.effect('opacity').start(0).chain(function(){
					overlay.remove();
				});
				center.remove();
			});
		}
	},		
	gZ: 1,
	eCoords: {},
	selection:{
		current: [],
		color: [],
		clipboard: [],
		show: function(el){
			if(!window.ie)Site.selection.color.push(el.getStyle('border'));
			el.setStyles({'border':'1px solid #0099ff','margin':'-1px 0 0 -1px'});
			if(el.getTag() == 'img'){
				el.addEvents({
					'wheelup': function(e){
						e = new Event(e).stop();
						this.setStyles({width:this.getStyle('width').toInt()*1.1+'px',height:this.getStyle('height').toInt()*1.1+'px'});
						(function(){Site.buildDragging(this);}).delay(300,this);
					},
					'wheeldown': function(e){
						e = new Event(e).stop();
						if (this.getStyle('width').toInt()-30 >= 30) {
							this.setStyles({width:this.getStyle('width').toInt()/1.1+'px',height:this.getStyle('height').toInt()/1.1+'px'});
							(function(){Site.buildDragging(this);}).delay(300,this);
						}
					}
				})
			}
			Site.selection.current.push(el);
		},
		hide: function(){
			Site.selection.current.each(function(el){
				if(window.ie){
					el.setStyles({'border':'','margin':'0'});
				} else{
					el.setStyles({'border':Site.selection.color[0],'margin':'0'});
				}
				if(el.getTag() == 'img'){
					el.removeEvents('wheelup').removeEvents('wheeldown');
				}
				Site.selection.color.shift();
			});
			Site.selection.current = [];
		}
	},
	keybinding: function(){
		//select
		$('editArea').addEvent('click',function(event){
			var event = new Event(event);
			if(event.target.hasClass('htmlCover')){
				event.target = event.target.getParent();
			}
			if(event.target.getTag() == 'img'){
				notifier.write('<b>Check this out!</b><br />Use the scroll wheel on your image to make it bigger or smaller.');
			}
			//console.log(event.target);
			if((event.control || event.shift) && event.target.getParent().id == 'editArea'){
				Site.selection.show(event.target);
			}else{
				Site.selection.hide();
				if(event.target.getParent().id == 'editArea'){
					Site.selection.show(event.target);
				}
			}
		});
		
		//edit
		$('editArea').addEvent('dblclick',function(event){
			var event = new Event(event);
			if(event.target.hasClass('htmlCover')){
				event.target = event.target.getParent();
			}
			//console.log(event.target);
			if(event.target.getTag() == 'img'){
				event.target.editImg();
			}
			if(event.target.getTag() == 'h1'){
				event.target.editText();
			}
			if(event.target.getTag() == 'p'){
				event.target.editText('textarea');
			}
			if(event.target.getTag() == 'div'){
				event.target.editHTML();
			}
		});
		
		
		document.addEvent('keydown',function(event){
			var event = new Event(event);
			if(event.key == 'delete'){
				Site.selection.current.each(function(el){
					el.remove();
				});
				Site.selection.hide();
			}
			
			if(event.key == 'a' && event.control){
				event.stop();
				Site.selection.hide();
				$('editArea').getChildren().each(function(el){
					Site.selection.show(el);
				});
			}
			
			if(event.key == 'c' && event.control){
				var i=0;
				Site.selection.clipboard = [];
				Site.selection.current.each(function(el){
					if(window.ie){
						Site.selection.clipboard.push(el.clone().setStyle('border',''));
					}else{
						Site.selection.clipboard.push(el.clone().setStyle('border',Site.selection.color[i]));
					}
					i++
				});
			}
			
			if(event.key == 'x' && event.control){
				var i=0;
				Site.selection.clipboard = [];
				Site.selection.current.each(function(el){
					if(window.ie){
						Site.selection.clipboard.push(el.clone().setStyle('border',''));
					}else{
						Site.selection.clipboard.push(el.clone().setStyle('border',Site.selection.color[i]));
					}
					i++
					el.remove();
				});
			}
			
			if(event.key == 'v' && event.control){
				Site.selection.hide();
				Site.selection.clipboard.each(function(el){
					el.injectInside($('editArea'));
					Site.buildDragging(el);
					Site.selection.show(el);
				});
			}
			
			if(event.key == 'f' && event.control){
				event.stop();
				Site.selection.current.each(function(el){
					el.setStyle('z-index',Site.gZ);
					Site.gZ++;
				});
			}
			if(event.key == 'b' && event.control){
				event.stop();
				Site.selection.current.each(function(el){
					el.setStyle('z-index','0');
				});
			}
			
			if(event.key == 'left'){
				event.stop();
				Site.selection.current.each(function(el){
					if(event.shift){el.setStyle('left',el.getLeft()-Site.eCoords.left-9+'px');}
					el.setStyle('left',el.getLeft()-Site.eCoords.left+'px');
					Site.checkLimit();
				});
			}
			if(event.key == 'right'){
				event.stop();
				Site.selection.current.each(function(el){
					if(event.shift){el.setStyle('left',el.getLeft()-Site.eCoords.left+9+'px');}
					el.setStyle('left',el.getLeft()-Site.eCoords.left+2+'px');
					Site.checkLimit();
				});
			}
			if(event.key == 'up'){
				event.stop();
				Site.selection.current.each(function(el){
					if(event.shift){el.setStyle('top',el.getTop()-Site.eCoords.top-9+'px');}
					el.setStyle('top',el.getTop()-Site.eCoords.top+'px');
					Site.checkLimit();
				});
			}
			if(event.key == 'down'){
				event.stop();
				Site.selection.current.each(function(el){
					if(event.shift)el.setStyle('top',el.getTop()-Site.eCoords.top+9+'px');
					el.setStyle('top',el.getTop()-Site.eCoords.top+2+'px');
					Site.checkLimit();
				});
			}
					
		});
	},
	checkLimit: function(){
		Site.selection.current.each(function(el){
			var coords = el.getCoordinates();
			if(coords.top <= Site.eCoords.top){
				el.setStyle('top',0+'px');
			}
			if(coords.bottom >= Site.eCoords.bottom){
				el.setStyle('top',Site.eCoords.height-coords.height+'px');
			}
			if(coords.left <= Site.eCoords.left){
				el.setStyle('left',0+'px');
			}
			if(coords.right >= Site.eCoords.right){
				el.setStyle('left',Site.eCoords.width-coords.width+'px');
			}
		});
	}
}

var notifier = {
	fader: null,
	write:function(text){
		$('notifier').setHTML(text);
		if(notifier.fader == null){notifier.fader = $('notifier').effect('opacity',{duration:500,wait:false});}
		(function(){
			notifier.fader.clearTimer();
			notifier.fader.start(0.8);
			(function(){notifier.fader.start(0);}).delay(6000);
		}).delay(500);
	}
}
		



/*Thanks digitarald for the drag and drop ghost model*/
Element.extend({
draggableImage: function(droppables, handle) {
handle = handle || this;
this.makeDraggable({
	'handle': handle,
	'droppables': droppables,
	'onStart': function() {
		this.elementOrg = this.element;
		var now = {'x': this.element.getLeft(), 'y': this.element.getTop()};
		this.element = new Asset.image(this.elementOrg.title).setStyles({
			'position': 'absolute',
			'left': now.x + 'px',
			'z-index': Site.gZ,
			'top':  now.y + 'px',
			'opacity': '0.75'
		}).injectInside(document.body);
		this.value.now = now;
	},
	'onComplete': function() {
		(function(){
		this.element.remove();
		this.element = this.elementOrg;
		this.elementOrg = null;
		}.bind(this)).delay(300);
	}
});
this.setStyles({
	'position': ''
});
return this;
}
});

/*Thanks digitarald for the drag and drop ghost model*/
Element.extend({
draggableTag: function(droppables, handle) {
handle = handle || this;
this.makeDraggable({
	'handle': handle,
	'droppables': droppables,
	'onStart': function() {
		this.elementOrg = this.element;
		var now = {'x': this.element.getLeft(), 'y': this.element.getTop()};
		this.element = this.element.clone().setStyles({
			'position': 'absolute',
			'z-index': Site.gZ,
			'left': now.x + 'px',
			'top':  now.y + 'px',
			'opacity': '0.75'
		}).injectInside(document.body);
		this.value.now = now;
	},
	'onComplete': function() {
		(function(){
		this.element.remove();
		this.element = this.elementOrg;
		this.elementOrg = null;
		}.bind(this)).delay(300);
	}
});
this.setStyles({
	'position': ''
});
return this;
}
});

Element.extend({
	editText: function(type) {
		var btype = type || 'input';
		this.inlineEdit({type:btype,onComplete:function(el,o,n){
				if(n == ''){
					notifier.write('Change your mind?');
					Site.selection.hide();
					el.remove();
				} else{
					notifier.write('Great! now select a font size, and font type.');
					el.editFont({onComplete:function(el){
							notifier.write('Yay, all done!<br />Now feel free to move it around using the keys or mouse.');
							Site.selection.hide();
							el = el.replaceWith(el.clone());
							Site.buildDragging(el);
							Site.selection.show(el);
						}
					});
				}
			}
		});
	},
	editImg: function(){
		notifier.write('Editting images is simple.<br />type in a width and height (if you want to crop it click the crop button).<br/><b>Click close when your done.</b>');
		this.editImage({onComplete:function(el){
				notifier.write('Yay, all done!<br />Now feel free to move it around using the keys or mouse.');
				Site.selection.hide();
				el = el.replaceWith(el.clone());
				Site.buildDragging(el);
				Site.selection.show(el);
			}
		});
	},
	editHTML: function(){
		if($E('div.htmlCover',this)){
			$E('div.htmlCover',this).remove();
		}
		this.editSrc({onComplete:function(el,n){
				if(el.innerHTML.trim() == ''){
					Site.selection.hide();
					el.remove();
				} else{
					Site.selection.hide();
					el = el.replaceWith(el.clone());
					new Element('div').setStyles('background:#fff;top:0;left:0;width:100%;height:100%;margin:0;padding:0;position:absolute;z-index:999').setOpacity(0.1).addClass('htmlCover').injectInside(el)
					Site.buildDragging(el);
					Site.selection.show(el);
				}
			}
		});
	}
});

Element.Events.extend({
	'wheelup': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel >= 0) this.fireEvent('wheelup', event)
		}
	},
 
	'wheeldown': {
		type: Element.Events.mousewheel.type,
		map: function(event){
			event = new Event(event);
			if (event.wheel <= 0) this.fireEvent('wheeldown', event)
		}
	}
});

window.onDomReady(Site.init);