var csContextBarInstance = xb.core.object.extend( {

	ctor: function( bar, elm, object ) {
		this.bar = bar;
		this.elm = elm;
		this.object = object;
		this.__ready = false;
		this.mutation = {
			ts: 0,
			fn: null,
			data: {}
		};
	},

	load: function() {
		var inputs = silk.html.getLibrary( "silk/contextbar/input" );
		var fields = inputs.find( this.elm );
		var data = this.object.get();
		for ( var i = 0, il = fields.length; i < il; i++ ) {
			var field = fields[ i ];
			var value = data[ field.name() ];
			if ( typeof( value ) === "undefined" ) {
				field.reset();
			} else {
				field.set( value );
			}
			console.log( "field", field.name(), field.value() );
		}
		this.__ready = true;
		return this.object.get();
	},

	set: function( input ) {
		if ( !this.__ready ) {
			return;
		}
		var self = this;
		var usleep = 500;
		var fn = function() {
			var now = Date.now();
			var dt = now - self.mutation.ts;
			if ( dt < usleep ) {
				self.mutation.fn = window.setTimeout( fn, usleep - dt );
				return;
			}
			self.mutation.fn = null;
			self.object.set( self.mutation.data );
			self.mutation.data = {};
		};
		this.mutation.ts = Date.now();
		this.mutation.data[ input.name() ] = input.value();

		if ( this.mutation.fn === null ) {
			this.mutation.fn = window.setTimeout( fn, usleep );
		}
	}

} );


var csContextBar = ( xb.core.object.extend( {
	
	ctor: function() {
		var self = this;
		this.domNode = null;
		this.instance = null;
		window.addEventListener( "simply-content-loaded", function( evt ) {
			self.init();
		} );
	},

	init: function() {
		this.domNode = document.createElement( "div" );
		this.domNode.classList.add( "silk-contextbar" )
		this.domNode.setAttribute( "id", "silk-contextbar" );
		document.body.appendChild( this.domNode );
	},

	open: function( object, url ) {
		var self = this;
		this.loadContextBar( url, function( elm ) {
			var sections = self.domNode.querySelectorAll( ":scope > section" );
			for ( var i = 0, il = sections.length; i < il; i++ ) {
				if ( sections[ i ] === elm ) {
					elm.classList.add( "open" );
				} else {
					elm.classList.remove( "open" );
				}
			}
			self.instance = csContextBarInstance( self, elm, object );
			self.instance.load();
		} );
	},

	mutate: function( input ) {
		if ( this.instance !== null ) {
			this.instance.set( input );
		}
	},

	close: function() {
		var sections = this.domNode.querySelectorAll( ":scope > section.open" );
		for ( var i = 0, il = sections.length; i < il; i++ ) {
			sections[ i ].classList.remove( "open" );
		}
	},

	loadContextBar: function( url, callback ) {
		var elm = this.domNode.querySelector( "section[data-template='" + url + "']" );
		if ( elm === null ) {
			return this.loadContextBarHTML( url, callback );
		}
		window.setTimeout( function() {
			callback( elm );
		}, 1 );
	},

	loadContextBarHTML: function( url, callback ) {
		var self = this;
		var http = new XMLHttpRequest();
		http.open( "get", url, true );
		http.onreadystatechange = function() {
			if ( http.readyState == 4 ) {
				if ( http.status == 200 ) {
					var result = null;
					try {
						result = http.responseText;
						var stub = document.createElement( "div" );
						stub.innerHTML = result;
						var elm = stub.querySelector( "section" );
						if ( elm === null ) {
							console.error( "No <section> found in", url );
							return;
						}
						elm.setAttribute( "data-template", url );
						self.domNode.appendChild( elm );
						if ( typeof( callback ) === "function" ) {
							callback( elm );
						}
					} catch( e ) {
						console.error( "Could not parse", url, e );
					};
				}
			}
		};
		return http.send();
	}

} ) )();

