<file_sep><?php

$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$finish = $time;
$total_time = round(($finish - $start), 4);

//echo '<p style="text-align: center; color: black;">Page generated in '.$total_time.' seconds.'."</p>\n";


$link->close();

?><file_sep><?php 
header('Content-type: text/javascript');
include("../includes/vars.php");
?>

var DEFAULT_ID = 0;
var POSTERS_PER_ROW = 7;

var titleStorage = new Array();
var selectedMov = 0;
var processingMovie = false;

// Local database ----------------------------------------------------------
var db;

// Type Constants
var NOT_TMDB = 0;
var YES_TMDB = 1;

// Status Constants
var NOT_WATCHED = 0;
var WATCHED = 1;

db = openDatabase('Shelf', '1.0', 'Shelf', 5*1024*1024);

if (db)
	db.transaction(function(transaction) {
		// Creat tables in the database
		transaction.executeSql(
			'CREATE TABLE IF NOT EXISTS movies ' +
			'  (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ' +
			'   type INTEGER NOT NULL, ' + // 0 = not TMDb 1 = TMDb
			'   status INTEGER NOT NULL, ' + // <0 = not watched >1 = watched
			'   TMDb INTEGER NOT NULL, ' +
			'   overview TEXT NOT NULL, ' +
			'   release TEXT NOT NULL, ' +
			'   image TEXT NOT NULL, ' +
			'   url TEXT NOT NULL, ' +
			'   runtime INTEGER NOT NULL, ' +
			'   title TEXT NOT NULL );'
		, []);
	});

// Get from database
function updateMovies() {
	var search = 
		"<div class=\"listItem\">" +
			"<input type=\"text\" id=\"searchBox\" class=\"searchBox, search\" onChange=\"search(this.value);\" placeholder=\"Search for Movies Titles you want to add to your list.\" />" +
			"<a type=\"text\" id=\"searchButton\" class=\"searchButton\">Search</a>" +
			"<div id=\"searchResults\"></div>" +
		"</div>";
	
	var notList = "Not";
	var seenList = "Seen";
	
	// Write Movie to list of movies
	function writeMovie(row) {
		if (row.type == NOT_TMDB)
			listItem =
				'<div class="listItem" id="listItem' + row.id + '">' +
					'<h3 class="itemContents, movieTitle">' + row.title + '</h3>' +
					'<div class="itemControls">' +
						'<button class="itemControls" onClick="seeMovie(' + row.id + ');">Mark Watched</button>' +
						'<button class="itemControls" onClick="removeItem(' + row.id + ');">Remove</button>' +
					'</div>' +
				'</div>';
		else {
			var homepage = "", time = "", date = "", watch = "", image = "";
			
			// Check there is a url to link to
			if (row.url !== "")
				homepage = '<span class="movieSite"><a target="TOP" href="' + row.url + '">Movie Website</a></span>';
			
			// Check there is a time to show
			if (row.runtime !== "")
				time = '<span class="movieRuntime">Runs for: <span id="movieRuntime">' + row.runtime + '</span> min</span>';
			
			// Check there is a realse date to show
			if (row.release !== "")
				date = '<span>Released On: <span id="movieRelease_date">' + row.release + '</span></span>';
			
			// Watched on not watched
			if (row.status == WATCHED)
				watch = '<button class="itemControls" onClick="unseeMovie(' + row.id + ');">Unwatch</button>';
			else
				watch = '<button class="itemControls" onClick="seeMovie(' + row.id + ');">Mark Watched</button>';
			
			// Check there is a Image on record
			if (row.image == "")
				image = '<img class="movieImage" src="http://graphicport.net/mySoftware/images/no_image.gif"/>';
			else
				image = '<img class="movieImage" src="' + row.image + '"/>';
			
				listItem =
					'<div class="listItem" id="listItem' + row.id + '">' +
						'<div class="movieImage">' +
							image +
						'</div>' +
						'<div class="movieInfo">' +
							'<h3 class="itemContents, movieTitle">' + row.title + '</h3>' +
							'<p id="movieOverview" class="movieOverview, movieDescription">' + row.overview + '</p>' +
							'<div class="movieControlsAnd">' +
								'<div class="movieData">' +
									date +
									time +
									homepage +
								'</div>' +
								'<div class="movieControls">' +
									watch +
									'<button class="itemControls" onClick="removeItem(' + row.id + ');">Remove</button>' +
								'</div>' +
							'</div>' +
						'</div>' +
					'</div>';
		}
		
		return listItem;
	}
	
	// Write List to screen
	function writeList(status) {
		db.transaction(function(transaction) {
			transaction.executeSql('SELECT * FROM movies WHERE status = ?',[status], function (trx, result) {
				var list = "";
				var section = "";
				
				// If needed write Seen movies header
				if (status == WATCHED)
					section = "Watched Movies";
				else
					section = "Movies Not Yet Watched";
		
				for (var i=0; i < result.rows.length; i++) {
					list = writeMovie(result.rows.item(i)) + list;
				}
				
				if (result.rows.length >= 1) {
					list =
						'<div class="listItem">' +
							'<h2 class="itemContents, movieTitle">' + section + '</h2>' +
						'</div>' + list;
				}
				
				if (status == WATCHED)
					seenList = list;
				else {
					if (processingMovie) {
						list =
							'<div class="listItem">' +
								'<h2 class="itemContents, movieTitle">Currently adding \'' + titleStorage[selectedMov] + '\' to your list. It just takes a few seconds, cause we have to talk to the blokes a TMDb again.</h2>' +
							'</div>' + list;
							
						processingMovie = false;
					}
					
					notList = list;
				}
				
				// Show help statment if no movies in list
				if ((notList + seenList) == "")
					notList = 
						'<div class="listItem">' +
							'<h2 class="itemContents, movieTitle">Type a Movie Title in the Box above, to start your Movie list.</h2>' +
						'</div>';
				
				$('#movieList').html(search + notList + seenList);
				$("#searchBox").focus();
			}, errorHandler);
		});
	}
	
	writeList(NOT_WATCHED);
	
	// Watched movies
	
	writeList(WATCHED);
}

