var NINJA_URL = 'http://www.ninjazoo.com';
var SIGN_RESOURCE = '/myspace/sign.ninja';
var PAGE_SIZE = 40;
var CANVAS_W = 960;
var ProtoTabs = Class.create();
ProtoTabs.prototype = 
{	
	initialize: function(element, options)
	{
		this.options = Object.extend({
			defaultPanel: '',
			ajaxUrls: 			{},
			ajaxLoadingText: 	'Loading...'	
		}, options || {});
		this.currentTab = '';
		this.element = $(element);
		this.listElements = $A(this.element.getElementsByTagName('LI'));
		//loop over each list element
		for(i = 0; i < this.listElements.length; i++)
		{	
			//get the tabs
			tabLI = this.listElements[i];
			var itemLinks = tabLI.getElementsByTagName('A');
			tabLI.itemId = itemLinks[0].href.split("#")[1];
			tabLI.linkedPanel = $(tabLI.itemId);
			tabLI.linkedPanel.style.clear = "both";		//firefox hack
			//check for the intially active tab
			if((this.options.defaultPanel != '') && (this.options.defaultPanel == tabLI.itemId))
			{
				this.openPanel(tabLI);
			}
			else
			{
				$($(tabLI).linkedPanel).hide();
			}
			// watch for clicked
			$(itemLinks[0]).observe('click', function(event){
				element = Event.findElement(event, 'LI');
				this.openPanel(element);					
				Event.stop(event); // like return false;
			}.bind(this));
		}
	},
	openPanel: function(tab)
	{
		tab = $(tab); // ie hack	
		if(this.currentTab != '')
		{
			this.currentTab.linkedPanel.hide();
			this.currentTab.removeClassName('tabs-selected');
		}
		//set the currently open panel to the new panel
		this.currentTab = tab;
		tab.linkedPanel.show();
		tab.addClassName('tabs-selected');
		/** see orig prototabs for ajax tabs **/ 
		var iframeData = this.options.iframes[tab.itemId];
		if(iframeData != undefined)
		{
			var iframe = tab.linkedPanel.getElementsByTagName('iframe')[0];
			if (iframe.src == undefined || iframe.src == "")
			{
				if (iframeData.dataFn == undefined) ninjaApp.iframeUpdate(iframeData.url, iframe);
				else
				{
					new Insertion.Top(tab.linkedPanel, ninjaApp.dataLoader());
					iframeData.dataFn(function(data) {
						$('dataLoader').remove();
						if (data.length == 0 && iframeData.emptyUrl != undefined) ninjaApp.iframeUpdate(iframeData.emptyUrl, iframe);
						var json = gadgets.json.stringify(data);
						ninjaApp.iframeUpdate(iframeData.url + '?data=' + json, iframe)
					});
				}
			}
		}
		var fn = this.options.fns[tab.itemId];
		if (fn != undefined) fn();
	}
};
var NinjaApp = Class.create();
NinjaApp.prototype =
{
	initialize: function()
	{
		if (document.location.href.toQueryParams()['signedup'] != undefined)
		{
			parent.ninjaApp.signedUp();
		}
		else if (document.location.hash != undefined && document.location.hash.indexOf('mess=') != -1)
		{
			parent.parent.ninjaApp.receiveMess(document.location.hash.substring(6));
		}
		else
		{
			this.peopleLookup = {};
			gadgets.window.adjustHeight(800);
			new Insertion.Top('mainContent', 
				'<div id="loader" class="appLoader"><img src="' +
				NINJA_URL + '/img/myspace/loader.gif' +
				'" width="220" height="19" /><br /><br />Myspace loading application.  Please wait.</div>' +
				//'<div style="text-align: center;margin: 0 0 5px 0;"><a target="_blank" href="http://www.ninjazoo.com/blog/ninjazoo/entry/ninja_zoo_nominated_from_43">Vote for Ninja Zoo in the Open Web Awards</a></div>' +
				'<div class="tabs10"><ul id="tabSet1" class="tabs-nav">' +
					'<li><a href="#design"><span>Design</span></a></li>' +
					'<li><a href="#styleTool"><span>Style your shop</span></a></li>' +
					'<li><a href="#manage"><span>Manage products</span></a></li>' +
					'<li><a href="#friendsProds"><span>Friend&#39;s products</span></a></li>' +
					'<li><a href="#invite"><span>Invite friends</span></a></li>' +
				'</ul></div>' +
				'<div id="design" class="panel"><iframe id="dsFrame" width="100%" height="1000px" frameborder="0"  allowtransparency="true"></iframe></div>' +
				'<div id="styleTool" class="panel"><iframe width="100%" height="1000px" frameborder="0"  allowtransparency="true"></iframe></div>' +
				'<div id="manage" class="panel"><iframe width="100%" height="1000px" frameborder="0"  allowtransparency="true"></iframe></div>' +
				'<div id="friendsProds" class="panel"><iframe width="100%" height="1000px" frameborder="0"  allowtransparency="true"></iframe></div>' +
				'<div id="invite" class="panel"></div>');
			this.tabs = new ProtoTabs('tabSet1', {defaultPanel:'design', iframes: {
				styleTool: {url: '/myspace/style.ninja'},
				friendsProds: {url: '/myspace/fproducts.ninja', dataFn: this.appFriends.bind(this)},
				manage: {url: '/myspace/manage.ninja'}
			}, fns: {
				invite: this.renderInvite.bind(this)
			}});
			// the initial frame is updated here rather than through prototabs as the ninjaApp object will not be properly defined yet 
			this.iframeUpdate('/myspace/ds.ninja', $('dsFrame'), true);
		}
	},
	signedRequest: function(resource, callback)
	{
		try
		{
		    gadgets.io.makeRequest(NINJA_URL + resource, callback, {METHOD : 'GET', AUTHORIZATION : gadgets.io.AuthorizationType.SIGNED})
	  	}
	  	catch(e)
	  	{
	    	console.error(e.message);
		}
	},
	dataLoader: function(id)
	{
		return '<div id="dataLoader" class="dataLoader"><img src="' + NINJA_URL + '/img/myspace/loader.gif" width="220" height="19" /><br /><br />Waiting for Myspace</div>';
	},
	postTo: function(target, subject, message, optPerson, optCallback)
	{
		var message = opensocial.newMessage(message);
		message.setField(opensocial.Message.Field.TITLE, subject);
		message.setField(opensocial.Message.Field.TYPE, target);
        opensocial.Container.get().postTo(MyOpenSpace.MySpaceContainer.OSToken, message, optPerson, optCallback);
	},
	renderInvite: function(page)
	{
		if (!page) page = 1;
		$('invite').innerHTML = this.dataLoader();
		this.friends(function(data) {
			ninjaApp.picked = [];
			var html = '<div class="cloud cloudPanel"><div class="cloudTopTop"><img src="' + NINJA_URL + '/img/myspace/tl.gif" width="6" height="20" class="corner" style="display: none" /><span class="h">Invite your friends</span></div><div style="border: 1px solid #8a938a;">' +
				'<br /><div style="text-align: center;"><div style="width: 80px;margin: 0 auto;"><a class="button" href="javascript:void(0)" onclick="this.blur(); ninjaApp.invite()"><span>Invite</span></a></div></div><div class="instr" style="margin: 10px auto;">Click on friends to select them then click INVITE</div><table align="center">';
			for (var i = 0; i < data.length; i++)
			{
				if (i % 10 == 0) html += '<tr>';
				html += '<td><div id="' + data[i].getId() + '" onclick="ninjaApp.pick(this);" class="person"><div style="width: 90px; text-align: center;">' +
					'<div class="personPicS" style="background-image: url(' + data[i].getField('thumbnailUrl') + ');"></div>' + data[i].getDisplayName() + '</div></div></td>';
				if (i % 10 == 9) html += '</tr>';	
			}
			html += '</table><br /><div style="text-align: center;margin: 0 0 30px 0;">';
			for (var i = 0; i < Math.ceil(ninjaApp.totalFriends / PAGE_SIZE); i++)
			{
				html += '&nbsp;<a href="javascript:void(0);" onclick="ninjaApp.renderInvite(' + (i + 1) + ')">' + (i + 1) + '</a>&nbsp;';
			}
			html += '</div></div>';
			$('invite').innerHTML = html;
		}, page);
	},
	invite: function()
	{
		if (this.picked.length != 0)
		{
			var id = this.picked.pop();
			$(id).removeClassName('personInvited');
			this.postTo('SHARE_APP', 'Check out my awesome t-shirts', this.viewer.getDisplayName() + ' has designed some cool t-shirts for you.  Check them out and design your own t-shirts by adding Ninja Zoo to your Myspace!!', this.peopleLookup[id], this.invite.bind(this));
		}
	},
	pick: function(friendDiv)
	{
		friendDiv = $(friendDiv); // IE is rubbish
		if (this.picked.indexOf(friendDiv.id) == -1)
		{
			this.picked.push(friendDiv.id);
			friendDiv.addClassName('personInvited');
		}
		else
		{
			this.picked = this.picked.without(friendDiv.id);
			friendDiv.removeClassName('personInvited');
		}
	},
	iframeUpdate: function(url, frame, sign)
	{
		if (true)//frame.src.indexOf(url) == -1)
		{
			var tok = document.location.hash.substring(1, document.location.hash.indexOf('&'));
			if (tok == '') tok = document.location.href.toQueryParams()['opensocial_token'];
			if ((!/MSIE/.test(navigator.userAgent) && !/AppleWebKit/.test(navigator.userAgent)) || NINJA_URL.indexOf('.com') == -1) tok = encodeURIComponent(tok);
			if (sign) this.signedRequest(SIGN_RESOURCE + '?url=' + url + '&opensocial_token=' + tok, function (data) {
				if (data.text == undefined) ninjaApp.mspError();
				else
				{
					var signed = gadgets.json.parse(data.text);
					if (signed.isSignup) ninjaApp.renderSignUp(signed.url);
					else frame.src = signed.url;
				}
				setTimeout(function(){$('loader').hide()}, 1000);
			});
			else frame.src = NINJA_URL + url;
		}
	},
	renderSignUp: function(url)
	{
		$('loader').hide();
		new Insertion.Top($$('body')[0], '<div id="nOverlay1" class="overlay"></div>');
		new Insertion.Top($$('body')[0], '<div id="nOverlay2" style="z-index: 100001; border: 5px solid #6698cb; background: #fff; width: 600px; height: 300px; position: fixed; _position: absolute;top: 100px; left: ' + (CANVAS_W - 600) / 2 + 'px;">' +
			'<iframe style="margin: 30px 0 0 0;" frameborder="0" src="' + url + '" width="100%" height="100%"></div>');
	},
	signedUp: function()
	{
		this.iframeUpdate('/myspace/ds.ninja', $('dsFrame'));
		Element.remove('nOverlay1');
		Element.remove('nOverlay2');
	},
	appFriends: function(callback)
	{
		var req = opensocial.newDataRequest();
		var params = {};
  		params[opensocial.DataRequest.PeopleRequestFields.FILTER] = opensocial.DataRequest.FilterType.HAS_APP;
		req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, params));
		req.send(function(dataWrapper) {
			if (dataWrapper.hadError()) ninjaApp.mspError();
			else
			{
				var data = [];
				dataWrapper.get("VIEWER_FRIENDS").getData().each(function(v){data.push(v.getId());});
				callback(data);
			}
		});
	},
	friends: function(callback, page)
	{
		var req = opensocial.newDataRequest();
		var params = {};
		if (page)
  		{
  			params[opensocial.DataRequest.PeopleRequestFields.FIRST] = PAGE_SIZE * (page - 1) + 1;   
  			params[opensocial.DataRequest.PeopleRequestFields.MAX] = PAGE_SIZE * page;
  		}
		req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS, params));
		req.add(req.newFetchPersonRequest(opensocial.DataRequest.PersonId.VIEWER));
		req.send(function(dataWrapper) {
			if (dataWrapper.hadError()) ninjaApp.mspError();
			else
			{
				var data = [];
				dataWrapper.get("VIEWER_FRIENDS").getData().each(function(v) {
					ninjaApp.peopleLookup[v.getId()] = v;
					data.push(v);
				});
				if (ninjaApp.totalFriends == undefined) ninjaApp.totalFriends = dataWrapper.get("VIEWER_FRIENDS").getData().getTotalSize();
				if (ninjaApp.viewer == undefined) ninjaApp.viewer = dataWrapper.get("VIEWER").getData();
				callback(data);
			}
		});
	},
	mspError: function()
	{
		if ($('dataLoader')) $('dataLoader').remove();
		alert("An error occured with myspace.  Click refresh to try again.");
	},
	doComment: function(content)
	{
		if (this.picked.length != 0)
		{
			if (this.peopleLookup[this.picked.last()] == undefined) this.friends(this.doComment.bind(this, content));
			else
			{			
				var id = this.picked.pop();
				this.postTo('COMMENTS', 'Check out my awesome t-shirts', content, this.peopleLookup[id], this.doComment.bind(this, content));
			}
		}
	},
	receiveMess: function(mess)
	{
		if (/AppleWebKit/.test(navigator.userAgent)) mess = unescape(mess);
		var parsed = gadgets.json.parse(mess);
		if (parsed.target != 'COMMENTS') this.postTo(parsed.target, parsed.subject, parsed.content);
		else
		{
			this.picked = parsed.recipients;
			this.doComment(parsed.content);
		}
	}
};
function init() {ninjaApp = new NinjaApp();}