XKCD Browser

var whiteSkin = new Skin({fill:"white"});
var THEME = require('themes/flat/theme');
var BUTTONS = require('controls/buttons');
var titleStyle = new Style({font:"bold 70px", color:"black"});
var buttonStyle = new Style({font:"30px", color:"black"});
var smallButtonStyle = new Style({font:"20px", color:"black"});
var flrTitleStyle = new Style({font:"24px", color:"purple"});
var comic_count = 300;
var flickr_ind = 50;
var flickr_photos = null;
var xkcd_url_begin = "http://xkcd.com/"
var xkcd_url_end = "/info.0.json"
var flickr_url_begin = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=8d7abd1738474205615ecac6d7bfa1fe&format=json&text="
var xkcd_search = "life"
var buttonBehavior = function(content, data){
	BUTTONS.ButtonBehavior.call(this, content, data);
}
buttonBehavior.prototype = Object.create(BUTTONS.ButtonBehavior.prototype, {
	onTap: { value:  function(button){
		if (this.name=="prev"){
			application.invoke(new Message("/prevComic"));
		}
		else if (this.name=="flickr"){
			application.invoke(new Message("/flickr"));
		}
		else if (this.name=="xkcd"){
			xkcdPage();
		}
		else if (this.name=="prevF"){
			application.invoke(new Message("/prevFlickrImg"));
		}
		else if (this.name=="nextF"){
			application.invoke(new Message("/nextFlickrImg"));
		}
		else{
			application.invoke(new Message("/nextComic"));
		}
	}}
});

var myButtonTemplate = BUTTONS.Button.template(function($){ return{
	left:$.left, right:$.right, top:$.top,
	contents:[
		new Label({left:0, right:0, string:$.textForLabel, style:buttonStyle})
	],
	behavior: new buttonBehavior
}});

// This is the XKCD comic view
var mainColumn = new Column({
	left: 0, right: 0, top: 0, bottom: 0,
	skin: whiteSkin,
	contents:[
		new Label({left: 0, right: 0, height: 70, string: "XKCD", style: titleStyle}),
		new Picture({left: 0, right: 0, height: 270, url: "", name:"comic"}),
		new myButtonTemplate({left:25, right:200, top:50, textForLabel:"Prev", name:"prev", x:"buttonStyle"}),
		new myButtonTemplate({right:25, left:200, top:-32, textForLabel:"Next", name:"next", x:"buttonStyle"}),
		new myButtonTemplate({right:30, left:30, top:10, height:50, textForLabel:"Get Relevant Pics", name:"flickr", x:"smallButtonStyle"}),
	]
});

//This is the Flickr View
var flrColumn = new Column({
	left: 0, right: 0, top: 0, bottom: 0,
	skin: whiteSkin,
	contents:[
		new Label({left: 0, right: 0, height: 70, string: "Flickr Images: "+xkcd_search, style: flrTitleStyle,name:"FlrTitle"}),
		new Picture({left: 0, right: 0, height: 270, url: "", name:"comic"}),
		new myButtonTemplate({left:25, right:200, top:50, textForLabel:"Prev", name:"prevF", x:"buttonStyle"}),
		new myButtonTemplate({right:25, left:200, top:-32, textForLabel:"Next", name:"nextF", x:"buttonStyle"}),
		new myButtonTemplate({right:30, left:30, top:10, height:50, textForLabel:"Back to XKCD", name:"xkcd", x:"smallButtonStyle"}),
	]
});


Handler.bind("/getComic", {
	onInvoke: function(handler, message){
		var get_url = xkcd_url_begin+comic_count+xkcd_url_end;
		handler.invoke(new Message(get_url), Message.JSON);
	},
	onComplete: function(handler, message, json){
		mainColumn.comic.url = json.img;
		xkcd_search = json.safe_title;
		trace(xkcd_search);
	}
});
Handler.bind("/nextComic", {
	onInvoke: function(handler, message){
		if (comic_count<612){
			comic_count=comic_count+1;
			trace(comic_count);
			var get_url = xkcd_url_begin+comic_count+xkcd_url_end;
			handler.invoke(new Message(get_url), Message.JSON);
		}
	},
	onComplete: function(handler, message, json){
		mainColumn.comic.url = json.img;
		xkcd_search = json.safe_title;
		trace(xkcd_search);
	}
});
Handler.bind("/prevComic", {
	onInvoke: function(handler, message){
		if (comic_count>0){
			comic_count=comic_count-1;
			var get_url = xkcd_url_begin+comic_count+xkcd_url_end;
			handler.invoke(new Message(get_url), Message.JSON);
		}
	},
	onComplete: function(handler, message, json){
		if (json.img==undefined){
			trace("HOOPLAH")
		}
		mainColumn.comic.url = json.img;
		xkcd_search = json.safe_title;
		trace(xkcd_search);
	}
});

Handler.bind("/flickr", {
	onInvoke: function(handler, message){
		var get_url2 = flickr_url_begin+xkcd_search;
		handler.invoke(new Message(get_url2), Message.TEXT);
		var apple = JSON.parse('{ "key":"value" }');
	},
	onComplete: function(handler, message, resp){
		var trim_index = resp.indexOf("jsonFlickrApi(");
		var trimmed_json = resp.slice(trim_index+"jsonFlickrApi(".length,resp.length-1);
		//trace(trimmed_json);
		var json = JSON.parse(trimmed_json);
		trace(json.photos.photo[0].id);
		flickr_photos = json.photos.photo;
		flickrPage();
	}
});

Handler.bind("/prevFlickrImg", {
	onInvoke: function(handler, message){
		if (flickr_ind>0){
			flickr_ind = flickr_ind - 1;
			var curr_photo = flickr_photos[flickr_ind];
			var img_url = "https://farm"+curr_photo.farm+".staticflickr.com/"+curr_photo.server+"/"+curr_photo.id+"_"+curr_photo.secret+".jpg";
			flrColumn.comic.url = img_url;
		}
	},
});

Handler.bind("/nextFlickrImg", {
	onInvoke: function(handler, message){
		if (flickr_ind<99){
			flickr_ind = flickr_ind + 1;
			var curr_photo = flickr_photos[flickr_ind];
			var img_url = "https://farm"+curr_photo.farm+".staticflickr.com/"+curr_photo.server+"/"+curr_photo.id+"_"+curr_photo.secret+".jpg";
			flrColumn.comic.url = img_url;
		}
	},
});

application.behavior = Object.create(Behavior.prototype, {	
	onLaunch: { value: function(application, data){
		application.add(mainColumn);
		application.invoke(new Message("/getIP"));
		application.invoke(new Message("/getTime"));
		application.invoke(new Message("/getComic"));
	}}
});

//used to switch between views
var flickrPage = function() {
	application.remove(mainColumn);
	application.add(flrColumn);
	application.invoke(new Message("/getFlickrImg"));
	var curr_photo = flickr_photos[flickr_ind];
	var img_url = "https://farm"+curr_photo.farm+".staticflickr.com/"+curr_photo.server+"/"+curr_photo.id+"_"+curr_photo.secret+".jpg";
	flrColumn.comic.url = img_url;
	flrColumn.FlrTitle.string = "Flickr Images: "+xkcd_search;
}

var xkcdPage = function() {
	application.remove(flrColumn);
	application.add(mainColumn);
	application.invoke(new Message("/getComic"));
}