/**
 * jQuery dropdown plugin
 * Copyright(c) 2009 Ivan Vovnenko
 * Corporate Voice
 * options:
 * {
 * 		products: products map (window.products)
 * 		click: click function
 *  	select(optional) -initialy selected element
 * }
 */
$.fn.dropDownMenu = function(options) {
	  settings = jQuery.extend({
	  }, options);
    return this.each(function() {
    	if(!$('.dropDownMenu',this).length){
    		if(typeof settings.products=='undefined'||(typeof settings.click!='function')){
    			throw 'dropDownMenu ERROR: products || click not correct';
    		}
    		var click = settings.click;
    		$menu = $("<div class='dropDownMenu' ></div>");
    		$a= $("<a href='#' ><div>Choose a Product</div></a>").addClass('dropDownLink');
    		var $ul = $("<ul />");
    		for (var productId in settings.products) {
    			product = settings.products[productId];
    			var $li = $("<li><a href='#"+productId+"'>" + product.name + "</a></li>");
    			$li.find('a').click(function () {
    					$dropDownMenu = $(this).parents('.dropDownMenu');
    					$dropDownMenu.removeClass('dropDownMenuOpened');
    					/*$dropDownMenu.removeClass('opened');    				
    					setTimeout (function() {
    						$('.dropDownMenu').removeClass('closed');
    					},20);*/

    				$dropDownMenu.find("a:first div").html('').html($(this).html()).vAlign();
    				click.call(this);      				
    				return false;
				});    			
    			$li.appendTo($ul);
    		}
			$('li:last-child',$ul).addClass('last');
    		/*$menu.hover(function() {
    			$(this).addClass('opened');
			},function(){
				$(this).removeClass('opened');
			}); */
			$menu.hoverClass('dropDownMenuOpened');
    		$(this).append($menu.append($a).append($ul));   
			$a.find('DIV').vAlign();
    	}
		if(settings.select){
			$('.dropDownMenu ul li a[href$="'+settings.select+'"]',this).click();
		}
    });
};

/**
 * create products dropdown for compare products page.
 * @param products - all products map <br/><code>{ 'product1Id' : product1,<br/> 'product2Id' : product2, .... }</code> 
 * @return returning dropdown div wrapped with jquery
 */
function createProductsDropDown(products) {
	var dropdownWrapper = $("<div class='dropdown-wrapper'/>");
	var dropdownLink = $("<a href='' class='dropdown-link'><span>&nbsp;</span></a>");
	var dropdownProducts = $("<div class='dropdown-products hidden'><div class='dropdown-cap'></div></div>");
	var dropdownContent = $("<div class='dropdown-content'></div>");
	var ul = $("<ul />");
	for (var productId in products) {
		product = products[productId];
		var li = $("<li>" + product.name + "</li>");
		li.attr('productId',productId); 
		li.click( function() {
			var product = products[$(this).attr('productId')];
			dropdownProducts.addClass('hidden');
			$("span",dropdownLink).html(product.name);
			var parentTd = dropdownWrapper.parent();
			if(parentTd){
				column = parentTd.parent().children().index(parentTd);
				$("#compareTable tr").find("td:eq(" + column + ")").each(function(row) {
					
					if(row==0){
						//First row. Show product image and close button.						
						$(this).html('');
						var $a = $('<a href="#" class="close"><span class="hidden">Close</span></a>');
						var $img = $('<img src="'+product.thumbURL+'"/>');
						$(this).append($a);
						$(this).append($img);
						$img.reflect( {
							height :.25,
							opacity :.25
						});
						$a.click(function() {
							// Check how many products left. Delete only if >2
							if($('#compareTable a span.hidden').size()>2){
								var recalculatedColumn = parentTd.parent().children().index(parentTd);
								deleteColumn(recalculatedColumn);
							}
							return false;
						});
						
					}else if(row==2){
						//Third row. Show Ages info						
						$(this).html(product.ages);
						
					}else if(row==3){
						// Forth row. Show Symptoms
						$(this).html('');
						var ul = $("<ul />");
						for(i=0;i<product.symptoms.length;i++){
							ul.append("<li>"+product.symptoms[i]+"</li>");
						}
						ul.appendTo($(this));
						
					}else if(row==4){
						//Sixth row. Show dosage.
						$(this).html(product.dosage);
						
					}else if(row==5){
						//Seventh row. Show where to find info.
						$(this).html(product.whereToFind);
					}
				});				
			}

		});
		li.hover( function() {
			$(this).addClass('selected');

		}, function() {
			$(this).removeClass('selected');
		});
		li.appendTo(ul);
	}
	ul.appendTo(dropdownContent);
	dropdownContent.append("<div class='ClearFloat'></div>");
	dropdownContent.appendTo(dropdownProducts);
	dropdownProducts.append("<div class='dropdown-bot'></div>");
	dropdownLink.appendTo(dropdownWrapper);
	dropdownProducts.appendTo(dropdownWrapper);

	dropdownLink.mouseover( function() {
		$(this).siblings('.dropdown-products').removeClass('hidden');
	});
	dropdownProducts.mouseover( function() {
		$(this).removeClass('hidden');
	});

	dropdownProducts.mouseout( function() {
		$(this).addClass('hidden');
	});
	
	dropdownWrapper.selectProduct=function(productId){
		this.find('li[productId="'+productId+'"]').click();
	}

	return dropdownWrapper;
}