var csVideoBlokje = xb.core.object.extend( {

	ctor: function( domNode ) {
		this.domNode = domNode;
		csContextBar.open( this, "/components/content/blokje-video/contextbar.html" );
	},

	get: function() {
		var field = this.domNode.querySelector( "[data-simply-field=video-settings]" );
		var text = field.textContent;
		var data = null;
		try {
			data = JSON.parse( text );
		} catch( e ) {
			data = { url: "https://www.youtube.com/watch?v=oAD6HPBr7C0" };
		}
		return data;
	},

	getParams: function( url ) {
		if ( typeof( url ) !== "string" ) {
			return {};
		}
		var params = {};
		var parser = document.createElement( "a" );
		parser.href = url;
		var query = parser.search.substring( 1 );
		var vars = query.split( "&" );
		for (var i = 0, il = vars.length; i < il; i++) {
			var pair = vars[ i ].split( "=" );
			params[ pair[ 0 ] ] = decodeURIComponent( pair[ 1 ] );
		}
		return params;
	},

	set: function( update ) {
		var field = this.domNode.querySelector( "[data-simply-field=video-settings]" );
		var data = this.get();
		for ( var name in update ) {
			data[ name ] = update[ name ];
		}
		field.innerText = JSON.stringify( data );
		this.render();
	},

	render: function() {
		var data = this.get();
		var params = this.getParams( data.url );
		if ( typeof( params.v ) !== "string" ) {
			return;
		}
		var embed = '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + params.v + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
		console.log( "embed", embed );

		var elm = this.domNode.querySelector( ".silk-elm.video.iframe" );
		elm.innerHTML = embed;
	},

} );

csContextBar.f_input = xb.core.object.extend( {

	ctor: function( domNode ) {
		this.domNode = domNode;
	},

	reset: function() {
		this.domNode.value = this.domNode.getAttribute( "value" );
		return this;
	},

	set: function( value ) {
		this.domNode.value = value;
		return this;
	},

	name: function() {
		return this.domNode.name;
	},

	value: function() {
		return this.domNode.value;
	},

} );

csContextBar.f_input_text = xb.core.object.extend( csContextBar.f_input, {

	ctor: function( domNode ) {
		csContextBar.f_input.prototype.ctor.call( this, domNode );
	},

} );

csContextBar.f_input_checkbox = xb.core.object.extend( csContextBar.f_input, {

	ctor: function( domNode ) {
		csContextBar.f_input.prototype.ctor.call( this, domNode );
	},

	reset: function() {
		this.set( this.domNode.getAttribute( "checked" ) );
	},

	set: function( value ) {
		this.domNode.checked = !!value;
	},

	value: function() {
		return this.domNode.checked;
	},

} );

csContextBar.f_input_select = xb.core.object.extend( csContextBar.f_input, {

	ctor: function( domNode ) {
		csContextBar.f_input.prototype.ctor.call( this, domNode );
		this.multiple = !!this.domNode.getAttribute( "multiple" );
	},

	reset: function() {
		var value = [];
		var selected = this.domNode.querySelectorAll( ":scope > option[selected]" );
		for ( var i = 0, il = selected.length; i < il; i++ ) {
			value.push( selected[ i ].value );
		}
		this.set( value );
	},

	set: function( value ) {
		var selected = ( value instanceof Array ) ? value : [ value ];
		var options = this.domNode.querySelectorAll( ":scope > option" );
		for ( var i = 0, il = options.length; i < il; i++ ) {
			options[ i ].selected = ( selected.indexOf( options[ i ].value ) > -1 );
		}
	},

	value: function() {
		var value = [];
		var options = this.domNode.querySelectorAll( ":scope > option" );
		for ( var i = 0, il = options.length; i < il; i++ ) {
			if ( options[ i ].selected ) {
				value.push( options[ i ].value );
			}
		}
		if ( !this.multiple ) {
			if ( !value.length ) {
				return null;
			}
			return value[ value.length - 1 ];
		}
		return value;
	},

} );


silk.html
	.query( [
		"body > .silk-contextbar input[type=text] := input",
		"body > .silk-contextbar input:not([type]) := input"
	] )
	.select( function( match ) {
		return csContextBar.f_input_text( match.input.domNode );
	} )
	.publish( [
		"silk/contextbar/input"
	] )
;

silk.html
	.query( [
		"body > .silk-contextbar input[type=checkbox] := input"
	] )
	.select( function( match ) {
		return csContextBar.f_input_checkbox( match.input.domNode );
	} )
	.publish( [
		"silk/contextbar/input"
	] )
;


silk.html
	.query( [
		"body > .silk-contextbar select := input"
	] )
	.select( function( match ) {
		return csContextBar.f_input_select( match.input.domNode );
	} )
	.publish( [
		"silk/contextbar/input"
	] )
;



silk.html
	.query( [
		"$(silk/contextbar/input) := input"
	] )
	.on( "events/mutations/change", function( evt ) {
		csContextBar.mutate( this.input )
	} )
;


silk.html
	.query( [
		"body[data-simply-edit] > :not(#silk-contextbar) "
	] )
	.on( "events/click", function( evt ) {
		csContextBar.close();
	}, 1000 )
;



silk.html
	.query( [
		"body[data-simply-edit] .silk-object.content-video := blokje"
	] )
	.on( "events/click", function( evt ) {
		csVideoBlokje( this.blokje.domNode );
		evt.preventDefault();
	} )
;