var QuizEditorState = Class.create({
	currentUser : null,
	currentQuiz : null,
	canvasDiv : null,
	nextCallback : null,
	
	textArea : null,
	button : null,
	
	initialize : function(_user, _quiz, _canvas, _nextCallback) {
		this.currentUser = _user;
		this.currentQuiz = _quiz;
		this.canvasDiv = _canvas;
		this.nextCallback = _nextCallback;
		
		// Setup the text area
		this.textArea = new Element('textarea', { 
			'id' : 'quiz_editor',
			'class' : 'quizEditor textarea',
			'name' : 'quiz'
		});
		
		if (this.currentQuiz != null && this.currentQuiz.content.length > 0) {
			this.textArea.value = this.currentQuiz.content;	
		} else {
			this.textArea.value = 'Type your quiz here...';
		}
		
		// Setup the button
		this.button = new Element('input', {
			'type' : 'button',
			'class' : 'quizButton button',
			'value' : ' Done '
		});
		
		this.button.observe('click', function(evt) {
			Debug.log('click ' + Event.element(evt));
			this.currentQuiz.content = this.cleanQuiz($('quiz_editor').value);
			this.clear();
			this.nextCallback(this.currentQuiz);
			}.bind(this));
		
		// Insert into the page
		this.canvasDiv.insert(this.textArea);
		this.canvasDiv.insert(this.button);
		
		// Ready
		this.canvasDiv.addClassName('quizEditor');
		this.canvasDiv.show();
		this.textArea.focus();
	},
	
	cleanQuiz : function(quizTxt) {
		var parsed = new Array();
		for (var i = 0; i < quizTxt.length; ++i)
		{
			if (quizTxt.charAt(i) == "\n")
				parsed.push('<br/>');
			else
				parsed.push(quizTxt.charAt(i));
		} 
		quizTxt = parsed.join('');
		return quizTxt.stripScripts();
	},
	
	clear : function() {
		this.canvasDiv.hide();
		this.canvasDiv.update('');
		this.canvasDiv.removeClassName('quizEditor');
	}
});


var DialogState = Class.create({
	currentUser : null,
	canvasDiv : null,
	
	yesCallback : null,
	noCallback : null,
	
	titleH1 : null,
	yesButton : null,
	noButton : null,
	
	initialize : function(_user, _canvas, _titleTxt, _yesTxt, _yesCallback, _noTxt, _noCallback) {
		this.currentUser = _user;
		this.canvasDiv = _canvas;
		
		this.yesCallback = _yesCallback;
		this.noCallback = _noCallback;
		
		// Setup the elements
		this.titleH1 = new Element('h1', {
			'class' : 'dialog center'
		});
		this.titleH1.update(_titleTxt);
		
		this.yesButton = new Element('input', {
			'type' : 'button',
			'class' : 'yesButton button',
			'value' : _yesTxt
		});
		
		this.noButton = new Element('input', {
			'type' : 'button',
			'class' : 'noButton button',
			'value' : _noTxt
		});
		
		this.yesButton.observe('click', function(evt) {
			Debug.log('click ' + Event.element(evt));
			this.clear();
			this.yesCallback();
			}.bind(this)
		);
			
		this.noButton.observe('click', function(evt) {
			Debug.log('click ' + Event.element(evt));
			this.clear();
			this.noCallback();
			}.bind(this)
		);
		
		// Insert into the page
		this.canvasDiv.insert(this.titleH1);
		this.canvasDiv.insert(this.yesButton);
		this.canvasDiv.insert(this.noButton);
		
		// Ready
		this.canvasDiv.show();
		this.canvasDiv.addClassName('askProfile');
		this.yesButton.focus();
	},
	
	clear : function() {
		this.canvasDiv.hide();
		this.canvasDiv.update('');
		this.canvasDiv.removeClassName('askProfile');
	}
});


