silk.html
		.query(
			"[data-simply-data=shop][data-silk-mount=categories] := node"
		)
		.select(
			function( m ) {
				return silk.shop.iface.categories( m.node.domNode );
			} 
		)
		.publish( "shop/categories/mount" )
	;

	silk.html
		.query(
			"$(shop/categories/mount) := mount .silk-object.category-pulldown.nav := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.categories.section( m.mount, m.object.domNode, false );
			}
		)
		.publish( "shop/categories/section" )
	;


	silk.html
		.query(
			"$(shop/categories/mount) := mount .silk-object.category-pulldown := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.categories.section( m.mount, m.object.domNode, true );
			}
		)
		.publish(
			"shop/categories/section"
		)
	;

	silk.html
		.query(
			"$(shop/categories/mount) := mount .silk-object.category-pulldown.category-search := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.categories.section_search( m.mount, m.object.domNode );
			}
		)
		.publish(
			"shop/categories/section"
		)
	;


	silk.html
		.query(
			"$(shop/categories/section) := section .silk-listItem := listItem > .silk-object.category-option := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.categories.section.option( m.section, m.listItem.domNode, m.object.domNode );
			} 
		)
		.publish( "shop/categories/option" )
	;


	silk.html
		.query(
			"[data-simply-data=shop][data-silk-mount=view] := node"
		)
		.select(
			function( m ) {
				return silk.shop.iface.view( m.node.domNode );
			} 
		)
		.publish( "shop/view/mount" )
	;


	silk.html
		.query(
			"$( shop/view/mount )[data-postings-view=list] := view"
		)
		.select(
			function( m ) {
				return silk.shop.iface.view.listing( m.view, m.view.domNode );
			}
		)
		.publish( "shop/view/listing" )
	;


	silk.html
		.query(
			"$( shop/view/mount )[data-postings-view=detail] := view"
		)
		.select(
			function( m ) {
				return silk.shop.iface.view.detail( m.view, m.view.domNode );
			}
		)
		.publish( "shop/view/detail" )
	;


	silk.html
		.query(
			"$( shop/view/listing ) := view > .silk-listItem[data-simply-template='Product List Heading'] > .silk-object := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.view.listing.bar( m.view, m.object );
			}
		)
		.publish( "shop/view/listing/bar" )
	;


	silk.html
		.query(
			"$( shop/view/listing/bar ) := bar .silk-object.result-display := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.view.listing.bar.display( m.bar, m.object );
			}
		)
		.publish( "shop/view/listing/bar/display" )
	;

	silk.html
		.query(
			"$( shop/view/listing/bar ) := bar .silk-object.result-sort := object"
		)
		.select(
			function( m ) {
				return silk.shop.iface.view.listing.bar.sort( m.bar, m.object );
			}
		)
		.publish( "shop/view/listing/bar/sort" )
	;


	/***

		Eventhandlers

	***/

	var followLink =
		function( link, preserve ) {
			var preserve = ( preserve === true ) ? true : false;
			var path = link.pathname;
			var shop = silk.shop;
			if ( typeof( shop ) !== "object" ) {
				return;
			}
			if ( path[ 0 ] !== "/" ) {
				path = "/" + path;
			}	
			if ( path.indexOf( shop.config.path ) !== 0 ) {
				return false;
			}

			shop.navigate( link.href, preserve );
			return true;
		}
	;

	silk.html
		.query( [
			"body.template-shop a[href]:not(.nonav) := link",
		] )
		.on( "events/click",
			function( evt ) {
				var in_m =
					silk.html
						.query( [
							"$( shop/view/mount )",
							"$( shop/categories/section ):not(.nav)"
						] )
						.match( evt.target )
				;
				var preserve = ( in_m !== null );

				if ( followLink( this.link.domNode, preserve ) ) {
					evt.preventDefault();
					evt.stopImmediatePropagation();
				}
			}
		)
	;

	silk.html
		.query(
			"$(shop/categories/mount) := mount"
		)
		.on( "events/dispatcher/render", function( evt ) {
			this.mount.update( evt.detail.object.__index );
		} )
	;

	silk.html
		.query(
			"$( shop/categories/section ) := section > .silk-list > .silk-listItem.category-name := name"
		)
		.on( "events/click",
			function( evt ) {
				evt.preventDefault();
				this.section.toggle();
			}
		)
	;

	silk.html
		.query(
			".silk-object.category-pulldown:not(.nav) $( shop/categories/option ) := option a := link"
		)
		.on( "events/click",
			function( evt ) {
				evt.preventDefault();
				evt.stopImmediatePropagation();
				this.option.toggle( this.link.domNode );
			}
		)
	;