updateMovies();

// Fill tables in the databasevar 
function addMovie(type, tmdbId) {
	var status = NOT_WATCHED, runtime = 0;
	var overview = "", release = "", image = "", homepage = "";
	
	processingMovie = true;
	selectedMov = tmdbId;
	title = titleStorage[tmdbId];
	updateMovies();
	
	if (type == YES_TMDB) {
		// JSON AJAX request
		var url = "http://api.themoviedb.org/2.1/Movie.getInfo/en/json/<?php echo($tmdb_api_key);?>/" + encodeURIComponent(tmdbId) + "?callback=?";
		$.ajax(url, {
			crossDomain:true, 
			dataType: "jsonp", 
			success:function(data,text,xhqr){
				$("#tmdbSearch").html("");
				
				if (data[0] !== "Nothing found.") {
						$.each(data, function(i, item) {
						var count = 0;
						
						runtime = item.runtime;
						overview = item.overview;
						release = item.released;
						
						$.each(item.posters, function(i, item) {
							if (count++ == 0)
								image = item.image.url;
						});
						
						homepage = item.homepage;
						title = item.name;
					});
					
					db.transaction(function(transaction) {
						transaction.executeSql('INSERT INTO movies (type, status, TMDb, overview, release, image, url, runtime, title) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);',
							[YES_TMDB, status, tmdbId, overview, release, image, homepage, runtime, title]);
					});
					
					updateMovies();
				}
			},
			error:function (xhr, ajaxOptions, thrownError){
				console.log(xhr.status);
			}
		})
		
	} else {
		db.transaction(function(transaction) {
			transaction.executeSql('INSERT INTO movies (type, status, TMDb, overview, release, image, url, runtime, title) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?);',
				[NOT_TMDB, status, tmdbId, overview, release, image, homepage, runtime, title]);
		});
		
		updateMovies();
	}
	
	return false; // Stop page refresh
}

function clearTable() {
	db.transaction(function(transaction) {
		transaction.executeSql('DELETE FROM movies', [], function(){
			updateMovies();
		}, errorHandler);
	});
}