/*
	Select friends
*/
var FriendSelectorState = Class.create({
	appUrl : null,
	friends : null,
	selections : null,
	currentQuiz : null,
	canvas : null,
	callbackFunc : null,
	measure : null,
	html : [],
	
	initialize : function(_appUrl, _canvasDiv, _friends, _currentQuiz, _callbackFunc, _measure)
	{
		this.canvasDiv = _canvasDiv;
		this.friends = _friends;
		this.callbackFunc = _callbackFunc;
		this.selections = new Array();
		this.currentQuiz = _currentQuiz;
		this.appUrl = _appUrl;
		this.measure = _measure;
		
		if (this.friends.size() > 0) {
			this.renderFriends();
			this.renderActionBar();
			this.canvasDiv.innerHTML = this.html.join('');
			this.observeActions();
			this.canvasDiv.show();
		} else {
			this.callbackFunc();
		}
	},
	renderFriends : function()
	{		
		this.html.push('<div id="friendContainer"><h1 class="friendHeader">Select Friends to Quiz</h1>');
		this.html.push('<p class="infoBox">Click continue when you\'re done.</p>');
		this.html.push('<div class="subPick">');
		this.friends.each(function(pair) {
			var friend = pair.value;
			this.html.push('<div class="imgContainer"><div class="friendSelector selected"><div class="imgInner"><label class="imgLabel">'+friend.name+'</label><img src="'+friend.picTiny+'" alt="'+friend.name+'" /></div><input type="checkbox" value="'+friend.msid+'" checked="checked" /></div></div>');
		}.bind(this));
		this.html.push('</div></div>');
	},
	renderActionBar : function()
	{
		this.html.push('<ul id="actionBar">');
		this.html.push('<li><a id="selectAll">Select All</a></li><li><a id="selectNone">Select None</a></li><li class="next"><a id="continueButton" class="confirm">Continue</a></li>');
		this.html.push('</ul>');
	},
	observeActions : function()
	{
		$$('#friendContainer div.imgInner').invoke('observe', 'click', function(){
			this.up().addClassName('selected');
			this.next().checked = true;
		});
		
		var friendInputs = $$('#friendContainer div.friendSelector > input');
		
		friendInputs.invoke('observe', 'click', function(){
			this.up().toggleClassName('selected');
		});
		$('selectAll').observe('click', function(){
			friendInputs.each(function(e){
				e.checked = true;
				e.up().addClassName('selected');
			});
		});
		$('selectNone').observe('click', function(){
			friendInputs.each(function(e){
				e.checked = false;
				e.up().removeClassName('selected');
			});
		});
		$('continueButton').observe('click', function(){
			this.selections = friendInputs.findAll(function(e){ return e.checked; }).pluck('value');
			if (this.selections.size() > 0) {
				this.sendNotification();
			}
		}.bind(this));
	},
	sendNotification: function()
	{
		var ids = this.selections.collect(function(s) {return parseInt(s);});
		
		var button = MyOpenSpace.newNotificationButton(MyOpenSpace.NotificationButton.UrlTypes.CANVAS, 'Take my quiz!', null);
		var buttons = [ button ];
		
		var params = { };
		params[MyOpenSpace.Notification.Field.BODY] = 'I just took this quiz. Why don\'t you take it as well and we can compare!';
		params[MyOpenSpace.Notification.Field.BUTTONS] = buttons;
		
		var notification = MyOpenSpace.newNotification(params);
		MyOpenSpace.requestCreateNotification(ids, notification, this.sendComment.bind(this)); 
	},
	sendComment : function()
	{	
		// this.measure.google('friend-post', 'friend-select');
		
		var friend = this.friends.get(this.selections.pop());
		
		var params = { };
		params[opensocial.Message.Field.TITLE] = 'Hey ' + friend.name + ', take my quiz!';
		params[opensocial.Message.Field.TYPE] = opensocial.Message.Type.PUBLIC_MESSAGE;
		
		var caption = '<h1><a href="' + this.measure.getHref(this.appUrl, 'friend-post') + '"><img src="http://static.thedailyq.pollection.com/images/take1.gif" alt="Take my quiz!"></a></h1>';
		var message = opensocial.newMessage('I just took this quiz. Why don\'t you take it as well and we can compare!'+caption, params);
		
		var friendId = parseInt(friend.osPersonObj.getId().sub('myspace.com:', ''));
		opensocial.requestSendMessage(friendId, message, this.commentCallBack.bind(this));
	},
	commentCallBack : function(status)
	{
		if (!status.hadError() && status.getData() != 0) {
			this.measure.invite('comment');
		}
		
		if (this.selections.length == 0) {
			this.clear();
			this.callbackFunc();
		} else {
			this.sendComment();
		} 
	},
	clear : function() {
		this.canvasDiv.hide();
		this.canvasDiv.update('');
	}
});