/*
	silk.html
		.query(
			"$(shop/view/listing) := view"
		)
		.on( "events/dispatcher/render", function( evt ) {
			var bar = evt.target.querySelectorAll( ":scope > [data-simply-template='Product List Heading'] > .silk-object" );
			console.log( "bar", bar );
			//this.mount.update( evt.detail.object.__index );
		} )
	;
*/
	silk.html
		.query(
			"$( shop/categories/section ) := section input := input"
		)
		.on( "events/mutations/change",
			function( evt ) {
				evt.preventDefault();
				if ( this.input.domNode.value.length ) {
					this.input.domNode.classList.add( "not-empty" );
				} else {
					this.input.domNode.classList.remove( "not-empty" );
				}
				this.section.filter( this.input.domNode.value );
			}
		)
	;

	silk.html
		.query(
			"$( shop/categories/section ) := section input := input + .silk-elm.category-filter-close"
		)
		.on( "events/click",
			function( evt ) {
				this.input.domNode.value = "";
				this.input.domNode.classList.remove( "not-empty" );
				this.section.filter( this.input.domNode.value );
			}
		)
	;


	silk.html
		.query( [
			"$( shop/view/listing/bar/sort ) := sort select := select"
		] )
		.on( "events/mutations/change", function( evt ) {
			evt.stopImmediatePropagation();
			var mode = [], select = this.select.domNode;
			for ( var i = 0, il = select.options.length; i < il; i++ ) {
				var option = select.options[ i ];
				if ( option.selected ) {
					mode.push( option.value );
				}
			}
			console.log( "bar.sort::select", mode );
			silk.shop.selection.deselect( "offset" );
			silk.shop.selection.deselect( "sort" );
			for ( var i = 0, il = mode.length; i < il; i++ ) {
				silk.shop.selection.select( "sort", mode[ i ] );
			}
			silk.shop.view();
		} )
	;


	silk.html
		.query( [
			"$( shop/view/listing/bar/display ) := display .silk-elm.icon-tiles := icon"
		] )
		.on( "events/click", function( evt ) {
			silk.shop.selection.deselect( "offset" );
			this.display.select( "tiles", this.icon );
		} )
	;

	silk.html
		.query( [
			"$( shop/view/listing/bar/display ) := display .silk-elm.icon-detail := icon"
		] )
		.on( "events/click", function( evt ) {
			silk.shop.selection.deselect( "offset" );
			this.display.select( "detail", this.icon );
		} )
	;


	silk.html
		.query( [
			"$( shop/view/mount ) .silk-object.content-product:not(.detail) := object"
		] )
		.on( "events/click", function( evt ) {
			if ( document.body.getAttribute( "data-simply-edit" ) !== null || evt.which !== 1 ) {
				return;
			} 
			var link = this.object.domNode.querySelector( ".silk-elm.link > a" );
			if ( link !== null ) {
				var preserve = ( ( typeof( silk.shop.selection.path ) !== "string" ) || !silk.shop.selection.path.length );
				if ( followLink( link, true ) ) {
					evt.preventDefault();
					evt.stopImmediatePropagation();
				}

			}
		} )
	;




	silk.html
		.query(
			"$( shop/categories/section ) := section input := input"
		)
		.on( "events/mutations/change",
			function( evt ) {
				evt.preventDefault();
				this.section.filter( this.input.domNode.value );
			}
		)
	;




silk.shop.iface = {};

var iface = silk.shop.iface;

iface.object = xb.core.object.extend( {
	ctor: function( domNode ) {
		this.domNode = domNode;
	}
} );

iface.view = xb.core.object.extend( iface.object, {

	ctor: function( domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.mount = silk.shop.resource.mounts[ domNode.getAttribute( "data-silk-mount" ) ];
	},

} );

iface.view.list = xb.core.object.extend( iface.object, {

	ctor: function( view, domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.view = view;
	},

} );

