var Popup = new Class({
	initialize: function(options){
		this.setOptions(options);
		this.popupclass = (this.options.type == 'error')?'popuperror':'popup';
		this.id = "popup_"+Math.floor(Math.random()*100);
		this.popup_container = "popup_container_"+Math.floor(Math.random()*100);
		this.popup_id = "popup_window_"+Math.floor(Math.random()*100);
		this.content = "popup_content_"+Math.floor(Math.random()*100);
		this.buttons = "popup_buttons_"+Math.floor(Math.random()*100);
		this.html = '<div class="popup"><div class="'+this.popupclass+'_header">'+this.options.title+'</div><div class="'+this.popupclass+'_body" id="'+this.content+'"></div><div class="'+this.popupclass+'_divider"></div><div class="'+this.popupclass+'_buttons" id="'+this.buttons+'"></div><div class="'+this.popupclass+'_footer"></div></div>';
		
		if($(document.body).getElement('.popup_container')){
			$(document.body).getElement('.popup_container').destroy();
		}
		
		this.popup_container = new Element('div', {
			'class':'popup_container',
			'id': this.popup_container
		}).inject($(document.body), 'top');
		this.popup_container.setStyles({
			'margin-left': '0',
			'margin-top': '0',
			'position': 'absolute',
			'top': 0,
			'left': 0,
			'display': 'block',
			'height': $(document.window).getScrollHeight(),
			'width': '100%',
			'opacity': 0,
			'z-index': this.options.z_index
		});
		
		this.mask = new Element('div', {
			'class':'popup_mask',
			'id': this.id
		}).inject($(this.popup_container), 'top');
		this.mask.setStyles({
			'margin-left': '0',
			'margin-top': '0',
			'display': 'block',
			'background-color': '#000',
			'height': $(document.window).getScrollHeight(),
			'width': '100%',
			'opacity': this.options.opacity
		});
		
		this.popup_window = new Element('div', {
			'class': 'popup_window',
			'id': this.popup_id
		}).inject($(this.id), 'after');
		
		this.popup_window.innerHTML = this.html;

		this.btn_cancel = new Element('a', {'class':'neg_action_btn', 'href':'#'});
		this.btn_confirm = new Element('a', {'class':'pos_action_btn',  'href':'#'});
		this.btn_cancel.addEvent('click', this.on_CancelClick.bind(this) );
		this.btn_confirm.addEvent('click', this.on_ConfirmClick.bind(this) );

		if (this.options.type == "yesno") {
			this.btn_cancel.innerHTML = "<div></div>NO";
			this.btn_confirm.innerHTML = "<div></div>YES";
			//this.btn_confirm.focus();
		} else if (this.options.type == "custom"){
			this.btn_cancel.innerHTML = "<div></div>"+this.options.cancel_text;
			this.btn_confirm.innerHTML = "<div></div>"+this.options.confirm_text;
		} else if (this.options.type =="error"){
			this.btn_confirm.innerHTML = "<div></div>OK";
			//this.btn_confirm.focus();
			this.btn_cancel.style.display="None";
		} else if (this.options.type =="ok"){
			this.btn_confirm.innerHTML = "<div></div>OK";
			//this.btn_confirm.focus();
			this.btn_cancel.style.display="None";
		} else if (this.options.type =="report"){
			this.btn_cancel.innerHTML = "<div></div>CANCEL";
			this.btn_confirm.innerHTML = "<div></div>Send Report";
		} else {
			this.btn_cancel.innerHTML = "<div></div>CANCEL";
			this.btn_confirm.innerHTML = "<div></div>OK";
			//this.btn_confirm.focus();
		}
	},
	show: function(focus_item){
		var el1=$(this.content);
		el1.innerHTML = this.options.message;
		var el2=$(this.buttons);
		el2.adopt(this.btn_confirm);
		el2.adopt(this.btn_cancel);
		this.popup_window.setStyles({
			'left': -2000,
			'display': 'block',
			'width': this.options.width
		});
		this.popup_container.setStyle('opacity', 1);
		this.popup_window.setStyles({
			'left': (this.mask.getSize().x - this.options.width)/2,
			'top': (window.getSize().y/2 - this.popup_window.getSize().y/2)
		});
		if(focus_item)
			$(focus_item).focus();
	}
});

var ConfirmPopup = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		message: 'Are you sure?',
		type: 'yesno',
		width: 350,
		color: '#000',
		opacity: .8,
		z_index: 50000,
		title: 'Confirm',
		on_Confirm: $empty,
		on_Cancel: $empty,
		args: {}
	},
	on_ConfirmClick: function() {
		this.options.on_Confirm(this.options.args);
		this.popup_container.destroy();
		return false;
	},
	on_CancelClick: function() {
		this.options.on_Cancel();
		this.popup_container.destroy();
		return false;
	}
});


