$(document).ready(function(){
	ENtab.init();
	$('#tabEnter').click(function(){
		$(".kidBannerDefault").slideUp('slow', function(){			
			//$(this).remove();
		});
		ENtab.settings.defaultTabStatus = 'maximize';
		ENtab.tamplate('default');
	});
});

ENtab = { 
	settings: {
		defaultTab: 0,
		selsectedTab: 0,
		editTab: false,
		tabOnce: true,
		formEle: '',
		defaultTabStatus: 'maximize' //minimize maximize
	},
	init: function(){
			ob = ENtab;
			conf = $.extend(ob.settings, options);			
			ob.loadData('action=kid_basket','json','');			
	},
	tamplate: function(type){	
		var tabHeading = '';
		var tabData = '';	
		
		

		if(conf.data.length > 0 && type == 'default'){
			for (i=0;i<conf.data.length;i++){
				babyKidSex = conf.data[i].kid_sex;
				if(babyKidSex == 'Girl'){
					sexLabel = ' | Pige';
				}else if(babyKidSex == 'Boy'){
					sexLabel = ' | Dreng';
				}else{
					sexLabel = '';
				}
				conf.defaultTab = i;
				tabHeading += '<li class="tab" rel="tab'+i+'"><div class="rightCorner"><div class="kidDetail baby'+conf.data[i].kid_sex +'"><span class="kidName"><a href="javascript: void(0);" class="editTab">'+conf.data[i].kid_name +'</a></span><span class="kidAge">'+conf.data[i].kid_age +sexLabel+'</span><span class="kidBasket">'+conf.data[i].kid_total_product +' gaver i alt</span></div></div></li>';
				tabData += '<div class="tabContent" id="tab'+i+'" rel="kids_id:'+conf.data[i].kids_id+'"></div>';
			}

			$(conf.selector).append('<div class="container"><div class="tabHeading"><ul>'+tabHeading+'</ul></div><div class="tabData"><div class="topRound"><div class="bottomRound"><div class="tabLayout">'+tabData+'</div></div></div><div class="tabHelp"><a class="tabHelpLink" href="tab_help.php?height=220&width=408">a</a></div><div class="tabMinimize"></div><div class="tabClose"></div></div></div>');

			$(".tabHeading li:first").addClass('tabActive');
			//$(".tabContent:first").css({display: 'block'});
			$(".tabHeading").append("<div class='addNewTab'><div class='rightCorner'><div class='addIcon'>new</div></div></div>");
			
			ob.setNewTabPos();

			$('.tabContent').each(function(){
				ob.LoadBlankContent($(this), true);
			});
			ob.showTool(0);			
		} else {
			conf.defaultTab = conf.defaultTab+1;
			if(type == 'default'){
				$(conf.selector).append('<div class="container"><div class="tabHeading"><ul>'+tabHeading+'</ul></div><div class="tabData"><div class="topRound"><div class="bottomRound"><div class="tabLayout">'+tabData+'</div></div></div><div class="tabHelp"><a class="tabHelpLink" href="tab_help.php?height=220&width=408">a</a></div><div class="tabMinimize"></div><div class="tabClose"></div></div></div>');
			}
			tabHeading += '<li style="display: none;" class="tab" rel="tab'+conf.defaultTab+'"><div class="rightCorner"><div class="kidDetail gender"><span class="kidName"><a class="editTab" href="javascript: void(0);">Intet navn</a></span><span class="kidAge"></span><span class="kidBasket"></span></div></div></li>';
			tabData += '<div style="display: none;" class="tabContent" id="tab'+conf.defaultTab+'"></div>';

			$('.tabHeading ul').append(tabHeading);
			$('.tabLayout').append(tabData);

			if(type == 'default'){
				$(".tabHeading li:first").addClass('tabActive');
			//$(".tabContent:first").css({display: 'block'});
			$(".tabHeading").append("<div class='addNewTab'><div class='rightCorner'><div class='addIcon'>new</div></div></div>");			
			}
			
			ob.setNewTabPos();

			//ob.LoadBlankContent($("#tab"+conf.defaultTab));
			ob.LoadForm($("#tab"+conf.defaultTab));
		}	
		

		$(".tab, .addNewTab, .tabMinimize, .tabClose, .editTab, .tabHelpLink").unbind("click");
		ob.bindEvent('default');		
	},
	setNewTabPos: function(){
		ob.tabActive($("li[rel='tab"+conf.defaultTab+"']"));
	},
	setNewTabPosTmp: function(){
		addNewTabPos = 0;
		$(".smallTab").removeClass('smallTab');
		$('.tabHeading li').each(function(){
			addNewTabPos = addNewTabPos+$(this).outerWidth();
		});
		if(addNewTabPos > '700'){
			
			addNewTabPos = 0;
			$('.tabHeading li').each(function(n){
				if(n != conf.selsectedTab){
					$(this).find('div[class="rightCorner"]').addClass('smallTab');
				}
				addNewTabPos = addNewTabPos+$(this).outerWidth();
			});
		}
		$(".addNewTab").animate({left: addNewTabPos+'px'}, 'slow', function(){
			$("li[rel='tab"+conf.selsectedTab+"']").fadeIn('slow');
			$("#tab"+conf.selsectedTab).fadeIn('slow');
			
		});
	},
	LoadBlankContent: function(ele, basket){	
		num = parseInt(ele.attr('id').replace('tab',''));
		ele.html('');
		tabHtml = '';
		for (i=0;i<24;i++){
			tabHtml += '<div class="productBlock" id="block_'+num+'_'+(i+1)+'"><div class="blockIndex">'+(i+1)+'.)</div><div class="blockImage"><img src="images/no-img.png"></div><div class="blockDetail"><div class="prodName">---</div><div class="prodDate"></div></div><div style="clear: left"></div></div>';
			if((i+1)%4 == 0){
				tabHtml += '<div class="productBlockClear"></div>';
			}
		}
		ele.append(tabHtml);
		ob.LoadContent(ele, num, basket);
	},
	LoadContent: function(ele, num, basket){		
		//alert(num);
		//alert(conf.data[num].kid_basket);		
		if(basket){			
			for (n=0;n<conf.data[num].kid_basket.length;n++){
				//alert(conf.data[num].kid_basket[n].product_id);

				var prodFullName = (conf.data[num].kid_basket[n].productName);
				//alert(prodFullName);
				var prodName = prodFullName;				
				var prodImage = (conf.data[num].kid_basket[n].product_image);
				var prodPrice = (conf.data[num].kid_basket[n].product_price);
				var prodlen = prodName.length;

				if(prodlen > 15){
					prodName = prodName.substring(0,15)+"...";
				}
				
				$('#block_'+num+'_'+(n+1)).find("div[class='blockImage']").html('<img src="images/'+prodImage+'" width="45" height="45"><div class="removeProduct" title="slet" rel="'+conf.data[num].kid_basket[n].product_id+'"></div>');

				//$('#block_'+num+'_'+(n+1)).find("div[class='prodName']").html("<div class='toolKit'>"+prodFullName+"</div>"+prodName);
				$('#block_'+num+'_'+(n+1)).find("div[class='prodName']").attr('title', prodFullName).html(prodName);

				$('#block_'+num+'_'+(n+1)).find("div[class='prodDate']").html('skift dato');
			}
			ele.find(".removeProduct").click(function(){
				block_id = $(this).parent().parent().attr('id');
				//alert($(this).parent().parent().attr('id'));
				ob.removeProduct($(this).attr('rel'), block_id);
			});

			ele.find(".prodName").hover(function(e) {
				$(this).find('div[class="toolKit"]').css({bottom: '-25px', right: '-100px'}).fadeIn("slow");
			}, function(){
				$(this).find('div[class="toolKit"]').fadeOut("slow");
			});
			if(conf.data[num].kid_basket.length >= 24 && conf.data[num].kidswrap != '1'){
				$(".container").append("<div id='messageTool"+num+"' class='messageTool'><div class='message message1'>Du har nu valgt 24 kalendergaver til Abigali Larsen og de er automatisk tilføjet indkøbskurven. Du kan stadig slette og skifte data, for hver kalendergav.</div><div class='message message2'>Skal vi pakke de 24 gaver flot ind? Det koster 95 kr.</div><div class='message message3'>Ja Tak<br> klik Her</div></div>");

				$(".message3").click(function(){
					//alert('Ja Tak klik Her');
					kids_id = $("#tab"+conf.selsectedTab).attr('rel');
					//alert(kids_id);
					ob.loadData('action=kid_shipping&kids_id='+kids_id, 'html', '');
				});
			}
		}
		ob.blinkEfect(ele);
	},
	removeProduct: function(id, block_id){
		if(confirm("Vil du slette dette barns pakkekalender?")){
			ob.loadData('action=remove_kid_product&id='+id, 'html', '');
		}
	},
	LoadForm: function(ele){
		//ele.append("this is default form");
		ob.loadData('action=LoadForm','html', ele);
	},
	blinkEfect: function(ele){
		ele.find("div[class='productBlock']").each(function(){
			var randomnumber=(Math.floor(Math.random()*11))*100;
			$(this).delay(randomnumber).fadeIn("slow").fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
		});	
	},
	formValidation: function(){
		error = 0;
		errorMassege = '';
		if($("#tab"+conf.selsectedTab).find('input[name="name"]').val() == ''){
			error = 1;
			errorMassege += 'Please Select Name \n';
		}
		if($("#tab"+conf.selsectedTab).find('select[name="dobDate"]').val()== ''){
			error = 1;
			errorMassege += 'Please Select Date \n';
		}
		if($("#tab"+conf.selsectedTab).find('select[name="dobMounth"]').val()==''){
			error = 1;
			errorMassege += 'Please Select Month \n';
		}
		if($("#tab"+conf.selsectedTab).find('select[name="dobYear"]').val()==''){
			error = 1;
			errorMassege += 'Please Select Year \n';
		}
	
		
		if(error == 0){
			return true;	
		}else{
			alert(errorMassege);
			return false;	
		}
		

	},
	bindEvent: function(type){
		switch(type) {
			case 'form':	
				$(".buttons").click(function(){
				conf.formEle = '';
				//alert($(this).attr('rel'));
					if($(this).attr('rel') == 'Cancel'){
						ob.tabClose();
					}else{
						if(ob.formValidation()){							
							/*formserialize = 'name='+$('input[id="kidName"]').val();
							formserialize += '&dobDate='+$('select[id="kidDobDate"]').val();
							formserialize += '&dobMounth='+$('select[id="kidDobMounth"]').val();
							formserialize += '&dobYear='+$('select[id="kidDobYear"]').val();
							formserialize += '&age='+$('input[id="kidAge"]').val();
							formserialize += '&kidSex='+$('input[id="kidSex"]').val();
							alert(formserialize);*/
							kidFormData = 'action=addNewKid&'+$('form[name="addKids"]').serialize();
							//kidFormData = 'action=addNewKid&'+formserialize;
							ob.loadData(kidFormData, 'html', $(this));
						}
					} 						
				});
			break;	
			case 'default':
			default:
				$(".tab").click(function(){
					ob.tabActive($(this));
				});

				$(".addNewTab").click(function(){
					//$(".tabContent").css({display: 'none'});
					//alert(conf.defaultTab)
					//if(conf.defaultTab <= 10) {
						if(conf.formEle == ''){
							ob.tamplate('addNewTab');
						}else{
							ob.tabActive($('li[rel="tab'+conf.formEle+'"]'));
						}
					//}
				});
				$(".addNewTab").mouseup(function(){
					//alert("up");
				});
				$('.tabMinimize').click(function(){
					ob.tabMinimize();
				});
				$('.tabClose').click(function(){
					ob.tabClose();
				});
				$('.tabHelpLink').click(function(){
					return lBox($(this));					
				});
				$(".editTab").click(function(){
					ob.editTab();
				});
			break;	
		}		
	},	
	editTab: function(){
		conf.editTab = true;
	},
	tabMinimize: function(){
		if(conf.defaultTabStatus == 'maximize'){
			conf.defaultTabStatus = 'minimize';
			$('.tabMinimize').css({backgroundPosition: '0 100%'});
			$(".tabLayout").slideUp("slow");
		}else{
			conf.defaultTabStatus = 'maximize';	
			$('.tabMinimize').css({backgroundPosition: '0 0%'});
			$(".tabLayout").slideDown("slow");
		}
	},
	tabClose: function(){
		kids_id = $("#tab"+conf.selsectedTab).attr('rel');
		if(confirm("Vil du slette dette barns pakkekalender?")){	
			ob.loadData('action=remove_kid&kids_id='+kids_id, 'html', '');
		}	
	},
	tabActive: function(el){		
		conf.selsectedTab = parseInt(el.attr('rel').replace('tab',''));
		//alert(conf.selsectedTab);
			$(".tabContent").css({display: 'none'});
			el.nextAll().removeClass('tabActive');			
			el.prevAll().removeClass('tabActive');	
			el.addClass('tabActive');
			if(conf.tabOnce){
			if(conf.defaultTabStatus == 'maximize'){
				conf.defaultTabStatus = 'minimize';
				$('.tabMinimize').css({backgroundPosition: '0 0'});
				$(".tabLayout").slideDown("slow");				
			}else{
				conf.defaultTabStatus = 'minimize';
				$('.tabMinimize').css({backgroundPosition: '0 100%'});
				$(".tabLayout").slideUp("slow");
			}
				conf.tabOnce = false;
			}

			$("#"+el.attr('rel')).css({display: 'block'});
			
			ob.showTool(conf.selsectedTab);	
			if(conf.editTab){	
				kids_id = $("#tab"+conf.selsectedTab).attr('rel');
				$(".tabEditForm").remove();
				$("#tab"+conf.selsectedTab).prepend("<div class='tabEditForm' style='display: none;'></div>");
				ob.loadData('action=edit_kid&kids_id='+kids_id, 'html', $(".tabEditForm"));
				conf.editTab = false;
			}

			ob.setNewTabPosTmp();
	},
	updateKid: function(ele){		
		if(ob.formValidation()){
			kidFormData = ele.find('form').serialize();
			//alert(kidFormData);
			kids_id = $("#tab"+conf.selsectedTab).attr('rel');
			//alert(kids_id);
			ob.loadData('action=updateKid&kids_id='+kids_id+'&'+kidFormData, 'html', ele);
		}
	},
	showTool: function(num){
		$('.messageTool').slideUp('slow');
		$('#messageTool'+num).slideDown('slow');
	}, 
	hideTool: function(num){
		$('#messageTool'+num).slideUp('slow');		
	},
	ageCalculation: function(ele){		
		dobDate = ele.find('select[name="dobDate"]').val();
		dobMounth = ele.find('select[name="dobMounth"]').val();
		dobYear = ele.find('select[name="dobYear"]').val();

		targetEle = ele.find('input[name="age"]');

		if(dobDate !='' && dobMounth !='' && dobYear !=''){
			ob.loadData('action=ageCalculation&date='+dobDate+'&mounth='+dobMounth+'&year='+dobYear,'html',targetEle);	
		}	
	},
	showLoading: function(){
		$("body").prepend("<div class='loadingBar'></div><div class='loading'></div>");
		$('.loadingBar').css({position: 'fixed', left: '0px', top: '0px', width: $(window).width()+'px', height: $(window).height()+'px'});
		$('.loading').css({position: 'fixed', border: '0px solid red', left: ($(window).width()/2-16)+'px', top: ($(window).height()/2-16)+'px', width: '32px', height: '32px'});
	},
	removeLoading: function(){
		$('.loading').fadeOut('slow', function(){
			$('.loadingBar').fadeOut('slow', function(){
				$(this).remove();
			});
			$(this).remove();
		})
	},
	loadData: function(data, type, ele){ // 1)Data, 2)Data type, 3)Target element
	//alert(data);
	actionArray = data.split('&');
	action = actionArray[0].split('=');
	if(action[1] != 'kid_basket'){
		ob.showLoading();
	}	
		$.ajax({
			url: 'ajax_kid_product.php',
			type: 'POST',
			data:  data,
			dataType: type, 
			/*contentType: "application/x-www-form-urlencoded;charset=UTF-8",*/ 
			error: function (xhr, ajaxOptions, thrownError){
				alert(xhr.status);
				alert(thrownError);

			},
			success: function(result) {
				//alert(action[1]);
				ob.removeLoading();
				switch(action[1]) {					
					case 'updateKid':
						//alert(result);
						ele.slideUp('slow', function(){
							//alert(conf.selsectedTab);
							//alert(ele.find('input[name="kidSex"]:checked').val());
							babyKidSex = ele.find('input[name="kidSex"]:checked').val();
							if(babyKidSex == 'Girl'){
								sexLabel = ' | Pige';
							}else if(babyKidSex == 'Boy'){
								sexLabel = ' | Dreng';
							}else{
								sexLabel = '';
							}
							$("li[rel='tab"+conf.selsectedTab+"']").find('div[class="kidDetail babyBoy"]').removeClass('kidDetail babyBoy').addClass('kidDetail baby'+ele.find('input[name="kidSex"]:checked').val());
							
							$("li[rel='tab"+conf.selsectedTab+"']").find('div[class="kidDetail babyGirl"]').removeClass('kidDetail babyGirl').addClass('kidDetail baby'+ele.find('input[name="kidSex"]:checked').val());

							$("li[rel='tab"+conf.selsectedTab+"']").find('span[class="kidAge"]').html(ele.find('input[id="kidAge"]').val()+sexLabel);
							$("li[rel='tab"+conf.selsectedTab+"']").find('a[class="editTab"]').html(ele.find('input[id="kidName"]').val());	
							//$("li[rel='tab"+conf.defaultTab+"']").find('span[class="kidBasket"]').html('0 gaver i alt');

							ele.remove();
							ob.setNewTabPos();
						});
					break;
					case 'edit_kid':
						//alert(result);
						ele.append(result);
						ele.slideDown("slow");
						ele.find("div[rel='Cancel']").click(function(){
							ele.slideUp('slow', function(){
								ele.remove();
							});
						});
						ele.find("div[rel='SaveAndExit']").click(function(){							
							ob.updateKid(ele);
						});
						ele.find('select[name="dobDate"]').change(function(){
							ob.ageCalculation(ele);
						});

						ele.find('select[name="dobMounth"]').change(function(){
							ob.ageCalculation(ele);
						});
						
						ele.find('select[name="dobYear"]').change(function(){
							ob.ageCalculation(ele);
						});
					break;
					case 'ageCalculation':
						//alert(result);
						ele.val(result);
					break;
					case 'kid_shipping':
						//alert("result:"+result);
					break;	
					case 'kid_basket':	
							//alert(result);
						if(result !=null){
							conf.data = result;
							if(conf.data.length > 0){
								ob.tamplate('default');
								$(".kidBannerDefault").slideUp('slow', function(){
									//$(this).remove();
								});
							}
						}
						//ob.tamplate('default');
					break;	
					case 'LoadForm':	
						//alert('ha LoadForm')
						ele.append(result);
						conf.formEle = parseInt(ele.attr('id').replace('tab',''));
						//alert(conf.formEle);
						ob.bindEvent('form');	
						
						$('select[name="dobDate"]').change(function(){
							ob.ageCalculation(ele);
						});

						$('select[name="dobMounth"]').change(function(){
							ob.ageCalculation(ele);
						});
						
						$('select[name="dobYear"]').change(function(){
							ob.ageCalculation(ele);
						});
					break;	
					case 'addNewKid':	
						//alert(data);
						//alert(result);
						//alert($('input[id="kidName"]').val());
						babyKidSex = $('input[name="kidSex"]:checked').val();
						if(babyKidSex == 'Girl'){
							sexLabel = ' | Pige';
						}else if(babyKidSex == 'Girl'){
							sexLabel = ' | Dreng';
						}else{
							sexLabel = '';
						}

						$("li[rel='tab"+conf.defaultTab+"']").find('div[class="kidDetail gender"]').removeClass('kidDetail gender').addClass('kidDetail baby'+$('input[name="kidSex"]:checked').val());

						$("li[rel='tab"+conf.defaultTab+"']").find('span[class="kidAge"]').html($('input[id="kidAge"]').val()+sexLabel);
						$("li[rel='tab"+conf.defaultTab+"']").find('a[class="editTab"]').html($('input[id="kidName"]').val());
						$("li[rel='tab"+conf.defaultTab+"']").find('span[class="kidBasket"]').html('0 gaver i alt');

						$("#tab"+conf.defaultTab).attr('rel', 'kids_id:'+result);
						//alert(result);
						if(ele.attr('rel') == 'SaveAndExit'){
							ob.LoadBlankContent($('#tab'+conf.defaultTab),false);
							ob.setNewTabPos();
							//alert("test");
							$('.tabHelpLink').click();

						}else{
							ob.LoadBlankContent($('#tab'+conf.defaultTab),false);
							ob.tamplate('addNewTab');
						}

						$(".editTab").unbind('click');

						$(".editTab").click(function(){
							ob.editTab();
						});
					break;
					case 'remove_kid':
						/*****************/
						if(conf.formEle == conf.selsectedTab){
							conf.formEle = '';
						}
						targetEle = $('li[rel="tab'+conf.selsectedTab+'"]');
						addNewTabPos = addNewTabPos-(targetEle.outerWidth());
						targetContentEle = $('#tab'+conf.selsectedTab);
							if(targetEle.next('li').length > 0){
								nextSelected = targetEle.next('li');
							}else{
								nextSelected = targetEle.prev('li');
							}

							if(nextSelected.length <=0){
								$(conf.selector).slideUp('slow', function(){
									$(this).html('').css({display: 'block'});
									targetEle.remove();
									targetContentEle.remove();
									//alert("dddd");
									conf.data = '';
									$(".kidBannerDefault").slideDown('slow', function(){});
								});
								
							}else{							
								targetEle.animate({width: '0px'}, 'slow', function(){
									targetEle.remove();
									targetContentEle.remove();

									//conf.selsectedTab = parseInt(targetContentEle.attr('rel').replace('tab',''));
									ob.tabActive(nextSelected);
								});

								/*$(".addNewTab").animate({left: addNewTabPos+'px'}, 'slow', function(){
									// Do nothing
								});*/
							}
							//ob.setNewTabPos();
						/*****************/
						//alert(result);
					break;
					case 'remove_kid_product':
						//alert('block_id is '+block_id);
						$("#"+block_id).find('div[class="blockImage"]').fadeOut("slow").fadeIn("slow").fadeOut("slow", function(){
							$(this).html('');
						}).fadeIn("slow");

						$("#"+block_id).find('div[class="prodName"]').fadeOut("slow").fadeIn("slow").fadeOut("slow", function(){
							$(this).html('---');
						}).fadeIn("slow");

						$("#"+block_id).find('div[class="prodDate"]').fadeOut("slow").fadeIn("slow").fadeOut("slow", function(){
							$(this).html('');
						}).fadeIn("slow");

						ob.hideTool(conf.selsectedTab);
					break;
				}
			}
		});
	}
}