function removeItem(id) {
	db.transaction(function(transaction) {
		transaction.executeSql('DELETE FROM movies WHERE id = ?', [id], function(){
			updateMovies();
		}, errorHandler);
	});
}

function errorHandler(transaction, error) {
	alert('Oops. Error was '+error.message+' (Code '+error.code+')');
	return false;
}

function unseeMovie(id) {
	db.transaction(function(transaction) {
		transaction.executeSql('UPDATE movies SET status = ? WHERE id = ?', [NOT_WATCHED, id], function(){
			updateMovies();
		}, errorHandler);
	});
}

function seeMovie(id) {
	db.transaction(function(transaction) {
		transaction.executeSql('UPDATE movies SET status = ? WHERE id = ?', [WATCHED, id], function(){
			updateMovies();
		}, errorHandler);
	});
}

// TMDb talk ----------------------------------------------------------
var req = new Array();
function search(title) {
	var posterCount = 0;
	var recentDiv = "";
	var arrLast = new Array(); // Array of ids with current row in it
	var highPoster = 0;
	
	for(var i = 0; i < req.length; i++)
		req[i].abort();
	
	$("#searchResults").html("<div id=\"homemadeSearch\"></div><div id=\"tmdbSearch\"></div>"); // Clear list
	
	function addChoice(type, title, tmdbId, img) {
		if (type == NOT_TMDB) {
			$("#homemadeSearch").append("<div id=\"searchResult\" onClick=\"addMovie(" + type + ", " + tmdbId + ");\" class=\"search\">Just '" + title + "'</div>");
		} else {
			var HEIGHT_DIF = 22; // Difference in height bettween components and row
			
			if ((posterCount % POSTERS_PER_ROW) == 0) {
				divId = "posterRow" + (posterCount / POSTERS_PER_ROW);
				
				arrLast = new Array();
				$("#posterSearch").append("<div class=\"posterRow\" id=\"" + divId + "\"></div>");
				recentDiv = divId;
				highPoster = 0;
			}
			
			var posterId = "poster" + posterCount;
			var rowId = "#" + recentDiv;
			
			$(rowId).append(
				"<div class=\"posterItem\" id=\"" + posterId + "\" onClick=\"addMovie(" + type + ", " + tmdbId + ");\">" +
					"<img class=\"movieImage posterItem\" src=\"" + img + "\"/>" +
					"<a class=\"posterItem\">" + title + "</a>" +
				"</div>");
			arrLast.push(posterId);
			
			if ($("#" + posterId).height() < highPoster)
				$("#" + posterId).height(highPoster);
			
			if ((highPoster + HEIGHT_DIF) < ($(rowId).height())) {
				highPoster = $("#" + posterId).height(); // (Most recent poster = the one above) + extra distace for format
				
				for(var i = 0; i < arrLast.length; i++)
					$("#" + arrLast[i]).height(highPoster);
			}
			
			posterCount++;
		}
		
		titleStorage[tmdbId] = title;
	}
	
	if (title.length < 1) // Check something is there
		return;
	
	if (!(/\S/.test(title))) // Check something is there
		return;
	
	addChoice(NOT_TMDB, title, DEFAULT_ID, "");
	$("#tmdbSearch").html("<h6 class=\"tmdbSearch\">Yeah Mate, we're just looking through the disks at TMDb to give you more suggestions. Give us a minute</h6>");
	
	// JSON AJAX request
	var url = "http://api.themoviedb.org/2.1/Movie.search/en/json/<?php echo($tmdb_api_key);?>/" + encodeURIComponent(title.replace(" ","+")) + "?callback=?";
	
	var request;
	
	req.push(
		request = $.ajax(url, {
			crossDomain:true, 
			dataType: "jsonp", 
			success:function(data,text,xhqr){
				$("#tmdbSearch").html("<div id=\"posterSearch\" class=\"posterSearch\"></div>");
				
				if (data[0] !== "Nothing found.")
					$.each(data, function(i, item) {
						var image = "http://graphicport.net/mySoftware/images/no_image.gif";
						
						// Get Image
						var count = 0;
						$.each(item.posters, function(i, item) {
							if (count++ == 0)
								image = item.image.url;
						});
						
						addChoice(YES_TMDB, item.name, item.id, image);
					});
			},
			error:function (xhr, ajaxOptions, thrownError){
				console.log(xhr.status);
				$("#tmdbSearch").html("");
			}
		})
	);

	request.fail(function(jqXHR, textStatus) {
	  $("#tmdbSearch").html("<h6 class=\"tmdbSearch\">Request failed: " + textStatus + "</h6>");
	});
	
	return false; // Stop page refresh
}<file_sep><?php 
include("includes/vars.php");
include($phpheader);
?>
<!DOCTYPE html>
<html manifest="movies.appcache">
<head>
	<title>Movies | List the movies you want to see.</title>
	<?php include($head);?>
	<link rel="stylesheet" type="text/css" href="<?php echo($indexCss); ?>" />
	<script type="text/javascript" src="<?php echo($jsIndex); ?>"></script>
	
