$(document).ready(function()
{
	//For Drag Drop in menuEdit
	$(function() {
		$( "ul.droptrue" ).sortable({
			connectWith: ".dropfalse",
			placeholder: 'ui-state-highlight'
		});

		$( "ul.dropfalse" ).sortable({
			placeholder: 'ui-state-highlight'
		});
		
		$( "ul.dropfalsemain" ).sortable({
			placeholder: 'ui-state-highlight'
		});

		$( "#sortable1, #sortable2, #sortable3" ).disableSelection();
	});
	
	$("#testLabel").click(function ()
	{
		$('<li class="ui-state-default">new Item</li>').appendTo('#newMenuItemSortable');
	});
	
	$(".firstMenuEdit").click(function ()
	{
		//AJAX FUNTIE MAKEN EN AANROEPEN. IN AJAX FUNCTIE JUISTE GEGEVENS OPHALEN EN DOORGEVEN (in een array?)
		//MOET HTML IN JQUERY MAKEN, VANWEGE APPENDTO.
	});
	
	/*$("#testLabel").click(function ()
	{
		//getter
		var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
		//setter
		$( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );
	});*/
	
	
	$(function ()
	{
		/*$('#nav li').hover(function (e) 
		{
			if ($(this).filter(":animated"))
			$(this).children('ul').slideDown('normal');
		},
		function (e) 
		{ 
			$(this).children('ul').slideUp('normal'); 
		}
		);*/
		
		
		//FINAL DROPDOWN MENU. NEEDS jquery.hoverIntention and jquery >1.5.1
		//See http://www.webdesigndev.com/web-development/create-the-fanciest-dropdown-menu-you-ever-saw for details.
		$('.dropdown').each(function () 
		{
			$(this).parent().eq(0).hoverIntent(
			{
				timeout: 10,
				over: function () 
				{
					var current = $('.dropdown:eq(0)', this);
					current.slideDown(200);
				},
				out: function () 
				{
					var current = $('.dropdown:eq(0)', this);
					current.fadeOut(200);
				}
			});
		});
		/*
		$('#nav>li').mouseover(function()
		{
			$(this).siblings().find('ul:visible').slideUp(200);
       		$(this).find('ul:hidden').slideDown(200);
			
			if ($('#nav ul:animated').size() == 0)
			{
				$heading = $(this);
				$expandSiblings = $heading.siblings().find('ul:visible');
				if ($expandSiblings.size() > 0)
				{
					$expandSiblings.slideUp(100, function()
					{
						$heading.find('ul').slideDown(100);
					});
				}
				else
				{
					$heading.find('ul').slideDown(200);
				}				
			}
		});*/
	});
	
	
	/*function openSubMenu() {
		$(this).find('ul').css('visibility', 'visible');	
	};*/
	/*$('#nav>li').bind('mouseover', openSubMenu);
	$('#nav>li').bind('mouseout', closeSubMenu);
	
	function openSubMenu() {
		$(this).find('ul').slideDown(200);	
	};
	
	function closeSubMenu() {
		$(this).find('ul').slideUp(200);	
	};*/

	
	/*$('#nav>li').mouseover(function(){
        // check that the menu is not currently animated
        if ($('#nav ul:animated').size() == 0) {
            // create a reference to the active element (this)
            // so we don't have to keep creating a jQuery object
            $heading = $(this);
            // create a reference to visible sibling elements
            // so we don't have to keep creating a jQuery object
            $expandedSiblings = $heading.siblings().find('ul:visible');
            if ($expandedSiblings.size() > 0) {
                $expandedSiblings.slideUp(500, function(){
                    $heading.find('ul').slideDown(500);
                });
            }
            else {
                $heading.find('ul').slideDown(1000);
            }
        }
    });*/



	/*$(function () 
	{
		$(".topMenu").click(
			function () 
			{
				$(this).show("slow");
				console.log($(this));
		  	}, 
		  	function () {
				$(this).hide("slow");
		  	});
	});*/
		
	/*$(".imageIframe").colorbox({iframe:true, innerWidth:850, innerHeight:500});*/
	

	/*$("#demo1").jstree({ 
		"types" : {
			"valid_children" : [ "root" ],
			"types" : {
				"root" : {
					"icon" : { 
						"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
					},
					"valid_children" : [ "default" ],
					"max_depth" : 2,
					"hover_node" : false,
					"select_node" : function () {return false;}
				},
				"default" : {
					"valid_children" : [ "default" ]
				}
			}
		},
		"plugins" : ["themes","html_data","dnd","ui","types"]
	});*/
	$(function () {
		$('.activeLogos').click(function()
		{
			if ($(this).children().attr('alt')=='true')
			{
				$(this).children().attr({
					alt: 'false',
					src: '/static_images/delete.gif'
				});
				
			}
			else
			{
				$(this).children().attr({
					alt: 'true',
					src: '/static_images/check.gif'
				});
			}
		});
		
		$('.saveChanges').click(function()
		{
			categoryActive = $(this).parent().children('.activeLogos').children().attr('alt');
			categoryTitle = $(this).parent().children('.categoryTitle').children().val();
			categorySequence = $(this).parent().children('.categorySequence').children().val();
			categoryId = $(this).parent().attr('id');
			//console.log($categoryId);
			
			$.post("../../ajax/categorySaveAjax.php", { categoryActive: categoryActive, categoryTitle: categoryTitle, categorySequence: categorySequence, categoryId: categoryId } );
			/*
			var xmlhttp;
			if (window.XMLHttpRequest)
			{	// code for IE7+, Firefox, Chrome, Opera, Safari
				xmlhttp=new XMLHttpRequest();
			}
			xmlhttp.onreadystatechange=function()
			{
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
				{
					alert(xmlhttp.responseText);
				}
			}

			xmlhttp.open("POST","../ajax/categorySaveAjax.php",true);
			//xmlhttp.send("lorem=ipsum&name=binny");
			xmlhttp.send("categoryActive="+$categoryActive+"&categoryTitle="+$categoryTitle+"&categorySequence="+$categorySequence+"categoryId="+$categoryId+"");
			*/
			//console.log('lalala');
		});
	});
	
	$(function () {
		$('#save').click (function () 
		{
			/*$('#saveconfirm').slideDown("slow").delay(2000).slideUp("slow");*/
			$('#demo2 ul li').each(function(i) 
			{
				if ($(this).children('ul').length > 0)
				{
					$(this).children('ul').children('li').each(function(f)
					{
							console.log($(this) + '1e layer');
							if ($(this).children('ul').length > 0)
							{
								$(this).children('ul').children('li').each(function(g)
								{
									console.log($(this) + '2e layer');
								});
							}
					});
					/*if ($(this).children('ul').children('li').children('ul').length > 0){
						console.log($(this) + '2e layer');	
					}*/
				}
			});
		});
	});

	$('#my_list li').each(function(i) {
		$(this).append(i.toString());
	});

	$(function () {
	    $("#demo2").jstree({
			"themes" : {
				"theme" : "default",
	            /*"dots" : false,*/
	            "icons" : true
			},
			"ui" : {
	            "select_limit" : 2,
	            "select_multiple_modifier" : "alt",
	            "selected_parent_close" : "select_parent",
	            "initially_select" : [ "phtml_2" ]
	        },
	        "core" : { "initially_open" : [ "phtml_1" ] },
			"dnd" : {
				"drop_finish" : function () { 
					alert("DROP"); 
				},
				"drag_check" : function (data) {
					if(data.r.attr("id") == "phtml_1") {
						return false;
					}
					return { 
						after : false, 
						before : false, 
						inside : true 
					};
				},
				"drag_finish" : function () { 
					alert("DRAG OK"); 
				}
			},
			"types" : {
				"type_attr" : "rel",
				"valid_children" : [ "root" ],
				"types" : {
					"root" : {
						/*"icon" : { 
							"image" : "http://static.jstree.com/v.1.0rc/_docs/_drive.png" 
						},*/
						"valid_children" : [ "default" ],
						"max_depth" : 3,
						"hover_node" : false,
						"delete_node" : false,
						"select_node" : function () {return false;}
					},
					"default" : {
						"valid_children" : [ "default" ]
					}
				}
			},
			
			/*"rules" : { 
				"multitree": "all"
			},
			"callback" : {
				 
				"ondrop" : function(NODE, REF_NODE, TYPE, TREE_OBJ) { 
					 
					 alert( TREE_OBJ.get_text(NODE)+":"+ TYPE);

					 
				}

			}
			/*"callback" : {
				"ondrop" : function() 
				{
					console.log("yes");
					alert("lol");
				}
			},*/
	        "plugins" : [ "themes", "html_data", "ui", "crrm", "contextmenu", "dnd", "types" ]
	    });
	});

	
	/*$("#search").click(function () {
	        $("#demo1").jstree("search","TARGEt");
	    });
	    $("#demo1")
	        .jstree({
	            "json_data" : {
	                "data" : [
	                    {
	                        "attr" : { "id" : "root_node" },
	                        "data" : "A closed node",
	                        "state" : "closed"
	                    }
	                ],
	                "ajax" : {
                     "url" : "/static/v.1.0rc2/_docs/_search_data.json",
	                    "data" : function (n) {
	                        return { id : n.attr ? n.attr("id") : 0 };
	                    }
	                }
	            },
	            "search" : {
	                "case_insensitive" : true,
	                "ajax" : {
	                    "url" : "/static/v.1.0rc2/_docs/_search_result.json"
                }
            },
	            "plugins" : [ "themes", "json_data", "search" ]
	        })
	        .bind("search.jstree", function (e, data) {
            alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'.");
	        });*/

	/*$(function () {
		$("#demo2").jstree({ 
			"html_data" : {
				"ajax" : {
					"url" : "/js/menu.html",
					"data" : function (n) { 
						return { id : n.attr ? n.attr("id") : 0 }; 
					}
				}
			},
			"plugins" : [ "themes", "html_data" ]
		});
	});*/

	
	/*$(function () {
	$("#demo2").jstree({ 
		"core" : { "initially_open" : [ "root" ] },
		"html_data" : {
			"data" : "<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>"
		},
		"plugins" : [ "themes", "html_data" ]
	});
});*/


		/*tree = $('#myTree');
		$('li', tree.get(0)).each(
			function()
			{
				subbranch = $('ul', this);
				if (subbranch.size() > 0) {
					if (subbranch.eq(0).css('display') == 'none') {
						$(this).prepend('<img src="images/bullet_toggle_plus.png" width="16" height="16" class="expandImage" />');
					} else {
						$(this).prepend('<img src="images/bullet_toggle_minus.png" width="16" height="16" class="expandImage" />');
					}
				} else {
					$(this).prepend('<img src="images/spacer.gif" width="16" height="16" class="expandImage" />');
				}
			}
		);
		$('img.expandImage', tree.get(0)).click(
			function()
			{
				if (this.src.indexOf('spacer') == -1) {
					subbranch = $('ul', this.parentNode).eq(0);
					if (subbranch.css('display') == 'none') {
						subbranch.show();
						this.src = 'images/bullet_toggle_minus.png';
					} else {
						subbranch.hide();
						this.src = 'images/bullet_toggle_plus.png';
					}
				}
			}
		);
		$('span.textHolder').Droppable(
			{
				accept			: 'treeItem',
				hoverclass		: 'dropOver',
				activeclass		: 'fakeClass',
				tollerance		: 'pointer',
				onhover			: function(dragged)
				{
					if (!this.expanded) {
						subbranches = $('ul', this.parentNode);
						if (subbranches.size() > 0) {
							subbranch = subbranches.eq(0);
							this.expanded = true;
							if (subbranch.css('display') == 'none') {
								var targetBranch = subbranch.get(0);
								this.expanderTime = window.setTimeout(
									function()
									{
										$(targetBranch).show();
										$('img.expandImage', targetBranch.parentNode).eq(0).attr('src', 'images/bullet_toggle_minus.png');
										$.recallDroppables();
									},
									500
								);
							}
						}
					}
				},
				onout			: function()
				{
					if (this.expanderTime){
						window.clearTimeout(this.expanderTime);
						this.expanded = false;
					}
				},
				ondrop			: function(dropped)
				{
					if(this.parentNode == dropped)
						return;
					if (this.expanderTime){
						window.clearTimeout(this.expanderTime);
						this.expanded = false;
					}
					subbranch = $('ul', this.parentNode);
					if (subbranch.size() == 0) {
						$(this).after('<ul></ul>');
						subbranch = $('ul', this.parentNode);
					}
					oldParent = dropped.parentNode;
					subbranch.eq(0).append(dropped);
					oldBranches = $('li', oldParent);
					if (oldBranches.size() == 0) {
						/*$('img.expandImage', oldParent.parentNode).src('images/spacer.gif');*/
						/*$(oldParent).remove();
					}
					expander = $('img.expandImage', this.parentNode);
					if (expander.get(0).src.indexOf('spacer') > -1)
						expander.get(0).src = 'images/bullet_toggle_minus.png';
				}
			}
		);
		$('li.treeItem').Draggable(
			{
				revert		: true,
				autoSize		: true,
				ghosting			: true/*,
				onStop		: function()
				{
					$('span.textHolder').each(
						function()
						{
							this.expanded = false;
						}
					);
				}*/
			/*}
		);*/
	
	
	
	
	
	/*$(function() 
	{
		$("#contentLeft").children('ul').each( function()
		{
				console.log($(this));
        $(this).sortable(
		{
			
				start: function(e) 
				{
					$('.firstlevel').unbind("click");
				},
	
				stop: function(e) 
				{
					setTimeout(function() 
					{
						$('.firstlevel').click(function ()
						{
							$(this).parent().children('div.filldiv').slideToggle();
						});
					}, 300);
				},
	
				opacity: 0.6, cursor: 'move', update: function() 
				{
					/*console.log($(this).children('div.filldiv').attr('style'));*/
					/*console.log($(this).children().children('div.filldiv').attr('style'));
					if ($(this).children().children('div.filldiv').attr('style') == 'display: none;')
					{
						var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
						
						$.post("/js/drapDrop.php", order, function(theResponse)
						{
							$("#contentRight").html(theResponse);
						});
					}
				}
			});
        });
    });


	$('.firstlevel').click(function() 
	{
		$(this).parent().children('div.filldiv').slideToggle();
	});*/
	
	
	
	
	
	
	 /* function slideout(){
  setTimeout(function(){
  $('#response').slideUp('slow', function ()  {
      });

}, 2000);}

    $('#response').hide();
	$(function() {
	$('#list ul').sortable({ opacity: 0.8, cursor: 'move', update: function() {

			var order = $(this).sortable('serialize') + '&amp;amp;update=update';
			$.post('updateList.php', order, function(theResponse){
				$('#response').html(theResponse);
				$('#response').slideDown('slow');
				slideout();
			});
		}
		});
	});*/




	/*function slideout()
	{
  		setTimeout(function()
		{
  			$('#response').slideUp('slow', function () 
			{
	 		});
		}, 2000);
	}
 
	$('#response').hide();
	$(function() 
	{
		$('#list ul').sortable(
		{ 
			opacity: 0.8, cursor: 'move', update: function() 
			{
				var order = $(this).sortable('serialize') + '&amp;amp;update=update';
				$.post('updateList.php', order, function(theResponse)
				{
					$('#response').html(theResponse);
					$('#response').slideDown('slow');
					slideout();
				});
			}
		});
	});*/
	







	/*
	*	Dit is volgens mij allemaal oude code 
	*/
	
	//Set de image folder.
	imageFolder = 'images/';

	//Geeft image meteen weer.
	$('#showpicture').attr('src', imageFolder+$('#picture').val()).attr('alt', '');
	//Geeft nieuwe image weer als de option wordt veranderd.
	$('#picture').change( function()
	{
		$('#showpicture').attr('src', imageFolder+this.value).attr('alt', '');
	});


	numberLi = 0;
	$('#newDiv').click(function()
	{
		numberLi++;

		$('#buttonToevoegen').before('<li class="emptyLi"></li>');

		$('#buttonToevoegen').before('<li class="checkbox" style=background-color:{$bgcolor}>'
		+'<label for="extraCheckbox'+numberLi+'" id="extraCheckbox'+numberLi+'label"></label>'
		+'<input type="checkbox" name="extraCheckbox'+numberLi+'" value="true" id="extraCheckbox'+numberLi+'" checked=checked/>Gebruiken'
		+'</li>'
		);

		$('#buttonToevoegen').before('<li style="background-color:{$bgcolor}">'
		+'<label for="extraText'+numberLi+'" id="extraText'+numberLi+'label">Text bij checkbox</label>'
		+'<input type="text" name="extraText'+numberLi+'" id="extraText'+numberLi+'"></textarea>'
		+'</li>'
		);

		$('#buttonToevoegen').before('<li style="background-color:{$bgcolor}">'
		+'<label for="extraMail'+numberLi+'" id="extraMail'+numberLi+'label">Text in e-mail</label>'
		+'<input type="text" name="extraMail'+numberLi+'" id="extraMail'+numberLi+'"></textarea>'
		+'</li>'
		);
	});
});

function setImage(sImage,sTitle) {
	
	$('.imagePreview img').attr('src','/images/thumb/'+sImage);
	$('.imagePreview img').attr('alt','/images/thumb/'+sTitle);
	$('.imageInput').val(sImage);
	$.colorbox.close()
}

//$('.inner').append('<p>Test</p>');