var gOverlay
var gLogin

window.addEvent('domready', function(){
	gOverlay = new Overlay()
	gLogin = new Login(gOverlay)
	
	ToolTips.init()
})

var StarRating = {
	hover: function(star) {
		switch(star) {
			case 1:
			 $('ratingHoverStatus').innerHTML = 'bad';
			 break;
			case 2:
			 $('ratingHoverStatus').innerHTML = 'poor';
			 break;
			case 3:
			 $('ratingHoverStatus').innerHTML = 'good';
			 break;
			case 4:
			 $('ratingHoverStatus').innerHTML = 'great';
			 break;
			case 5:
			 $('ratingHoverStatus').innerHTML = 'amazing';
			 break;
		}

		$('ratingFinalStatus').style.display='none'
		$('ratingHoverStatus').style.display='inline'
		
		$('current').style.display='none'
	},
	unHover: function() {
		$('ratingHoverStatus').style.display='none'
		$('ratingFinalStatus').style.display='inline'

		$('current').style.display='block'
	},
	rate: function(rating, mId){
		rating = ((rating==null)?this.rating:rating)
		mId = ((mId==null)?this.mId:mId)
		
		this.rating = rating
		this.mId = mId
		
		new Ajax('/code/rating_ajax.php', {
			method: 'post',
			data: {
				rating: rating,
				movieId: mId
			},
			onSuccess: this.rateSuccess.bind(this),
			onFailure: this.rateFailure.bind(this)
		}).request()
	},
	rateSuccess: function(data){
		if(data.substring(0,1)=='1') { // success
			$('ratingFinalStatus').innerHTML=(parseInt($('ratingFinalStatus').innerHTML.replace(/^([0-9]+).*/,'$1'))+1)+(($('ratingFinalStatus').innerHTML.substr(0,1)==0)?' rating ':' ratings ')+'<img src="/images/red_check.gif" />'
			$('star1').style.display = $('star2').style.display = $('star3').style.display = $('star4').style.display = $('star5').style.display = 'none'
			$('current').style.width = parseInt(data.substring(1))*20 + 'px'
			//$('addrev').disabled=false;
			//$('addrev').innerHTML='Add Review'
		} else {
			if(data.substring(0,2)=='02') { // failure--not logged in
				gLogin.removeEvent('onSuccess', StarRating.rateFromLogin) // just in case one is lingering around
				gLogin.addEvent('onSuccess', StarRating.rateFromLogin)
				gLogin.show()
			} else { // other error
				alert('Unknown error; your rating has not been saved.')
			}
		}
	},
	rateFailure: function(data){
		alert('Unable to contact server; your rating has not been saved.')
	},
	rateFromLogin: function(){
		gLogin.removeEvent('onSuccess', StarRating.rateFromLogin)
		StarRating.rate()
	}
}

var Login = new Class({
	initialize: function(overlay){
		this.box = $('loginBox')
		this.overlay = overlay
	},
	hide: function(){
		this.box.style.display = 'none'
		this.overlay.hide()

		this.fireEvent('onHide')
	},
	show: function(){
		this.box.setStyles({
			left: window.getWidth()/2-75,
			top: window.getHeight()/2-150,
			display: 'block'
		})
		this.overlay.show(this.box)
		
		this.fireEvent('onShow')
	},
	submit: function(user, pass, remember){
		new Ajax('/code/login.php', {
			method: 'post',
			data: {
				login: 1,
				username: user,
				password: pass,
				rememberMe: remember
			},
			onSuccess: this.submitSuccess.bind(this),
			onFailure: this.submitFailure.bind(this)
		}).request()
	},
	submitSuccess: function(data){
		if(data.substring(0,1) == 0) {
			alert('Bad username or password; please try again.')
			
			this.fireEvent('onFailure')
		} else {
			this.hide()
			this.overlay.hide()
			
			this.fireEvent('onSuccess')
		}
	},
	submitFailure: function(){
		alert('Failed to connect to the server.')
		
		this.fireEvent('onConnectionFailure')
	}
})
Login.implement(new Events) // require so that we can bind events to the object

var Overlay = new Class({
	initialize: function(){
		this.top = new Element('div').setStyles({
			zIndex: 10,
			position: 'absolute',
			display: 'none',
			opacity: .85,
			filter: 'alpha(opacity=85)',
			background: '#000',
			top: 0,
			left: 0
		}).injectInside(document.body)
		this.bottom = this.top.clone().injectInside(document.body)
		this.left = this.top.clone().injectInside(document.body)
		this.right = this.top.clone().injectInside(document.body)
		
		// default vals
		this.hidden = true
		this.content = null
		
		// catch window resize
		window.onresize = this.windowResize.bindWithEvent(this)
	},
	show: function(content){
		// hide any current content
		if(this.content)
			this.content.hide()

		this.content = content
		this.hidden = false
		
		this.resizeOverlays()
		this.top.style.display = 'block'
		this.bottom.style.display = 'block'
		this.left.style.display = 'block'
		this.right.style.display = 'block'
		
		//this.fireEvent('onShow')
	},
	hide: function(){
		this.content = null
		this.hidden = true
		
		this.top.style.display = 'none'
		this.bottom.style.display = 'none'
		this.left.style.display = 'none'
		this.right.style.display = 'none'
		
		//this.fireEvent('onHide')
	},
	resizeOverlays: function() {
		var size = {
			h: parseInt(this.content.style.height),
			w: parseInt(this.content.style.width),
			t: parseInt(this.content.style.top),
			l: parseInt(this.content.style.left),
			bw: 0, //parseInt(this.content.style.borderWidth)*2,
			pw: (this.content.style.padding) ? parseInt(this.content.style.padding)*2 : 0
		}
		
		this.top.setStyles({
			width: window.getWidth(),
			height: size.t
		})
		this.bottom.setStyles({
			top: size.pw + size.bw + size.h + size.t,
			width: window.getWidth(),
			height: window.getScrollHeight() - (size.h + size.t + size.bw + size.pw)
		})
		this.left.setStyles({
			top: size.t,
			width: size.l,
			height: size.h + size.bw + size.pw
		})
		this.right.setStyles({
			left: size.bw + size.pw + size.l + size.w,
			top: size.t,
			width: window.getWidth() - (size.bw + size.pw + size.l + size.w),
			height: size.h + size.bw + size.pw
		})
	},
	windowResize: function() {
		if(!this.hidden) {
			// position the current content properly (login box, trailer, etc)
			this.content.setStyles({
				left: Math.round(Math.abs((window.getWidth()/2) - (parseInt(this.content.style.width)/2))),
				top: Math.round(Math.abs((window.getHeight()/2) - (parseInt(this.content.style.height)/2)))
			})
			// resize overlays as needed
			this.resizeOverlays()
		}
	}
})