</head>
<body id="body">
	<?php include($header);?>
		<div class="content" id="content">
		
		<div id="movieList" class="movieList">
			<div class="listItem"><h3 class="itemContents">Javascript Problems? Try reloading. Otherwise we recomend <a href="http://www.google.com/chrome">Google Chrome</a></h3></div>
		</div>
		
		<div class="listControls">
		<button onClick="clearTable();">Remove All Movies</button>
		</div>
		
		</div>
	<?php include($footer);?>
	
	<script type="text/javascript" src="http://lab.kaiserapps.com/backfun/js/backfunmin.js"></script>
	<script>
	// the Backfun class takes (centerDivId,BackgroundColor) as its arguements
	var back = new Backfun("body", "#ffffff", true, "black");
	
	// add the mouse spawn point
	back.addMouse();
	
	// the start function sets off the animation
	back.start();
	</script>
</body>
</html>
<?php include($phpfooter);?><file_sep><?php 
header('Content-type: text/css');
include("../includes/vars.php");
?>

/* Generic all pages style */
body {
	overflow-y: scroll;
}

html, body{
	width: 100%;
    margin: -5px 0 0 0;
    padding: 5px 0;
	color: <?php echo($color[4]);?>;
}

html {
	height: 100%;
}


.mainContainer {
	width: 860px;
	margin: 10px auto;
	border: 1px solid <?php echo($color[4]);?>;
	border-radius: 25px;
	text-align: center;
	padding: 20px;
	background-color: white;
	box-shadow: 5px 5px 20px #CCC;
}

header {
	width: inherit;
	font-size: 10pt;
}

header h1 {
	font-family: Calibri;
	line-height: 50px;
	font-size: 89px;
	margin: 30px;
	color: <?php echo($color[4]);?>;
}

.center {
	text-align: center;
}

footer {
	text-align: center;
	color: silver;
	margin-top: 20px;
}

h2 {
	color: <?php echo($color[4]);?>;
	text-align: left;
	font-family: Arial;
}

.content {
	text-align: left;
}<file_sep><?php
// Vars for app.
$incFolder = "includes/";
$cssFolder = "css/";
$jsFolder = "js/";

// Include folder vars
$phpheader =	$incFolder . "phpheader.php";
$head =			$incFolder . "head.php";
$header =		$incFolder . "header.php";
$footer =		$incFolder . "footer.php";
$phpfooter =	$incFolder . "phpfooter.php";

$mainCss = $cssFolder . "style_css.php"; // Main Project CSS file
$indexCss = $cssFolder . "app_css.php";

$jsIndex = $jsFolder . "app_js.php";

$tmdb_api_key = "<KEY>";

// CSS Color vars
$color[0] = "#022859";
$color[1] = "#45648C";
$color[2] = "#7C8EA6";
$color[3] = "#CCCCCC";
$color[4] = "#383838";
?><file_sep><?php 
header('Content-type: text/css');
include("../includes/vars.php");
?>

.movieList {
	border: 1px solid <?php echo($color[4]);?>;
	border-radius: 15px;
	background-color: <?php echo($color[1]);?>;
}

.listItem {
	border: 1px solid <?php echo($color[4]);?>;
	border-radius: 10px;
	padding: 10px;
	margin: 10px;
	background-color: white;
}

