$(function() {
	$("#navigation li").addClass("hoverable").mouseover(function() {
		$(this).children("ul").css({
			'top': $("#navigation").height(),
			'left': $(this).position()['left'] - $(this).children("ul").width()/2 + $(this).width()/2
		});
	}).css('cursor','pointer').click(function(){ window.location.href=$(this).find("a:first").attr('href'); });;
});
var Videos = {
	items: [
		{title: "Argyle Pink Diamonds", videoID: "29242815"},
		{title: "Hearts on Fire", videoID: "29242943"},
		{title: "Hearts on Fire Bridal", videoID: "29243115"}
	],
	current: 0,
	embed: '<iframe src="http://player.vimeo.com/video/{{video_id}}?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" width="500" height="375" frameborder="0"></iframe>',
	launch: function() {
		$("#video_display_panel").remove();
		var display = $("<div id='video_display_panel'><div class='inner1'><div class='inner2'><div class='inner3'><div class='titlebar'><a class='close'>Close</a></div><div class='player'></div><div class='videos'></div></div></div></div></div>");

		for(var m in Videos.items) {
			$("<a></a>").html(Videos.items[m].title).attr("rel",m).appendTo(display.find(".videos"));
		}
		
		// back/next buttons
		$("<a class='back' rel='back'>Previous Video</a>").prependTo(display.find(".videos"));
		$("<a class='next' rel='next'>Next Video</a>").prependTo(display.find(".videos"));
		
		display.find("a.close").click(function() {
			display.remove();
		})
		display.find(".videos a").click(function() {
			Videos.play(this.getAttribute("rel"));
		})
				
		display.appendTo(document.body);
		display.css({
			'top': $(window).height()/2-display.height()/2+$(window).scrollTop(),
			'left': $(window).width()/2-display.width()/2+$(window).scrollLeft()
		});
		Videos.play(0);
	},
	play: function(index) {
		// back/next
		if(index == 'back') {
			index = Videos.current-1;
		} else if(index == 'next') {
			index = Videos.current+1;
		}
		// loop
		if(index < 0) {
			index = Videos.items.length-1;
		} else if(index > Videos.items.length-1) {
			index = 0;
		}
		Videos.current = index;
		var video = Videos.items[index];
		var display = $("#video_display_panel");
		display.find(".videos a").removeClass("playing");
		display.find(".videos a[rel="+index+"]").addClass("playing");
		
		display.find(".player").html(Videos.embed.replace("{{video_id}}",video.videoID));
	}
}