// JavaScript Document

/*
window.addEvent('domready', function(){
	
	new quickNavi({
		data: '{"groups":[{"uid":"1","title":"Parent 1","children":[{"uid":"4","title":"Child 1.2","url":"cps-it.de"},{"uid":"1","title":"Child 1","url":"83"},{"uid":"5","title":"Child 1.3","url":"ahk.de"}]},{"uid":"3","title":"Parent 3","children":[{"uid":"3","title":"Child 1.3","url":"google.co.ve"}]},{"uid":"2","title":"Parent 2","children":[{"uid":"2","title":"Child 2","url":"google.com"}]}]}',
		container:'quickNavGroup2',
		clearParent:false
	});
});
*/

var quickNavi = new Class({ 
         Implements: [Options, Events], 
         options: {
		 	/* json String 
			*  exmaple: {"groups":[{"title":"parent 1","children":[{"title":"child 1.1","url":"www.cps-it.de"}]}]} 
		 	*/
			data:'',
			container:'quickNavGroup',
			
			addSelectBoxParentsText:'Ich bin...',					
			parentSelectedClass:'parentSelected',
			parentContainer:'div',			
			classparentContainer:'parents',			
			classparentList:'classparentList',
						
			addSelectBoxChildrenText: 'Ich...',
			childSelectedClass:'childSelected',
			childrenContainer:'div',
			classChildrenContainer:'children',
			classChildrenList:'classChildrenList',
			
			classSearchButton:'searchButton',
			searchButtonText:'suchen',
			
			clearParent:true
         }, 
         initialize: function(options){ 
                 this.setOptions(options);
				 this.container = document.id(this.options.container);
				 this.clearGroup = this.container.getElement('div.clearGroup');
				 this.data = JSON.decode(this.options.data);	
				 this.showParentsStatus = false;
				 this.showChildrenStatus = false;
				 
				 this.addSelectBoxParents();
				 this.addParents();				 
				 // effect
         },
		 
		 addSelectBoxParents: function(){
		 	
			this.parentWrap  = new Element('div',{
				'class':'parentWrap'
			}).inject(this.clearGroup,'before');
		 
			// Parent List
			this.selectBoxParents = new Element('div',{
				html: this.options.addSelectBoxParentsText,
				'class':'selectBoxParents'
			}).inject(this.parentWrap);
			// Show Parents List
			this.selectBoxParents.addEvent('click', function (){
				this.showParents();
				if(this.showChildrenStatus == true) this.hideChildren();
			}.bind(this));
			
			this.selectBoxParentsButton = new Element('div',{
				'class':'selectBoxButton'
			}).inject(this.parentWrap);	
			
			new Element('div',{
				'class':'clear'
			}).inject(this.parentWrap);	
			
			// Clear parent floats
			if (this.options.clearParent == true){
				new Element('div',{
					'class':'clearParent'
				}).inject(this.clearGroup,'before');	
			}
			// Show Parents List		
			this.selectBoxParentsButton.addEvent('click', function (){
					this.showParents();
					if(this.showChildrenStatus == true) this.hideChildren();
			}.bind(this));
		 },
		 
		 addSelectBoxChildren: function(){
		 	if(!$defined(this.selectBoxChildren)){
				this.childrenWrap  = new Element('div',{
				'class':'childrenWrap'
				}).inject(this.clearGroup,'before');
				
				// Child List
				this.selectBoxChildren = new Element('div',{
					html: this.options.addSelectBoxChildrenText,
					'class':'selectBoxChildren'
				}).inject(this.childrenWrap);
				
				// Show Child List
				this.selectBoxChildren.addEvent('click', function (){
					this.showChildren();
					if(this.showParentsStatus == true) this.hideParents();
				}.bind(this));
				
				this.selectBoxChildrenButton = new Element('div',{
					'class':'selectBoxButton'
				}).inject(this.childrenWrap);
				
				new Element('div',{
					'class':'clear'
				}).inject(this.childrenWrap);
				
				if(this.options.clearParent == true){
					new Element('div',{
						'class':'clear'
					}).inject(this.clearGroup,'before');
				}
				
				this.selectBoxChildrenButton.addEvent('click', function (){
					this.showChildren();
					if(this.showParentsStatus == true) this.hideParents();
				}.bind(this));

			}else{
				this.selectBoxChildren.set('html',this.options.addSelectBoxChildrenText);
				if($defined(this.searchButton)){
					this.searchButton.setStyle('display','none');
				}
				
			}
		 },
		 
		 showParents: function(){
		 	// if showParentsStatus = true hide 
		 	if(this.showParentsStatus == false){
				this.selectBoxParents.setStyle('border-bottom-color','transparent');		 	
				this.parentContainer.setStyles({
					display: 'block',
					opacity: 0
				});			
				this.parentContainer.get('tween').start('opacity', 1);
				this.showParentsStatus = true;
			}else{
				this.hideParents();
			}
		 },
		 
		 showChildren: function(){
		 	// if showParentsStatus = true hide 
		 	if(this.showChildrenStatus == false){
				this.selectBoxChildren.setStyle('border-bottom-color','transparent');		 	
				this.childrenContainer.setStyles({
					display: 'block',
					opacity: 0
				});			
				this.childrenContainer.get('tween').start('opacity', 1);
				this.showChildrenStatus = true;
			}else{
				this.hideChildren();
			}
		 },
		 
		 /**
		 * Hide Chlidren List
		 */
		 hideChildren: function(){
			this.childrenContainer.set('tween', {
				duration: 'short'
			});
			
			this.childrenContainer.tween('opacity', 1, 0);			
			
		 	this.selectBoxChildren.setStyle('border-bottom-color','#223E7F');
			// waits until tween has completed to set the display property:none
			(function(){ 
				this.childrenContainer.setStyles({
					display: 'none'
				});
			}).delay(250,this);
			this.showChildrenStatus = false;
		 	
		 },
		 
		 /**
		 * Hide Parent List
		 */
		 hideParents: function(){			
			this.parentContainer.set('tween', {
				duration: 'short'
			});
			
			this.parentContainer.tween('opacity', 1, 0);			
			
		 	this.selectBoxParents.setStyle('border-bottom-color','#223E7F');
			// waits until tween has completed to set the display property:none
			(function(){ 
				this.parentContainer.setStyles({
					display: 'none'
				});
			}).delay(250,this);
			this.showParentsStatus = false;
		 },
		 
		 /**
		 * Creates a list of child elements list
		 */
		 addChildren: function(childrenData){
		 	if(!$defined(this.childrenContainer)){
				// Parent Container
				this.childrenContainer = new Element(this.options.childrenContainer,{
					'class': this.options.classChildrenContainer,
					styles: {
						display: 'none',
						opacity: 0
					}
				}).inject(this.childrenWrap);
				
				this.childrenContainer.addEvent('mouseleave', this.hideChildren.bind(this));
				
				
			}else{
				this.childrenContainer.empty();
			}
			
			//Children List
			this.childrenListUl = new Element('ul',{
				'class': this.options.classChildrenList
			}).inject(this.childrenContainer);
			
			//Children
		 	childrenData.each(function(child,index){
				// Parent List
				this.childrenListLi = new Element('li',{
					html: child.title,
					events: {
						click: function(){
							this.selectBoxChildren.set('html',child.title);
							this.selectBoxChildren.addClass(this.options.childSelectedClass);													
							this.hideChildren();							
							//this.showSearchButton(child.url);
							window.location.assign(child.url);
						}.bind(this)
					}
					
				}).inject(this.childrenListUl);
			},this);
			// Add border to the first element of the list
			this.childrenListUl.getFirst('li').set('class','first');
			
			// Remove border from the last element of the list
			this.childrenListUl.getLast('li').set('class','last');
		 },
		 
		 showSearchButton: function(newLocation){
		 //alert(newLocation);	 
		 	if(!$defined(this.searchButton)){
				if(this.options.clearParent == true){
					new Element('div',{
						'class':'clearParent'
					}).inject(this.clearGroup,'before');
				}
				// Search Button
				this.searchButton = new Element('div',{
					'class': this.options.classSearchButton,
					'html': this.options.searchButtonText
				}).inject(this.clearGroup,'before');							
			}else{
				this.searchButton.setStyle('display','block');
			}
			
			this.searchButton.addEvent('click', function(){
				window.location.assign(newLocation);
			}.bind(this));
		 	
		 },
		 
		 /**
		 * Creates a list of parents elements list
		 */
		 addParents: function(){
		 	// Parent Container
		 	this.parentContainer = new Element(this.options.parentContainer,{
				'class': this.options.classparentContainer,
				styles: {
					display: 'none',
					opacity: 0
				}
			}).inject(this.parentWrap);
			
			this.parentContainer.addEvent('mouseleave', this.hideParents.bind(this));
			
			// Parent List
			this.parentListUl = new Element('ul',{
				'class': this.options.classparentList
			}).inject(this.parentContainer);
			
			//Parents
		 	this.data.groups.each(function(parent,index){
				// Parent List
				this.parentListLi = new Element('li',{
					html: parent.title,
					events: {
						click: function(){
							this.selectBoxParents.set('html',parent.title);
							this.selectBoxParents.addClass(this.options.parentSelectedClass);							
							this.hideParents();
							this.addSelectBoxChildren();
							this.addChildren(parent.children);
						}.bind(this)
					}
					
				}).inject(this.parentListUl);
			},this);
			
			// Add border to the first element of the list
			this.parentListUl.getFirst('li').set('class','first');
			
			// Remove border from the last element of the list
			this.parentListUl.getLast('li').set('class','last');
			
		 }
		 
});