h3 {
	color: <?php echo($color[4]);?>;
	font-family: Arial;
	line-height: 10%;
}

.search {
	color: <?php echo($color[4]);?>;
	font-family: Arial;
	border: 1px solid black;
	border-radius: 5px;
	padding: 5px;
	margin: 5px;
}

div.search:hover {
	color: white;
	background-color: <?php echo($color[2]);?>;
	cursor: pointer;
}

form {
	margin: 0;
}

.itemControls {
	text-align: right;
}

.movieTitle {
	text-align: left;
}

div.movieImage {
	float: left;
}

img.movieImage {
	width: 92px;
	height: 138px;
	border-radius: 5px;
}

div.movieInfo {
	margin-left: 100px;
}

p.movieDescription {
	font-family: Times New Roman;
	text-align: left;
	min-height: 60px;
}

div.movieControlsAnd {
	margin-bottom: 0;
	color: gray;
	font-family: Arial;
}

span.movieRuntime {
	margin-left: 20px;
}

span.movieSite {
	margin-left: 20px;
}

div.movieControls {
	text-align: right;
}

div.movieData {
	width: 500px;
	float: left;
}

h2 {
	color: <?php echo($color[4]);?>;
	margin: 0;
}

div.listControls {
	margin: 10px;
}

h6.tmdbSearch {
	margin: 5px;
	padding: 5px;
	font-family: Arial;
	font-size: 20px;
}

input.search {
	width: 727px;
}

a.searchButton {
	padding: 5px;
	margin: 5px;
	border-radius: 5px;
	font-family: Arial;
	font-size: 14px;
	color: white;
	cursor: pointer;
	text-decoration: none;
	border: 1px solid <?php echo($color[4]);?>;
	background-color: <?php echo($color[1]);?>;
}

div.posterItem {
	width: 100px;
	padding: 2px;
	padding-top: 6px;
	font-family: Arial;
	border-radius: 5px;
	font-size: 10px;
	text-align: center;
	display: inline-table;
	margin: 4px;
	border: 1px solid <?php echo($color[4]);?>;
}

div.posterItem:hover {
	color: white;
	cursor: pointer;
	background-color: <?php echo($color[1]);?>;
}

div.posterSearch {
	color: <?php echo($color[4]);?>;
	font-family: Arial;
	margin: 5px;
}

div.posterRow {
	padding: 1px;
}

/* Bubles */
#canvas{
    position: absolute;
    z-index: -5;
	height: 100%;
	width: 100%;
    padding: 0;
    margin: -10px 0;
}
<file_sep><meta name="description" content="HTML5 Web App that stores movies you want to see." />
<meta name="keywords" content="Movies, Movie List, Movies I want to see, Movie, Film, TV, Television, Cinema" />
<meta name="author" content="<NAME>" />

<?php 
// determine if working local or server side
if($_SERVER['SERVER_NAME'] == "localhost") { ?>
	<base href="http://localhost/v/movies/" target="_blank" />
	<?php
} else { ?>
	<base href="http://movies.vicary.tk/" target="_blank" />
	<?php 
}?>

<link rel="shortcut icon" href="favicon.ico" />

<link rel="stylesheet" type="text/css" href="<?php echo($mainCss); ?>" />

<?php // Get APIs ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script><file_sep><?php
session_start();

// determine if working local or server side
if($_SERVER['SERVER_NAME'] == "localhost") {
	$mysql_host = "localhost";
	$mysql_database = "movies";
	$mysql_user = "root";
	$mysql_password = "<PASSWORD>";
} else {
	$mysql_host = "mysql17.000webhost.com";
	$mysql_database = "a5390394_movies";
	$mysql_user = "a5390394_movies";
	$mysql_password = "<PASSWORD>";
}


// this block connects to the mysql server and opens my database
$link = new mysqli($mysql_host, $mysql_user, $mysql_password, $mysql_database);
if ($link->connect_error){
    die('Could not connect ('.$link->connect_errno.')'.$link->connect_error);
}

// Debug
$time = microtime();
$time = explode(' ', $time);
$time = $time[1] + $time[0];
$start = $time;

?><file_sep>Movies I want to see
====================

By <NAME>

Mainly to use client side storage.