iface.view.listing = xb.core.object.extend( iface.view.list, {

	ctor: function( view, domNode ) {
		iface.view.list.prototype.ctor.call( this, view, domNode );
	},

} );

iface.view.detail = xb.core.object.extend( iface.view.list, {

	ctor: function( view, domNode ) {
		iface.view.list.prototype.ctor.call( this, view, domNode );
	},

} );


iface.view.listing.bar = xb.core.object.extend( iface.object, {

	ctor: function( view, domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.view = view;
	},

} );

iface.view.listing.bar.display = xb.core.object.extend( iface.object, {

	ctor: function( bar, domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.bar = bar;
	},

	select: function( mode, domNode ) {
		console.log( "bar.display::select", mode );
		silk.shop.selection.deselect( "display" );
		silk.shop.selection.select( "display", mode );
		silk.shop.view();
	}

} );


iface.view.listing.bar.sort = xb.core.object.extend( iface.object, {

	ctor: function( bar, domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.bar = bar;
	},

} );


iface.categories = xb.core.object.extend( iface.object, {

	ctor: function( domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.mount = silk.shop.resource.mounts[ domNode.getAttribute( "data-silk-mount" ) ];
	},

	update: function( index ) {
		var selection = silk.shop.selection;
		var ts = Date.now();
		//console.error( "selection", selection );
		var options =
			silk.html
				.query( "$(shop/categories/option) := option [data-simply-field=category-id] := id " )
					.find( this.domNode )
		;

		for ( var i = 0, il = options.length; i < il; i++ ) {
			options[ i ].option.update( selection, index );

		}

		var te = Date.now();
		console.warn( "*tick*", ( te - ts) / 1000 );

	},

} );

iface.categories.section = xb.core.object.extend( iface.object, {

	ctor: function( categories, domNode, multi ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.multi = ( multi !== false ) ? true : false;
		this.categories = categories;
	},

	toggle: function() {
		if ( this.domNode.classList.contains( "open" ) ) {
			this.domNode.classList.remove( "open" );
			var input = this.domNode.querySelector( "input" );
			if ( input !== null && input.value.length ) {
				input.value = "";
				this.filter( "" );
			}
		} else {
			this.domNode.classList.add( "open" );						
		}
	},



	filter: function( string ) {
		var domNodeID = this.domNode.querySelector( ".silk-id.category-id" );
		var _name = domNodeID.textContent;
		var _value = string;
		var _parts = _value.toLowerCase().replace( /^\s+/, "" ).replace( /\s+$/, "" ).split( /\s+/ );
		var _partsLen = _parts.join( "" ).trim().length;
		console.log( _name, _value );
		var list = this.domNode.querySelectorAll( "[data-simply-list=category-items] [data-simply-field=category-name]" );
		var query = silk.html.query( ".silk-listItem := listItem > .silk-object.category-option := object" );
		for ( var i = 0, il = list.length; i < il; i++ ) {
			var item = list[ i ];
			var m = query.match( item );
			if ( m !== null ) {
				var content = item.getAttribute( "data-filter-content" );
				if ( content === null ) {
					content = item.textContent;
					item.setAttribute( "data-filter-content", content );
				}
				m.listItem.domNode.classList.remove( "filter-match" );
				m.listItem.domNode.classList.remove( "filter-mismatch" );
				if ( _partsLen === 0 ) {
					item.innerHTML = content;
					continue;
				}

				var o = -1;
				var f = [];
				var s = content.toLowerCase();
				for ( j = 0, jl = _parts.length; j < jl; j++ ) {
					var o = s.indexOf( _parts[ j ], o );
					if ( o > -1 ) {
						f.push( o );
					}
				}
				if ( f.length === _parts.length ) {
					for ( var j = f.length - 1; j >= 0; j-- ) {
						o = f[ j ];
						var str = _parts[ j ];
						var _ = content.substr( 0, o );
						_ += "<span class=\"highlight\">" + content.substr( o, str.length ) + "</span>";
						content = _ + content.substr( o + str.length );
					}
					m.listItem.domNode.classList.add( "filter-match" );
				} else {
					m.listItem.domNode.classList.add( "filter-mismatch" );
				}
				item.innerHTML = content;
			}
		}
	}
} );


