
$(document).ready(initialize);

var currentActive = null;
var videos = null;
var currentIndex = 0;
var currentSort = "recency";
var currentSearch = "";
var uploader = null;
var submitted = false;
var itemsPerPage = 10;

function initialize() {
	$("#addVideo").fadeOut(0);
	$("#about").fadeOut(0);
	$("#faq").fadeOut(0);
	$("#cover").fadeOut(0);
	loadVideos(currentIndex, currentSort, currentSearch);
	
	$("#sortVideos").hover(
		function() {$(this).css("overflow","visible");},
		function() {$(this).css("overflow","hidden");}
	);
	$("#addShort").hover(
		function() {$(this).find("img").attr("src","_resources/images/addShort_active.png");},
		function() {$(this).find("img").attr("src","_resources/images/addShort.png");}
	);
}

function loadVideos(start, sort, query) {
	$.ajax({
        type: "GET", 
        url: "api/videoFeed.php", 
        data: "&type=json&limit=" + itemsPerPage + "&start=" + start + "&sort=" + sort + "&q=" + query,
        dataType:"json", 
        error: handleError,
        success: handleLoad
    });
}

function handleLoad(data) {
	$("#videosContainer").html('<div style="text-align:center"><img src="_resources/images/ajax-loader_videos.gif" /></div>');
	if(!data.error) {
		videos = data;
		$("#videosContainer").empty();
		$.each(data.videosFeed.videos, function(index, video){
			if(video.type == "ad") {
				$("#videosContainer").append(
					'<div class="ad"><div class="videoItem" id="video_' + video.UID + '"><div class="videoItemContent"><a href="' + video.url + '" target="_blank">' +
					'<img class="videoItemImage" src="' + video.thumbnail + '" alt="' + video.title + '" /></a>' +
					'<div class="videoInfoPane">' +
					'<a href="' + video.url + '" target="_blank"><h2>' + video.title + '</h2>' +
					'<span class="videoCaption">' + video.caption + '</span></a></div>' + 
					'</div></div>'
				);
			} else {
				$("#videosContainer").append(
					'<div class="videoItem" id="video_' + video.UID + '"><div class="videoItemContent"><a href="' + video.url + '" target="_blank">' +
					'<img class="videoItemImage" src="' + video.thumbnail + '" alt="' + video.title + '" /></a>' +
					'<div class="videoInfoPane"><a id="loveIt_' + video.UID + '" href="javascript:loveIt(\'' + video.UID + '\',\'#loveIt_' + video.UID + '\')">' + 
					'<img src="_resources/images/loveItIcon.png" alt="Love it!" /></a>' +
					'<a href="' + video.url + '" target="_blank"><h2>' + video.title + '</h2>' +
					'<span class="videoCaption">' + video.caption + '</span></a>' + 
					'<div class="reportIt"><a id="reportIt_' + video.UID + '" href="javascript:reportIt(\'' + video.UID + '\',\'#reportIt_' + video.UID + '\')">' + 
					'report broken link</a></div>' + 
					'</div>' + 
					'<div class="videoShare"><a href="/' + video.UID + '">weheartshortfilms.com/' + video.UID + '</a><div class="videoShareIt">share it!</div></div></div>'
				);
			}
		});
		$("#videosContainer").append('<div class="clear"></div><div id="paging">');
		if(data.videosFeed.videoStart > 0) {
			$("#videosContainer").append('<a id="previous" href="javascript:page(-itemsPerPage)">< Previous</a>');
		}
		if(data.videosFeed.totalVideos > 10 && currentIndex <= data.videosFeed.totalVideos - 10) {
			$("#videosContainer").append('&nbsp;&nbsp;&nbsp;<a id="next" href="javascript:page(itemsPerPage)">Next ></a>');
		}
		$("#videosContainer").append('</div><div class="clear"></div>');
	} else {
		$("#videosContainer").html("Error: " + data.errorStatus);
	}
	$(".videoItem").hover(function() {
		$(this).children("div:first").animate({ top:"-210px" });
	},function() {
		$(this).children("div:first").animate({ top:"0px" });
	});
}

function page(count) {
	currentIndex = currentIndex + count;
	loadVideos(currentIndex, currentSort, currentSearch);
}

function sort(type) {
	currentSort = type;
	loadVideos(currentIndex, currentSort, currentSearch);
}

function loveIt(videoID, target) {
	$.ajax({
		type: "POST", 
        url: "api/video.php", 
        data: "&action=loveIt&videoID=" + videoID,
        dataType:"json", 
        error: handleError,
        success: null
    });
	$(target).attr("href", "#");
	$(target + " > img").attr("src", "_resources/images/loveItIcon_active.png");
}

function reportIt(videoID, target) {
	$.ajax({
		type: "POST", 
        url: "api/video.php", 
        data: "&action=reportIt&videoID=" + videoID,
        dataType:"json", 
        error: handleError,
        success: null
    });
	$(target).attr("href", "#");
	$(target).html('reported');
}

function submitVideo() {
	var videoUrl = document.forms["formInput"].elements["videoUrl"].value;
	if(videoUrl != "" && videoUrl != null && videoUrl != "video url") {
		$("#result").html('<img src="_resources/images/ajax-loader.gif" />');
		$.ajax({
	        type: "POST", 
	        url: "api/video.php", 
	        data: "action=getVideoFromUrl&videoUrl=" + videoUrl,
	        dataType:"json", 
	        error: handleError,
	        success: function(data) {
	        	handleUpdate(data);
			}
	    });
	} else {
		$("#result").html('<span class="error">Please provide a url</span>');
	}
}

