var shader_gallery = {}

shader_gallery.init = function(){
	shader_gallery.bind()
}

shader_gallery.bind = function(){
	$("#new-shader").click(new_shader)
	
// 	$("#shader-id")
//	$("#fetch-info")
	$("#fetch-all").click(function(){
		ShaderAPI.all(load_shaders)
	})
	$("#fetch-latest").click(function(){
		ShaderAPI.latest(load_shaders)
	}).trigger("click")
// 	$("#fetch-next-page")
// 	$("#fetch-history")

	$("#save-shader").click(save_shader)

	ShaderAPI.list_users(function(err, users){
		var $el = $("#pick-user").empty()

		var $option = $("<option>")
		var username = "users"
		$option.val("LATEST").html(username)
		$el.append( $option )

		users.sort(function(a,b){
			return a.username < b.username ? -1 : a.username > b.username ? 1 : 0
		}).forEach(function(user){
			var $option = $("<option>")
			var username = user.username
			$option.val(username).html(username)
			$el.append( $option )
		})
	});
	
	$(document).on("change", "#pick-user", function(){
		var name = $(this).val()
		if (name == "LATEST") {
			ShaderAPI.latest(load_shaders)
		}
		else {
			ShaderAPI.username(name, load_shaders)
		}
	})
	$(document).on("click", ".shader", function(){
		run_shader( $(this).data("shader") )
	})
}

function new_shader(opt){
	opt = opt || {}
	shader_id_root = null
	run_shader({
		id: "",
		shader_id: "",
		image_url: $("#url").val(),
		script: opt.shader || "",
		name: opt.name || ""
	})
}
function run_shader(shader_object){
	console.log(shader_object)
	shader_id_root = shader_object.shader_id
	if ($("#persist-image:checked").length) {
		var new_w = parseInt(shader_object.width, 10)
		var new_h = parseInt(shader_object.height, 10)
		$("#url").val( shader_object.image_url )
		if (new_w && new_h) {
			preserve_dimensions = true
			actual_w = w = new_w
			actual_h = h = new_h
		}
		load()
	}
	$("#shader").val(shader_object.script)
	$("#shader-id").val(shader_object.id)
	$("#shader-name").val( shader_object.name || "")
	shader_build()
}
function load_shaders(err, shaders){
	var $el = $("#shader-gallery").empty()

	for (var i in shaders) {
		var $shader = display_shader(shaders[i])
		$el.append( $shader )
	}
	if (firsttime) {
		firsttime = false
		run_shader(shaders[0])
	}
}
function display_shader(shader_object){
	var $shader = $("<div>").addClass("shader")
	$shader.data("shader", shader_object)
	$shader.data("id", shader_object.id)
	var html = shader_gallery_template
	for (var field in shader_object) {
		html = html.replace("{" + field + "}", shader_object[field])
	}
	$shader.html(html)
	shader_object.id && $shader.data("id", shader_object.id)
	return $shader;
}