iface.categories.section_search = xb.core.object.extend( iface.categories.section, {

	ctor: function( categories, domNode ) {
		iface.categories.section.prototype.ctor.call( this, categories, domNode, false );
		this.searches = iface.categories.section_search.searches;
	},

	filter: function( string ) {
		var self = this;
		var domNodeID = this.domNode.querySelector( ".silk-id.category-id" );
		var _name = domNodeID.textContent;
		var _value = string;
		var _parts = _value.toLowerCase().replace( /^\s+/, "" ).replace( /\s+$/, "" ).split( /\s+/ );
		var _partsLen = _parts.join( "" ).trim().length;

		var delay = 300;

		var op = this.searches[ _name ];
		if ( typeof( op ) === "undefined" ) {
			op = {
				ctime: Date.now(),
				cq: _value
			};
			this.searches[ _name ] = op;
			var execute =
				function() {
					var op = self.searches[ _name ];
					if ( typeof( op ) === "undefined" ) {
						console.error( "Canceled search op for", _name, "?" );
						return;
					}
					var t = Date.now();
					var dt = t - op.mtime;
					if ( dt > delay ) {
						console.log( "section_search::filter", _name, op.mq );	
						delete self.searches[ _name ];
						silk.shop.selection.deselect( "offset" );
						silk.shop.selection.deselect( _name );
						silk.shop.selection.select( _name, op.mq );
						silk.shop.view();
						return;
					}
					window.setTimeout(
						execute, ( delay - dt ) + 10
					);
				}
			;
			window.setTimeout(
				execute, delay
			);
		}
		op.mq = _value;
		op.mtime = Date.now();

	},


} );


iface.categories.section_search.searches = {};

iface.categories.section.option = xb.core.object.extend( iface.object, {

	ctor: function( section, domListItem, domNode ) {
		iface.object.prototype.ctor.call( this, domNode );
		this.domListItem = domListItem;
		this.section = section;
		this.__id = null;
	},

	id: function() {
		if ( this.__id !== null ) {
			return this.__id;
		}
		var _id = this.domNode.querySelector( "[data-simply-field=category-id]" ).textContent;
		this.__id = {
			name: _id.substr( 0, _id.indexOf( ":" ) ),
			value: _id.substr( _id.indexOf( ":" ) + 1 ),
			string: _id
		};
		return this.__id;
	},

	toggle: function( link ) {
		var id = this.id();
		console.log( "click", id);
		if ( typeof( silk.shop.selection.values.id ) !== "undefined" ) {
			silk.shop.selection.path( "" );
		}
		silk.shop.selection.deselect( "offset" );
		if ( link.classList.contains( "selected" ) ) {
			link.classList.remove( "selected" );
			this.domNode.classList.remove( "selected" );
			this.domListItem.classList.remove( "selected" );
			silk.shop.deselect( id.name, id.value );
		} else {
			if ( !this.section.multi ) {
				silk.shop.deselect( id.name );
			}
			link.classList.add( "selected" );
			this.domNode.classList.add( "selected" );
			this.domListItem.classList.add( "selected" );
			silk.shop.select( id.name, id.value );
		}
		silk.shop.view();		
	},

	update: function( selection, index ) {
		var id = this.id();
		var object = index[ id.string ];
		var selected = selection.isSelected( id.name, id.value );
	//	console.log( "isSelected(", id.name, ",", id.value, ")", selected );

		if ( object[ "category-empty" ] ) {
			this.domListItem.classList.add( "is-empty" );
		} else {
			this.domListItem.classList.remove( "is-empty" );					
		}
		var domNodeLink = this.domListItem.querySelector( "a" );
	//	if ( domNodeLink.href != object[ "category-name" ].href ) {
		if ( domNodeLink ) {
			domNodeLink.href = object[ "category-name" ].href;
		}
		if ( selected ) {
			this.domNode.classList.add( "selected" );					
			this.domListItem.classList.add( "selected" );					
			if ( domNodeLink ) {
				domNodeLink.classList.add( "selected" );
			}
		} else {
			this.domNode.classList.remove( "selected" );					
			this.domListItem.classList.remove( "selected" );					
			if ( domNodeLink ) {
				domNodeLink.classList.remove( "selected" );
			}
		}
	}

} );