var RequestFriend = {
	show: function(name){
		// show confirm box with optional message area ---- TODO
		new Ajax('/code/ajax_add_friend.php', {
			method: 'post',
			data: { friend_name: name },
			onSuccess: this.requestSuccess.bind(this),
			onFailure: this.requestFailure.bind(this)
		}).request()
	},
	requestSuccess: function(data){
		alert(data)
	},
	requestFailure: function(){
		alert('Connection error; friend request not sent.')
	}
}

var AcceptFriend = {
	show: function(name) {
		// save name
		this.friendName = name
		
		// create a container if needed
		if(!this.container) {
			this.container = new Element('div').setStyles({
				width: 500,
				height: 200,
				background: '#fff',
				position: 'absolute',
				display: 'block'
			}).injectInside(document.body)
		}

		// setup the contents
		this.container.innerHTML = name + ' would like to add you as their friend.<br /><br /><input type="button" value="Accept & Add" onclick="javascript:return AcceptFriend.accept()" /> <input type="button" value="Reject"onclick="javascript:return AcceptFriend.reject()"  /> <input type="button" value="Cancel" onclick="javascript:AcceptFriend.hide();return false" />'
		
		this.container.setStyles({
			left: window.getWidth()/2-250,
			top: window.getHeight()/2-100,
			display: 'block'
		})
		
		gOverlay.show(this.container)
	},
	hide: function() {
		this.container.style.display = 'none'
		gOverlay.hide()
	},
	accept: function() {
		new Ajax('/code/ajax_add_friend.php', {
			method: 'post',
			data: {
				friend_name: this.friendName
			},
			onSuccess: this.acceptSuccess.bind(this),
			onFailure: this.acceptFailure.bind(this)
		}).request()
		return false
	},
	reject: function() {
		new Ajax('/code/ajax_reject_friend.php', {
			method: 'post',
			data: {
				friend_name: this.friendName
			},
			onSuccess: this.rejectSuccess.bind(this),
			onFailure: this.rejectFailure.bind(this)
		}).request()
		return false
	},
	rejectSuccess: function(data) {
		this.hide()
		alert(data)
	},
	rejectFailure: function() {
		this.hide()
		alert('Failed to reject friend; connection error.')
	},
	acceptSuccess: function(data) {
		this.hide()
		alert(data)
	},
	acceptFailure: function(data) {
		this.hide()
		alert('Failed to add friend; connection error.')
	}
}

var ToolTips = {
	init: function() {
		//find all elements with attribute title and set it up
		elements = $$('img');
		for(x = 0; x < elements.length; x++)
		{
			if(titletext = elements[x].getAttribute('title'))
			{
				elements[x].setAttribute('title', '')
				ttwrap = new Element('div')
				ttmain = new Element('div')
				tt1 = new Element('div')
				tt2 = new Element('div')
				tt3 = new Element('div')
				tt4 = new Element('div')
				tt5 = new Element('div')
				tt6 = new Element('div')
				ttwrap.id = 'ttwrap' + x

				//wrap div setup
				ttwrap.setStyles({
					display: 'none',
					opcaticy: .9,
					filter: 'alpha(opacity=90)',
					width: 200,
					position: 'absolute',
					left: 0,
					top: 0
				})

				//round edge setup
				tt1.id='tt1'
				tt2.id='tt2'
				tt3.id='tt3'
				tt4.id='tt4'
				tt5.id='tt5'
				tt6.id='tt6'

				//main tooltip div setup
				ttmain.setStyles({
					background: '#000',
					opacity: .9,
					filter: 'alpha(opacity=90)',
					color: '#fff',
					textAlign: 'center',
					padding: 5
				}).setHTML(titletext)

				ttwrap.adopt(tt1).adopt(tt2).adopt(tt3).adopt(ttmain).adopt(tt4).adopt(tt5).adopt(tt6)
				document.body.adopt(ttwrap);
				elements[x].onmouseout = this.toggleToolTip.bindAsEventListener(this, ttwrap.id)
				elements[x].onmouseover = this.toggleToolTip.bindAsEventListener(this, ttwrap.id)
				elements[x].onmousemove = this.moveToolTip.bindAsEventListener(this, ttwrap.id)
			}
		}
	},
	toggleToolTip: function(event, ttid){
		if($(ttid).style.display=='block')
			$(ttid).style.display='none'
		else
			$(ttid).style.display='block'
	},
	moveToolTip: function(event, ttid){
		$(ttid).setStyles({
			top: event.clientY + window.getScrollTop(),
			left: event.clientX + 17 + window.getScrollLeft()
		})
	}
}