var Moodal = new Class({
	initialize: function() {
		
	},
	openWindow : function(url, noopac) {
		this.url = url;
		this.noopac = noopac;
		if (this.removeWindow())
			this.createWindow.delay(270, this);
		else
			this.createWindow();
		return false;
	},
	removeWindow : function () {
		if (this.win) {
			var chng = new Chain();
			chng.chain(function() {
				this.win.fxclose.start(0.9, 0);
			}.bind(this));
			chng.chain(function() {
				if (this.win)
					this.win.destroy();
				this.win = null;
			}.bind(this));
			
			chng.callChain();
			chng.callChain.delay(260, chng);
			return true;
		}
		return false;
	},
	createWindow : function() {
		var chng = new Chain();
		chng.chain(function() {
			
			this.win = new Element('div', {'class' : 'moodal'});
			this.win.fxclose = new Fx.Tween(this.win, {duration:250, property: 'opacity'});		
			this.win.fxclose.set(0);
			this.win.inject(document.body);
			var c1 = $('tanx-playlist').getCoordinates();
			var c2 = this.win.getCoordinates();
			this.win.setStyle('left', c1.left-c2.width-30);
			this.win.setStyle('top', c1.top-20);
			
			var lding = new Element('div', {'class' : 'ajax-loading'});
			lding.inject(this.win);
			lding.set('text', $('txtLoading').get('text'));
		
			var destop = this.noopac ? 1 : 0.9;
			this.win.fxclose.start(0, destop);
		
		}.bind(this));
		chng.chain(function() {
			this.win.drag = new Drag.Move(this.win, {container : document.body.getElement('div.lay-top')});
			this.loadContents();
		}.bind(this));
		
		chng.callChain();
		chng.callChain.delay(260, chng);
	},
	loadContents : function () {
		this.req = new Request.HTML({
			url: this.url,
			async: true,
			onComplete : function(tree, elements, html, js) {
			this.win.getFirst().destroy();
				elements[0].inject(this.win);
				this.startContents();
			}.bind(this)
		});
		this.req.send(this.url);
	},
	galleryImage : function(e) {
		var fi = $('fullimage');
		var img = $(fi.firstChild);
		var icor = img.getCoordinates();
		this.win.setStyle('width', icor.width);
		this.win.setStyle('height', icor.height);
		img.setStyle('opacity', 1);
		img.addEvent('click', function(e) {
			var img = $(fi.firstChild);
			if ($('arrleft').hasClass('active')) {
				if (img.get('hprev') == '1') {
					this.url = 'image.php?load=prev'; 
					this.loadContents();
				}
			}
			if ($('arrright').hasClass('active')) {
				if (img.get('hnext') == '1') {
					this.url = 'image.php?load=next'; 
					this.loadContents();
				}
			}
		}.bind(this));
		img.addEvent('mousedown', function(e){
			e.stop();
		});
		img.addEvent('mousemove', function(e) {
			var img = $(e.target);
			if (!img.hasArrows) {
				var imgc = img.getCoordinates();
				var closer = new Element('div', {'id' : 'imgclose'});
				closer.appendText('X');
				closer.inject(fi);
				closer.addEvent('click', this.removeWindow.bind(this));
				closer.setStyle('left', imgc.width-15);
				closer.setStyle('top', -imgc.height-3);
				
				var l = new Element('div', {'id':'arrleft'});
				l.inject(fi);
				l.setStyle('top', -imgc.height/2-13)
				var r = new Element('div', {'id':'arrright'});
				r.inject(fi);
				r.setStyle('left', imgc.width-17);
				r.setStyle('top', -imgc.height/2-26)
				
				img.hasArrows = true;
			}
			
			var cx = e.client.x;
			var cy = e.client.y;
			var ic = img.getCoordinates();
			cx = cx-ic.left;
			cy = cx-ic.top;
			
			var lf = $('arrleft');
			var rg = $('arrright');
			if (cx < ic.width/2) {
				rg.removeClass('active');
				if (img.get('hprev')=='1' && !(lf.hasClass('active'))) lf.addClass('active');
			} else {
				lf.removeClass('active');
				if (img.get('hnext')=='1' && !rg.hasClass('active')) rg.addClass('active');
				
			}
			
		}.bind(this));
		img.addEvent('mouseleave', function(e) {
			var fi = $('fullimage');
			if ($(e.relatedTarget).getParent('#fullimage')) return;
			$('arrleft').destroy(); $('arrright').destroy(); $('imgclose').destroy();
			img.hasArrows = false;
		});
	},
	startContents : function() {
		var top = this.win.getFirst();
		
		var pcloser = top.getElement('div.popup-close');
		if (pcloser) {
			pcloser.addEvent('click', this.removeWindow.bind(this));
		}
		
		var fi = $('fullimage');
		if (fi) {
			var img = $(fi.firstChild);
			if (!img.complete)
				img.addEvent('load', this.galleryImage.bind(this));
			else
				this.galleryImage(null);
			return;
		}
		// open/close form
		this.rateform = $('ratetab');
		if (this.rateform) {
			this.rateopen = this.rateform.getElement('div.ropener');
			this.rateform = this.rateform.getElement('div.rform');
			if (this.rateform) {
				
				this.rateform.calcHeight = this.rateform.getCoordinates().height;
				this.rateopen.calcHeight = this.rateopen.getCoordinates().height;
				this.rateopen.fx = new Fx.Tween(this.rateopen, {duration:350, property: 'height'});
				this.rateform.fx = new Fx.Tween(this.rateform, {duration:350, property: 'height'});
				
				this.rateform.setStyle('height', 0);
				this.rateopen.addEvent('click', function(e) {
					this.rateopen.fx.start(this.rateopen.calcHeight, 0);
					this.rateform.fx.start(0, this.rateform.calcHeight);
					this.rateopen.setStyle('border-width', 0);
				}.bind(this));
				$('ratetab').getElement('div.fr_button.cancel').addEvent('click', function (e) {
					this.rateopen.fx.start(0, this.rateopen.calcHeight);
					this.rateform.fx.start(this.rateform.calcHeight, 0);
					this.rateopen.setStyle('border-width', 1);
				}.bind(this));
			}
			
			// form submit
			var butsend = $('ratetab').getElement('div.fr_button.send');
	
			if (butsend)
			butsend.addEvent('click', function (e) {
				var nick = $('fr_nickname');
				var rate = $('fr_ratebox');
				var msg = $('fr_message');
				var err = false;
				
				if (nick.value == "") {
					if (nick.errFx == null)
						nick.errFx = new Fx.Tween(nick, {duration:600, property: 'background-color'});
					nick.errFx.start('#ff0000', '#ffffff');
					err = true;
				}
				if (rate.get('wx-rate') == null) {
					if (rate.errFx == null)
						rate.errFx = new Fx.Tween(rate, {duration:600, property: 'background-color'});
					rate.errFx.start('#ff0000', '#ffffff');
					err = true;			
				}
				if (!err) {
					var req = new Request.HTML({
						url: this.url,
						method: 'post',
						onComplete : function(tree, elements, html, js) {
							this.win.getFirst().destroy();
							elements[0].inject(this.win);
							this.startContents();
						}.bind(this)
					});
					req.send({
						url: this.url,
						data: {
							'nick' : nick.value,
							'rate' : rate.get('wx-rate'),
							'msg' : msg.value
						}
					});
				}
				
				
			}.bind(this));
	
	
			tanx.calculateLayout();
			var rpan = $('ratepanel');
			if (rpan.getScrollSize().y > rpan.getCoordinates().height) {
				var rscr = $('ratescroll');
				new Slider(rscr, rscr.getFirst(), {
					range: [0, 100],
					onChange: function(value){
						var par = this.options.panel;
						var y = Math.round((par.getScrollSize().y-par.getSize().y)/100*value);
						par.scrollTo(0, y);
					},
					mode: 'vertical',
					panel: rpan
				});
			} else {
				$('ratescroll').addClass('hidden');
			}
			var rpan = $('lyrpanel');
			if (rpan) {
				if (rpan.getScrollSize().y > rpan.getCoordinates().height) {
					var rscr = $('lyrscroll');
					new Slider(rscr, rscr.getFirst(), {
						range: [0, 100],
						onChange: function(value){
							var par = this.options.panel;
							var y = Math.round((par.getScrollSize().y-par.getSize().y)/100*value);
							par.scrollTo(0, y);
						},
						mode: 'vertical',
						panel: rpan
					});
				} else {
					$('lyrscroll').addClass('hidden');
				}
			}
			
			
			
			
			
			top.getElements('div.tab').each(function (tab) {
				var tabbody = $(tab.get('wxtab'));
				if (!tab.hasClass('sel'))
					tabbody.setStyle('display', 'none');
				tab.addEvent('click', function(e) {
					this.switchTab(e);
				}.bind(this));
			}.bind(this));
	
			top.getElement('div.sinfo-body').addEvents({
				'mouseenter' : function(e) { this.win.drag.detach(); }.bind(this),
				'mouseleave' : function(e) { this.win.drag.attach(); }.bind(this)
			});
	
			top.getElements('div.rate').each(function (element) {
				element.addEvent('mouseover', function(e) {
					var stars = element.getParent().getElements('div.rate');
					for (var i = 0; i < stars.length; i++) {
						if (!stars[i].hasClass('hover'))
							stars[i].addClass('hover');
						if (stars[i] == element)
								break;
					}
				}.bind(element));
				element.addEvent('mouseout', function(e) {
					var stars = element.getParent().getElements('div.rate');
					for (var i = 0; i < stars.length; i++) {
						if (stars[i].hasClass('hover'))
							stars[i].removeClass('hover');
					}
				}.bind(element));
				element.addEvent('click', function(e) {
					var prev = element.getParent().getElement('.sel');
					if (prev)
						prev.removeClass('sel');
					element.addClass('sel');
					
					var rate = element.get('class').substring(6,7);
					element.getParent().set('wx-rate', rate);
				}.bind(element));
			});
			
			top.getElement('div.songclose').addEvent('click', function (event) {
				this.removeWindow();
			}.bind(this));
		}
	},
	switchTab : function(e) {
		if (e.target.hasClass('sel')) return;
		this.win.getElements('div.tab').each(function (tab2) {
			if (tab2 == this) {
				this.addClass('sel');
				$(tab2.get('wxtab')).setStyle('display', 'block');
			} else if (tab2.hasClass('sel')) {
				tab2.removeClass('sel');
				$(tab2.get('wxtab')).setStyle('display', 'none');
			}
		}.bind(e.target));
	}
});