$(document).ready(function(){
	// add values to create window
	$('#product_bg').css({'height' : '328px'});
	
	$('#prod_content span').css({'width' : '464px', 'height' : '334px'}); // change span width
	$('#prod_content h4').css({'color' : '#fffab6'}); // change content header color
	$('#prod_content p').css({'color' : '#ffffff'});
	
	$('#product_wrapper').css({'height' : '332px'});
		$('#product_bg').css({'overflow' : 'hidden', 'position' : 'absolute'});
		$('#prod_content').css({'overflow' : 'hidden'});
		$('#prod_content li').css({'position' : 'absolute', 'height' : '328px'});
	
	$('#video_btn').addClass('video_btn');
	$('#accuracy').addClass('accuracy_btn');
	
	//-- create menu
	var $ul = $('<ul></ul>').attr('id', 'prod_menu');
	
	$('#product_bg').prepend($ul);
	
	var countItms = $('#prod_content li').length;
	$('#prod_content li').each(function(e){
		var links = $(this).find('span');
		var names = links.attr('class');
		var revOrder = countItms - e ;
		var menulbl = $(this).find('h3');
		var $href = $('<a></a>').attr('href', '#');
		
		$(this).attr('id', names);
		
		$('#prod_content li:not(li:first)').css({'left' : '-680px'});
		$('#prod_content #videoWin').css({'left' : '0px', 'top' : '328px', 'display' : 'none'});
		
		var $li = $('<li></li>').attr('class', names + '_btn').html("<a href='#' class=" + names + ">" + menulbl.text() + "</a>"); // create li and add surrounding href tags
		$('#prod_menu').append($li); //-- generate list items
		
	});
	
	$('#prod_menuBottom li').each(function(){
		var desc = $(this).find('.description');
		var getWidth = $('#prod_menuBottom li span ul').attr('class') + 'px';
		//alert(getWidth);
		
		desc.css({'opacity' : '0', 'display' : 'none', 'position' : 'absolute', 'background-color' : '#f1db51', 'border' : 'solid #b37c23 1px', 'color' : '#906513', 'padding' : '6px 0 6px 0', 'margin' : '0' , 'z-index' : '15', 'text-align' : 'center'});
		//$('.description p').css({'padding' : '0', 'width' : '130px'});
		$('#prod_menuBottom .description ul li').css({'border': 'solid red 0px', 'text-align': 'left', 'width': getWidth});
		
		$(this).find('a').text(" "); // -- remove any text in the links
		
		$(this).attr('onclick', 'return false');
		$(this).mouseover(function(){								   
			var descHight = desc.height();  //--- determine the height of the description;
			var descWidth = desc.width();
			var hovHeight = -20 - descHight; // --- add the set top  distance with negative numbers to move the text up
			var btnWidth = $(this).width();
			// -- align description by dividing the button and the description width and subtracting the two
			var descAlign = Math.round(btnWidth / 2) - Math.round(descWidth / 2);
			desc.css({'top' : '' + hovHeight + '' + 'px', 'left' : '' + descAlign  + '' + 'px', 'display' : 'block'});
			desc.stop().animate({'opacity' : 1}, 'fast');
		});
		
		$(this).mouseout(function(){
			desc.stop().animate({'opacity' : 0}, 'fast', function(){
				desc.css({'display' : 'none'});
			});;
			
		});
	});
	
	var selClass;
	$('#prod_menu a').hover(function(){
		selClass = $(this).attr('class');
		var selContent = $('prod_content li');

		$('#product_bg li').css({'z-index' : 0});
		$('#' + selClass).css({'z-index' : 1})
		$('#' + selClass).stop().animate({'z-index' : 10, 'left' : '0px'}, 500);//.css({'display' : 'block'});
		
	}, function(){
		$('#' + selClass).stop().animate({'z-index' : 0, 'left' : '-680px'}, 500);
	});
	
	$('#prod_menu a').click(function(){
		return false;
	});
	
	$('#prod_menuBottom #video_btn').toggle(function(){
		show_hideMenu('hide');

		$(this).toggleClass("home_btn");
		$(this).next().html('<p>Main Menu</p>');
		
		return false;
	}, function(){
		show_hideMenu('show');
		$(this).toggleClass("home_btn");
		$(this).next().html('<p>View Clip</p>');
		return false;
	});
	
	function show_hideMenu(switchView){
		if(switchView == 'hide')
		{
			$('#prod_menu').slideUp('slow', function(){
				$('#videoWin').css({'display' : 'block'});
				$('.videoWin').css({'display' : 'block'});
				$('#videoWin').animate({'left' : '0px', 'top' : '0px'}, 'slow');
				
				var clip_location = $('#video_btn').attr('href');
				//alert(clip_location);

				$(".videoWin").jqmedia({
					src: clip_location,
					width: 450,
					height: 290,
					wmode: "transparent",
					scriptAccess: "sameDomain",
					quality: "high",
					alt: "alternative content"
				});
			});
		}else{

			$('#videoWin').animate({'top' : '328px'}, 'slow', function(){
				$('.videoWin').css({'display' : 'none'}).empty();
				$('#prod_menu').slideDown('slow');
			});
		}
	};
	
});