var carouselMountHandler = xb.core.object.extend( silkMountDOMNode, {

		factory: function( mount, domNode ) {
			return new carouselMountHandler( mount, domNode );
		},

		ctor: function( mount, domNode ) {
			this.owl = null;
			silkMountDOMNode.prototype.ctor.call( this, mount, domNode );
		},

		getValue: function() {
			var data =
				this.each( function( context, index ) {
//					console.warn( "each", this.domNode );
					if ( $( this.domNode.parentNode ).hasClass( "cloned" ) ) {
						return null;
					}
					return this.getValue();
				}, { mp: this } );
			return data;
		},

		display: function( data ) {
			var data = ( ! ( data instanceof Array ) ) ? [] : data.slice();
			if ( data.length < 2 ) {
				for ( var i = data.length; i < 2; i++ ) {
					data.push( {
						"image": {
							"src": "/images/placeholder.jpg"
						}
					} );
				}
			}
			
			this.render( data, true );
			if ( this.owl !== null ) {
				console.log( this.owl );
				$( this.owl ).trigger( "destroy.owl.carousel" );
			}
			var settings = xb.core.object.prototype.copy.call( carousel[ this.name ] );
			//console.log( "EDIT?", document.body.getAttribute( "data-simply-edit" ) );
			if ( document.body.getAttribute( "data-simply-edit" ) ) {
				settings[ "autoplay" ] = false;
				settings[ "mouseDrag" ] = false;
			}

			//console.log( "INITING OWL", this.domNode );
			this.owl = $( this.domNode ).owlCarousel( settings );
			$( "img[data-simply-src]" ).each( function() {
				//console.log( "IMG: ", this.getAttribute( "data-simply-src" ), "=>", this.getAttribute( "src" ) );
				this.setAttribute( "src", this.getAttribute( "data-simply-src" ) );
			} );
		}

	} );

	var carouselMount = xb.core.object.extend( silkNodeMount, {

		DOMNodeHandler: carouselMountHandler,

		ctor: function( domNode, name, resource ) {
			var self = this;
			silkNodeMount.prototype.ctor.call( this, domNode, name, resource );
		},

		onLoad: function() {
			console.log( "onLoad@carouselMount", this.resource.data[ this.name ] );
			this.display();
		},

		display: function() {
			var data = this.resource.data[ this.name ];
			if ( data instanceof Array ) {
				this.render( data, true );
			} else {
				console.error( "carouselMount::display()",  this.name, this.resource.data, "data is not an array" );
			}
		},

		onDOMChange: function( handler ) {


			var data = handler.getValue();
			var reload = ( this.resource.data[ this.name ].length !== data.length );
			console.log( "owl-carousel::onUpdateData", data, reload );
			this.resource.data[ this.name ] = data;
			if ( reload ) {
				this.display();
			}
		}

	} );

	var carouselResource = xb.core.object.extend( silkResource, {

		handlers: {
			"*": carouselMount
		},

		ctor: function( config ) {
			silkResource.prototype.ctor.call( this, config );
		},

		endpoint: function() {
			var result = "/";
			$( document ).find( "script[data-simply-endpoint]" ).each( function() {
				var _res = this.getAttribute( "data-simply-endpoint" );
				if( _res !== null ) {
					result = _res;
				}
			} );
			return result;
		},

		init: function() {
			var self = this;
			this.data = [];
			console.log( "carouselResource::init", this.endpoint() );


			var params = {}; // 
			this.loadURL( this.endpoint() + "data/carousel.json", null, function( result ) {
				console.log( "loaded", result );
//				self.data = result;
				self.load( result );
			} );
		},

		save: function() {
			var self = this;

			var params = JSON.stringify( this.data, null, "\t" );
			//console.log( "saving string", params );
			console.log( this.name, "saving data", this.data );

			this.putURL( this.endpoint() + "data/carousel.json", params, function( status, result ) {
				console.log( "saved", status, result );
			} );

		}

	} );