/**
 * Creates dropdown menues in the <code>#compareTable</code> 
 */
function createDropDownMenus(){
	var productOrder = [];
	if(window.location.hash.match(/^#/)){
		var ids = window.location.hash.substring(1).split(",");
		for(var i=0;i<ids.length;i++){
			productOrder.push('#'+ids[i]);
		}
	}else{
		productOrder = ['#ClaritinTablets','#ClaritinEye','#ClaritinD24Hour','#Claritin12HourRediTabs'];
	}
	var dropDowns = [];
	$("#compareTable tr:eq(1) td:gt(0)").each(function(i) {
		$(this).html('');		
		/*$menu = createProductsDropDown(window.products);
		$(this).append($menu);
		$menu.selectProduct(productOrder[i]);
		dropDowns[i]=$menu;*/
		$(this).dropDownMenu({products:window.products,click:menuClick,select:productOrder[i]});
	});	
	return dropDowns;
}

/**
 * Delete column from the <code>#compareTable</code>
 * @param columnToDelete column number to delete - 0..3
 */
function deleteColumn(columnToDelete){
	$("#compareTable tr").find("td:eq(" + columnToDelete + ")").remove();
	$("#compareTable tr").append("<td>&nbsp;</td>");
	//var menuCell = $("#compareTable tr:eq(1) td:eq(4)");
	//menuCell.html('');
	//menuCell.append(createProductsDropDown(window.products));
	
	var addCell = $("#compareTable tr:eq(0) td:eq(4)").html('&nbsp;');
	var $addProduct = $('<a href="#" class="addProduct">Add Product &nbsp; &nbsp; <img src="/img/btn.compare.add.gif" /></a>');
	addCell.append($addProduct);
	$addProduct.click(function() {
		var parentTd=$(this).parent();
		var currentColumn = parentTd.parent().children().index(parentTd);
		window.menus[currentColumn]=createProductsDropDown(window.products);
		$("#compareTable tr:eq(1) td:eq("+currentColumn+")").html('').dropDownMenu({products:window.products,click:menuClick});
		parentTd.html('&nbsp;');		
		return false;
	});
	//menuCell.append(createProductsDropDown(window.products));

}

function menuClick(){
	try{
		var product = window.products[this.href.split('#')[1]];
		//dropdownProducts.addClass('hidden');
		//$("span",dropdownLink).html(product.name);
		var $dropDownMenu = $(this).parents('.dropDownMenu');		
		var parentTd = $dropDownMenu.parent();
		if(parentTd){
			column = parentTd.parent().children().index(parentTd);
			$("#compareTable tr").find("td:eq(" + column + ")").each(function(row) {
				
				if(row==0){
					//First row. Show product image and close button.						
					$(this).html('');
					var $a = $('<a href="#" class="close"><span class="hidden">Close</span></a>');
					var $img = $('<img class="compareProductImage" src="'+product.thumbURL+'"/>');
					$(this).append($a);
					$(this).append($('<a href="'+product.id+'.jspa"></a>').append($img));
					$img.reflect( {
						height :.25,
						opacity :.25
					});
					$a.click(function() {
						// Check how many products left. Delete only if >2						
						var menusLeft = $('#compareTable .compareProductImage').size();
						if(menusLeft>2){							
							var recalculatedColumn = parentTd.parent().children().index(parentTd);
							deleteColumn(recalculatedColumn);
							if(menusLeft==3){
								$('#compareTable .close').addClass('hidden');
							}
						}
						return false;
					});
					
				}else if(row==2){
					//Third row. Show Ages info						
					$(this).html(product.ages);
					
				}else if(row==3){
					// Forth row. Show Symptoms
					$(this).html('');
					var ul = $("<ul />");
					for(i=0;i<product.symptoms.length;i++){
						ul.append("<li>"+product.symptoms[i]+"</li>");
					}
					ul.appendTo($(this));
					
				}else if(row==4){
					//Sixth row. Show dosage.
					$(this).html(product.dosage);
					
				}else if(row==5){
					//Seventh row. Show where to find info.
					$(this).html(product.whereToFind);
				}
			});				
		}
		var menusLeft = $('#compareTable .compareProductImage').size();
		if(menusLeft==3){
			$('#compareTable .close').removeClass('hidden');
		}
	}catch(e){alert(e)}
}

/**
 * This code is being executed on document/jquery are ready. Assuming window.products!='undefined';
 */
$(document).ready( function() {
	
	var prodIds = [];
	for(var prodId in window.products){
		prodIds.push(prodId);
	}
	window.menus = createDropDownMenus();
	$("a.nextPageBtn").click(function() {
		$("#compareTable tr:eq(1) td:gt(0)").each(function(){
			try{
				$(this).dropDownMenu({select:'#'+prodIds[Math.floor(prodIds.length*Math.random())]});
			}catch(e){
				$.log(e);
			}
		});
		return false;
	});
	
	//$('DIV.dropDownMenu A.dropDownLink DIV').vAlign();
});