function handleError(object, message, status) {
	//$("#error").html("Error: " + object.responseText + ", " + message + ", " + status);
}

function startUpdate() {
	alert("start");
	return true;
}

function handleUpdate(data) {
	if(!data.error) {
		try {
			upload.destroy();
			upload = null;
		} catch (err) { }
		if(submitted) {
			cancel();
		} else {
			$("#result").html(
				'<div id="inputArea">' +
				'<input type="hidden" name="uid" id="uid" value="' + data.UID + '" />' +
				'<input type="hidden" name="url" id="url" value="' + data.url + '" />' +
				'<input type="hidden" name="id" id="id" value="' + data.ID + '" />' +
				'<input type="hidden" name="type" id="type" value="' + data.type + '" />' +
				'<input type="hidden" name="baseThumbnail" id="baseThumbnail" value="' + data.thumbnail + '" />' +
				'<input type="hidden" name="action" id="action" value="publish" />' +
				'<img id="thumbnailPreview" src="' + data.thumbnail + '" style="max-width:400px;" />' +
				'<div id="uploadThumb">click here to upload a new thumbnail (375 x 210)</div>' +
				'<div class="inputHeader">title</div> <input class="inputClass" type="text" name="title" id="title" value="' + data.title + '" maxlength="45" style="width:375px;" /><br />' +
				'<div class="inputHeader">caption</div> <textarea class="inputClass" name="caption" id="caption" rows="7" cols="45" onkeypress="return imposeMaxLength(this, 255);" >' + data.caption + '</textarea><br />' +
				'<div class="inputHeader">submitted by</div> <input class="inputClass" type="text" name="submitter" id="submitter" value="' + data.submitter + '" maxlength="45" style="width:375px;" /><br />' + 
				'<div class="inputHeader">tags (comma separated)</div> <input class="inputClass" type="text" name="tags" id="tags" value="' + data.tags + '" maxlength="45" style="width:375px;" /><br />' +
				'<div>' +
				'<div style="float:left; width:160px;">' +
				'<div class="inputHeader">runtime (00:00)</div> <input class="inputClass" type="text" name="runtime" id="runtime" value="' + data.runtime + '" maxlength="45" style="width:160px;" /><br />' + 
				'</div><div style="float:left; width:160px; margin-left:55px;">' +
				'<div class="inputHeader">directed by</div> <input class="inputClass" type="text" name="director" id="director" value="' + data.director + '" maxlength="45" style="width:160px;" /><br />' + 
				'</div><div class="clear"></div></div>' +				
				'<div id="inputActions" class="inputHeader"><a href="javascript:cancel()">cancel</a> &nbsp; &nbsp; <a href="javascript:updateVideo(true)">save &amp; close</a></div>' +
				'</div>'
			);
			uploader = new AjaxUpload("uploadThumb",{ 
				action:'api/upload.php', 
				name:'thumbnail',
				data:{ 'videoID': data.UID },
				responseType: "json",
				autoSubmit: true,
				onSubmit : function(file , ext){
		            if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
	                    alert('Sorry that wasn\'t a invalid file extension.  Please only upload .jpg, .png and .gif files.');
	                    return false;
		            } else {
						$("#thumbnailPreview").attr("src", "_resources/images/ajax-loader.gif");
		            }
	    		},
				onComplete: function(file, response) {
					if(!response.error) {
						$("#baseThumbnail").attr("value", "/" + response.thumbnail);
						$("#thumbnailPreview").attr("src", response.thumbnail);
					} else {
						$("#error").html("There was an error uploading your thumbnail");
						$("#thumbnailPreview").attr("src", $("#baseThumbnail").attr("value"));
					}
	    		}
			});
		}
	} else {
		$("#result").html(data.errorStatus);
		data.error = false;
		submitted = false;
	}
}

function updateVideo(close) {
    submitted = close;
	$.ajax({
        type: "POST", 
        url: "api/video.php", 
        enctype: 'multipart/form-data',
        data: $("#formInput").serialize(),
        dataType:"json", 
        error: handleError,
        success: handleUpdate
    });
}

function cancel() {
	$("#videoUrl").attr("value","video url");
	$("#result").empty();
	submitted = false;
	hide("#addVideo");
}

function show(id) {
	if(currentActive != null) {
		$(currentActive).fadeOut(0);
		currentActive = null;
	}
	$("#coverContent").css("display", "block");
	$("#cover").fadeIn(800);
	$(id).fadeIn(800);
	currentActive = id;
	document.onkeypress = keyPressCheck;
}

function hide(id) {
	$("#coverContent").css("display", "none");
	$("#cover").fadeOut(800);
	if(id != null) {
		$(id).fadeOut(800);
	}
	currentActive = null;
	document.onkeypress = null;
}

function home() {
	hide(currentActive);
	loadVideos(0, "recency", "");
}

function search() {
	var q = $("#search").attr("value");
	if(q != "" && q != "search") {
		loadVideos(0, currentSort, q);
	}
}

function imposeMaxLength(Object, MaxLen)
{
	return (Object.value.length <= MaxLen);
}

function keyPressCheck(e) {
    try {
        var key  = (window.event) ? event.keyCode : e.keyCode;
        var Esc = (window.event) ? 27 : e.DOM_VK_ESCAPE;
        if(key==Esc) {
            hide(currentActive);
        }
    } catch (err) { }
}