var Dropdown = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		message: 'Completed',
		width: 300,
		type: 'ok',
		duration: 1000
	},
	initialize: function(options){
		this.parent(options);
		this.setOptions(options);
		this.id = "popup"+Math.floor(Math.random()*100);
		this.inner_id = "popup_content"+Math.floor(Math.random()*100);

		this.html = '<table border="0" cellspacing="0" cellpadding="0">'
				+'<tr><td width="20" rowspan="2"><img src="/images/dd_shadow_l.png" width="20" height="103" /></td><td height="3" bgcolor="#9BD8FF"></td> '
				+'<td width="20" rowspan="2"><img src="/images/dd_shadow_r.png" width="20" height="103" /></td></tr>'
				+'<tr><td height="100" align="center" id="'+this.inner_id+'" class="dropdown_message">'
				+this.options.message+'<br /></td></tr>'
				+'<tr><td height="20"><img src="/images/dd_shadow_bl.png" width="20" height="20" /></td><td><img src="/images/dd_shadow_b.png" width="305" height="20" /></td>'
				+'<td><img src="/images/dd_shadow_br.png" width="20" height="20" /></td></tr></table>';
	},
	on_ConfirmClick: function(){},
	on_CancelClick: function(){
		new Fx.Style(this.popup_window, 'top', {duration:800, 
			onComplete: function(){
				if (this.popup_window) this.popup_window.remove();
			}.bind(this)}).start(Window.getScrollTop(),this.start_position);
	},
	show: function(){
		var popup_window = this.popup_window;
		var el=$(this.inner_id);
		el.adopt(this.btn_cancel);
		this.start_position = Window.getScrollTop()-this.popup_window.offsetHeight;
		//alert("start:"+this.start_position+" height:"+this.popup_window.offsetHeight);
		popup_window.setStyles({'top': this.start_position+'px', 'left': ((Window.getWidth()/2)-(this.options.width/2))+'px','min-width':this.options.width+'px'});
		
		//popup_window.tween('top', this.start_position, Window.getScrollTop());
		var eff = new Fx.Tween(popup_window);
		eff.start('top', this.start_position, Window.getScrollTop());
		//var eff = new Fx.Style(popup_window, 'top', {duration:800});
		/*
		eff.start_position = this.start_position;
		//eff.btn_cancel=this.btn_cancel;
		eff.start(this.start_position,Window.getScrollTop()).chain(function(){this.btn_cancel.onclick=null;eff.start.delay(this.options.duration, eff,[Window.getScrollTop(),this.start_position])})
			.chain(function(){
				this.element.remove();
			});
		*/ 
	}
});


var AlertPopup = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		title:'Success',
		message: '',
		width: 350,
		z_index: 50000,
		offset: 200,
		opacity: .8,
		type: 'ok'
	},
	on_ConfirmClick: function() {
		this.popup_container.destroy();
		return false;
	},
	on_CancelClick: function() {
		this.popup_container.destroy();
		return false;
	}
});

var AlertConfirmPopup = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		title:'Success',
		message: '',
		width: 350,
		z_index: 50000,
		offset: 200,
		opacity: .8,
		type: 'ok'
	},
	on_ConfirmClick: function() {
		this.options.on_Confirm(this.options.args);
		this.popup_container.destroy();
		return false;
	},
	on_CancelClick: function() {
		this.popup_container.destroy();
		return false;
	}
});

var ErrorPopup = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		title: 'Oops! There Are Errors',
		message: '',
		width: 350,
		z_index: 50000,
		opacity: .8,
		on_Confirm: $empty,
		type: 'error'
	},
	on_ConfirmClick: function() {
		this.options.on_Confirm();
		this.popup_container.destroy();
		return false;
	},
	on_CancelClick: function() {
		this.options.on_Cancel();
		this.popup_container.destroy();
		return false;
	}
});

var LogoutPopup = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		title: 'Your session has timed out',
		message: '',
		width: 350,
		z_index: 50000,
		offset: 200,
		type: 'ok'
	},
	on_ConfirmClick: function() {
		parent.location = '/member/login';
		return false;
	}
});

var ReportPopup = new Class({    
	Extends: Popup,
	Implements: [Options, Events],
	options: {
		title: 'Report Offensive Material',
		message: '<table cellpadding="0" cellspacing="0" border="0" width="310"><tr><td height="24" class="fieldname">Please enter your comment</td></tr><tr><td height="100"><form id="report_violation_form" action="" method="post" name="report_violation_form"><textarea name="comments" rows="6" id="report_violation_comments" class="textbox" style="width:99%; height: 98px"></textarea></form></td></tr><tr><td><div id="report_violation_error"></div></td></tr></table>',
		width: 350,
		z_index: 50000,
		offset: 200,
		opacity: .8,
		type: 'report',
		form_vars: {
			type: 'photo',
			id: null,
			description: ''
		}
	},
	on_ConfirmClick: function() {
		if ($('report_violation_comments').value.length==0){
			var target_id = this.options.form_vars.id;
			var reportError = new ErrorPopup({
				'message': '<li>Please enter a comment before submitting</li>',
				'on_Confirm': function(){
					report_user(target_id);
				}
			}).show();
		}
		else {
			this.options.form_vars.description = $('report_violation_comments').value; 
			this.popup_container.destroy();
			new ConfirmPopup({message:"Are you sure you want to send this report?", on_Confirm: this.send, args: this, offset:20}).show();
		}
	},
	on_CancelClick: function() {
//		this.options.on_Cancel();
		this.popup_container.destroy();
		return false;
	},
	send: function(popup) {
		popup.popup_container.destroy();
		var v = popup.options.form_vars;
//		alert("sending:"+v.description+" id:"+v.id + " report type:"+v.type);
		new Request.HTML({url:'/member/violation/report',
			data:"type="+v.type+"&id="+v.id+"&description="+v.description,
			method: 'get',
			onComplete: function(response){
				new AlertPopup({
					'message': 'Thank you, your report has been sent.'
				}).show();
			},
			onFailure: function(response){
				new ErrorPopup({
					'message': '<li>'+response+'</li>'
				}).show();
			}
		}).send();
	}
});