sf.gridView = km.createModule(function (base, exports) {

	var currentMediaItem = null,
        $mediaGrid = null,
		$playlistGrid = null,
		$type = null,
        currentMediaItems = null,
		currentPlaylistItems = null;


	function mediaItemToHtml(mediaItem) {
		var htmlStr = "";
		htmlStr += '<li class="gridItem ' + mediaItem.id + '" id="media-' + mediaItem.id + '">';
		htmlStr += '<a href="javascript:void(0);">';
		if (mediaItem.type !== "image") {
			htmlStr += '<span class="thumbOverlay">&nbsp;</span>';
		}
		htmlStr += '<span class="left playlistItemThumb">';
		htmlStr += '<span class="playlistItemThumbContainer">';
		htmlStr += '<img src="' + mediaItem.thumbnail + '" alt="' + mediaItem.shortTitle + '" />';
		htmlStr += '</span>';
		htmlStr += '</span>';
		htmlStr += '<span class="right playlistItemDetails">';
		htmlStr += '<b>' + mediaItem.shortTitle + '</b>';
		htmlStr += '<span class="desc">' + mediaItem.shortDescription + '</span>';
		htmlStr += '<span class="meta">' + mediaItem.category + ' / ' + mediaItem.duration + '</span>';
		htmlStr += '</span>';
		htmlStr += '<span class="clear"></span>';
		htmlStr += '</a>';
		htmlStr += '</li>';
		return htmlStr;
	}

	function getDomMediaItemFromTarget(target, callback) {
		(function again(target) {
			if (target.id) {
				callback(target);
			} else {
				again(target.parentNode); // check the parent to see if it matches.
			}
		}(target));
	}

	function mediaItemFromTarget(eventTarget) {
		var mediaItem = false;
		getDomMediaItemFromTarget(eventTarget, function (domItem) {
			mediaItem = km(currentMediaItems).get({
				id: $(domItem).attr("id").replace("media-", "")
			})[0];
		});
		return mediaItem;
	}

	function mediaItemFromId(id) {
		var mediaItem = false;
		mediaItem = km(currentMediaItems).get({
			id: id
		})[0];
		return mediaItem;
	}

	function selectItem(mediaItem) {
		currentMediaItem = mediaItem;
		$mediaGrid.find(".active").removeClass("active");
		$("#media-" + mediaItem.id).children("a").addClass("active");
		
		base.dispatch("mediaItemClicked", mediaItem, $type);
	}

	function selectPlaylistItem(playlistItemId) {
		//currentMediaItem = mediaItem;
		$playlistGrid.find(".active").removeClass("active");
		$("#" + playlistItemId).children("a").addClass("active");
		base.dispatch("playlistItemClicked", playlistItemId.replace("media-", ""));
	}

	function assignClickEvents() {
		$mediaGrid.click(function (event) {
			selectItem(mediaItemFromTarget(event.target));
		});
		$playlistGrid.click(function (event) {
			getDomMediaItemFromTarget(event.target, function (domItem) {
				selectPlaylistItem(domItem.id);
			});
		});
	}

	exports.init = function () {
		$mediaGrid = $("#mediaGrid");
		$playlistGrid = $("#playlistGrid");
		$type = $("#media-type").val();
		assignClickEvents();
	};

	exports.render = function (mediaItems) {
		currentMediaItems = mediaItems;
		$mediaGrid.html("");
		$(currentMediaItems).each(function (index, item) {
			$mediaGrid.append(mediaItemToHtml(item));
		});
		//check hash
		if (window.location.hash) {
			var hash = window.location.hash.replace('#', ''),
				mediaItem = mediaItemFromId(hash);
			selectItem(mediaItem);
		} else {
			selectItem(currentMediaItems[0]);
		}
	};

	exports.renderPlaylist = function (mediaItems) {
		currentPlaylistItems = mediaItems;
		$playlistGrid.html("");
		$(currentPlaylistItems).each(function (index, item) {
			$playlistGrid.append(mediaItemToHtml(item));
		});
	};

	exports.selectNextItem = function () {
		var index = 0;
		for (index = 0; index < currentMediaItems.length; index += 1) {
			// Find the current item
			if (currentMediaItems[index].id === currentMediaItem.id) {
				// if the current item is the last item
				if (index === currentMediaItems.length - 1) {
					selectItem(currentMediaItems[0]); // then select the first item
					return;
				} else {
					selectItem(currentMediaItems[index + 1]); // otherwise select the item after it.
					return;
				}
			}
		}
	};

	exports.selectPrevItem = function () {
		var index = 0;
		for (index = 0; index < currentMediaItems.length; index += 1) {
			// Find the current item
			if (currentMediaItems[index].id === currentMediaItem.id) {
				// if the current item is the first item
				if (index === 0) {
					selectItem(currentMediaItems[currentMediaItems.length - 1]); // then select the last item
					return;
				} else {
					selectItem(currentMediaItems[index - 1]); // otherwise select the item before it.
					return;
				}
			}
		}
	};

	exports.showLoading = function () {
		$("#loader-gif").show();
	};

	exports.hideLoading = function () {
		$("#loader-gif").hide();
	};

	exports.getFilterObject = function () {
		// get from the current page we are on.
		var filter = {
			type: $("#media-type").val(),
			category: $("#media-category").val(),
			representee: $("#media-representee").val()
		};
		return filter;
	};
});