/* creates hyperlinks for table rows */
function Goto(page) {
	$("tr.highlight").click(function (event) {
		if ($(event.target).is('td')) {
			document.location.href = page;
		}
	});
}

function ViewProduct() {
	$("#product_vimeo").hide();
	$("#product_content").show();
}

function ViewMovie() {
	$("#product_vimeo").show();
	$("#product_content").hide();
}

function ImageSwitch(img) {
	$("#product_image").attr("src", "/img/article/" + img);
}

$(function() {
	/* validate forms */
	$("#validate").validate();
	$.metadata.setType("attr", "validate");
	
	/* logo */
	$("#logo").mouseover(function() {
		$(this).attr("src", "/img/frontend/logo_rollover.png");
		$("#logo_cont").css("background-color", "black");
	}).mouseout(function() {
		$(this).attr("src", "/img/frontend/logo.png");
		$("#logo_cont").css("background-color", "white");
	});
	
	/* color picker */
	$(".color_item").click(function() {
		color = $(this).attr("id");
		$(".color_change").css("color", '#' + color);
		$(".font_item_active").css("background-color", '#' + color);
		$("a").css("color", "#" + color);
	});
	
	/* font picker */
	$(".font_item").click(function() {
		font = $(this).css("font-family");
		$(".font_change").css("font-family", font);
		$(".font_item").css("background-color", "#ffffff");
		$(this).css("background-color", color);
		$(".font_item").removeClass("font_item_active");
		$(this).addClass("font_item_active");
	});
	
	/* upload dialog */
	$(".upload_item").click(function() {
		$("#dialog").dialog({
			bgiframe: true,
			height: 485,
			width: 450,
			modal: true,
			resizable: false,
			draggable: false,
			close: function(ev, ui) { $(this).dialog("destroy"); }
		});
	});
	
	/* random wallpaper */
	$(".random_item").click(function() {
		var url = "/api.php";
		var req = "?section=gallery&action=imagerandom&gallery=1";
		
		$.ajax({
			type: "GET",
			url: url + req,
			dataType: "xml",
			success: function(xml) {
				var foo = $(xml).find('filename').text();
				$("#background").attr("src", "/img/gallery/" + foo);
			},
			error: function() {
				//alert("oops");
			}
		});
	});
	
	/* drag products */
	$(".product_item").draggable({
		revert: true
	});
	
	/* drop products */
	$("#main").droppable({
		drop: function(event, ui){
			id = $(ui.draggable).attr("id");
			
			var url = "/api.php";
			var req = "?section=publisher&action=articleinfo&id=" + id;
			
			$.ajax({
				type: "GET",
				url: url + req,
				dataType: "xml",
				success: function(xml) {
					var title = $(xml).find('title_nl').text();
					var content = $(xml).find('content_nl').text();
					var image = $(xml).find('image').text();
					var vimeo = $(xml).find('vimeo').text();
					
					/* additional images */
					var additional = '';
					for (i = 0; i <= 4; i++) {
						var img = $(xml).find('add_' + i).text();
						if (img != '') {
							additional = additional + "<a href='javascript:void(0);' onclick='javascript:ImageSwitch(\"" + img + "\");'><img src='/img/article/square/thumb/" + img + "' /></a>";
						}
					}
					
					var product_content =
						"<div class='product_image'><img src='/img/article/" + image + "' id='product_image' /></div>" + 
						"<div class='product_content'>" + content + "</div>" + 
						"<div class='product_images'>" + additional + "</div>";
					
					$("#main").empty();
					if (vimeo != '') {
						$("#main").append(
							'<div id="product_vimeo"><div style="height: 330px;">' + '<object width="600" height="330"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=' + vimeo + '&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=' + color + '&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=' + vimeo + '&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=' + color + '&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="600" height="330"></embed></object>' + '</div><div style="text-align: right; margin-top: 5px; font-weight: bold;">' + title + ' - <a href="javascript:void(0);" onclick="javascript:ViewProduct();" class="color_change" style="color: #' + color + ';">view product</a></div></div>');
						
						$("#main").append('<div id="product_content"><div style="height: 330px;">' + product_content + '</div><div style="text-align: right; margin-top: 5px; font-weight: bold;">do demonstrate. To view ' + title + ': the movie, click <a href="javascript:void(0);" onclick="javascript:ViewMovie();" class="color_change" style="color: #' + color + ';">here</a></div></div>');
					} else {
						$("#main").append(product_content);
					}
					
					$("a").css("color", "#" + color);
				},
				error: function() {
					//alert("oops");
				}
			});
		}
	});
	
	/* product carousel */
	var carousel = 0;
	var carousel_max = 1;
	
	/* previous button */
	$("#carousel-prev").click(function() {
		if (carousel > 0) {
			carousel--;
			$(".product_item").css("display", "none");
			$(".group_" + carousel).css("display", "block");
		}
	});
	
	/* next button */
	$("#carousel-next").click(function() {
		if (carousel < carousel_max) {
			carousel++;
			$(".product_item").css("display", "none");
			$(".group_" + carousel).css("display", "block");
		}
	});
});