class WebsiteNavigation extends Navigation {
	
	constructor(container, json = {}, settings){
		super(container, json, settings);
		// Parse the raw json into row and tile instances
		this.parseItems();
		// Render the navigation editor
		this.render();
		// Increment the static counter - there may be more than one, both mobile and regular site navigations
		WebsiteNavigation.incrementCounter();
	}

	/*
	==================================================
	Configuration
	==================================================
	*/	
	
	// create the unordered list element and attach the css rules 
	createElement(){
		this.listElement = $('<ul id='+ this.baseID +' class="sm sm-clean '+ WebsiteNavigation.navigationClass +'" aria-label="Site Navigation"></ul>');
		this.attachCSSRules(); 
	}
	
	// render the navigation to append to the contianer passed to the class 
	render() {
		var self = this;
		this.createElement();
		this.listItems.forEach(function(listItem){
			listItem.render(self.listElement);
		});
		this.container.prepend(this.listElement);
		if(this.font && !this.fontLibrary.includes(this.font)) this.fontLibrary.push(this.font);
		this.renderFontStyleSheets();
	}
	
	/*
	==================================================
	Custom Properties
	==================================================
	*/
	
	get baseID() {
		return WebsiteNavigation.navigationListID + '-' + WebsiteNavigation.counter;
	}
	
	static get navigationListID() {
		return 'nav-list';
	}
	
	static get navigationClass() {
		return 'navigation';
	}
	
	// This static counter is used to get a unique index 
	// for the current class instance
	static get counter() {
		return this._counter || 0;
	}
	
	// This is used to increment the counter and return the 
	// correct value when a new instance is created
	static incrementCounter() {
		this._counter = this.counter + 1;
		return this._counter;
	}
	

	/*
	==================================================
	Utility Methods
	==================================================
	*/	


	// Take the raw json for the list items and parse them an array of navList and/or navItem
	// instances so we can operate and manipulate them
	parseItems() {
		// Set the initial list 
		this.listItems = []; 
		if(this.list && Array.isArray(this.list)){
			// Loop over the list data
			for(var i = 0; i < this.list.length; i++){
				var listItem = this.list[i];
				if((listItem.list && Array.isArray(listItem.list) && listItem.list.length) || Navigation.itemAutoRendersChildren(listItem)){
					// add the new nav list item to the array of list items 
					this.listItems.push(new WebsiteNavList(this, listItem, 1, this, i)); 
				}else{
					// add the new nav item to the array of list items 
					this.listItems.push(new WebsiteNavItem(this, listItem, 1, this, i)); 
				}
			}
		}
	}	
	
	// This method will create the style sheets for the website navigation, handling normal styles and hover styles
	attachCSSRules() {
		var style = this.stringifyStyleObject(Navigation.createStyleObject(this)),
			attr = '.' + WebsiteNavigation.navigationClass + ', .' + WebsiteNavigation.navigationClass + ' li > a';

		var hoverStyle = this.stringifyStyleObject(Navigation.createHoverStyleObject(this)),
			hoverAttr =  '.' + WebsiteNavigation.navigationClass + ' li > a:hover';
			
		var attr = '', hoverAttr = '';
		// Append all the children IDs
		if (this.childIDLibrary['NavItem'].length) {
			attr += (attr ? ', ' : '') + '#' + this.childIDLibrary['NavItem'].join(' > a.'+ WebsiteNavItem.baseLinkClass + ', #') + ' > a.'+ WebsiteNavItem.baseLinkClass;
			hoverAttr += (hoverAttr ? ', ' : '') + '#' +  this.childIDLibrary['NavItem'].join(' > a.'+ WebsiteNavItem.baseLinkClass + ':hover, #') + ' >  a.'+ WebsiteNavItem.baseLinkClass + ':hover';  
		}	
		if (this.childIDLibrary['NavList'].length) {
			attr += (attr ? ', ' : '') + '#' + this.childIDLibrary['NavList'].join(' > a, #') + ' > a'; 
			hoverAttr += (hoverAttr ? ', ' : '') + '#' +  this.childIDLibrary['NavList'].join(' > a:hover, #') + ' > a:hover'; 
		}	
		
		attr = '#'+ this.baseID + ' ' + attr.split(',').join(', ' + '#'+ this.baseID);
		hoverAttr = '#'+ this.baseID + ' ' + hoverAttr.split(',').join(', ' + '#'+ this.baseID);
		
		var styles = attr + style + ' ' + hoverAttr + hoverStyle;
		
		var existingStyleSheet = $(`#${Navigation.styleSheetID}`);
		if(existingStyleSheet.length){
			existingStyleSheet.text(existingStyleSheet.text() + ' ' + styles)
		}else{
			var element = $(`<style id='${Navigation.styleSheetID}'/>`);
			element.text(styles); 
			$('head').append(element); 
		}
	}
	
	// This method takes in a style object and transforms it into a usable css style string
	stringifyStyleObject(obj) {
		return JSON.stringify(obj).replace(/,/g, ' !important;').replace(/"/g, '').replace(/}(?!.*})/gm, ' !important;}')
	}
	
	/*
	==================================================
	Event Listeners
	==================================================
	*/
	
	
}