silk.basket = ( xb.core.object.extend( {

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

	init: function( resource ) {
		this.resource = resource;
		var self = this;
		$( this.domNode ).on( "click touchend", function( evt ) {
			self.__onClick( evt );
//			evt.stopImmediatePropagation();
		} );

		silk.events.add( [
			{
				on: [ "scroll", "resize" ],
				element: window,
				method: function( evt ) {
					self.__onViewportChange( evt );
				}
			}
		] );
		self.__onViewportChange();
	},


	__onViewportChange: function( evt ) {
		var basket = $( ".silk-object.basket:not(.inline)" );
		if ( basket.length ) {
			if ( !basket.hasClass( "filled" ) ) {
				basket.removeClass( "floating" );
				basket.removeClass( "open" );
				return;
			}
			var vpRect = basket.parents( "body > .silk-list > .silk-listItem > .silk-object" )[ 0 ].getBoundingClientRect();
			var pRect = basket[ 0 ].parentNode.getBoundingClientRect();
			var rect = basket[ 0 ].getBoundingClientRect();
			var offset = ( ( vpRect.left + vpRect.width ) - document.body.clientWidth );
			if ( pRect.top + ( pRect.height / 2 ) < 0 ) {
				basket.addClass( "floating" );
			} else {
				basket.removeClass( "floating" );
			}
			if ( !basket.hasClass( "open" ) ) {
				basket.css( "top", -( pRect.top ) + "px" );
			}
			basket.css( "right", offset + "px" );
		
		}
	},

	__onClick: function( evt ) {
		var target = evt.target;
		console.log( "silk.basket::__onClick", evt.target );
		if ( document.body.getAttribute( "data-simply-edit" ) ) {
			console.warn( "silk.basket::__onClick nothing todo here since we are in editmode" );
			return;
		}
		if ( $( target ).hasClass( "basket-icon" ) || $( target ).parents( ".basket-icon" ).length ) {
			var basket = $( target ).parents( ".silk-object.basket" );
			if ( basket.length ) {
				basket.toggleClass( "open" );
				console.error( "toggle" );
				evt.preventDefault();
				
			}
		}
		var product = $( target ).parents( ".silk-object.basket-product" );

		var add = 0;
		if ( $( target ).hasClass( "icon" ) ) {
			if ( $( target ).hasClass( "minus" ) ) {
				add = -1;
			} else if ( $( target ).hasClass( "plus" ) ) {
				add = 1;
			} else if ( $( target ).hasClass( "delete" ) ) {
				var amount = product.find( ".silk-elm.basket-amount" );
				if ( amount.length ) {
					add = -( amount[ 0 ].textContent );
				}
			}
		}
		if ( add !== 0 ) {
			if ( product.length ) {
				var links = product.find( ".silk-elm.product-link > a" );
				var options = product.find( ".silk-elm.product-option" );
				if ( links.length && options.length ) {
					this.add( links[ 0 ].href, {
						"amount": add,
						"option": options[ 0 ].textContent
					} );
				}
			}
			evt.preventDefault();
		}
		this.__onViewportChange( evt );
	},

	add: function( url, params ) {
		var self = this;
		var params = ( typeof( params ) === "object" ) ? params : {};
		var http = new XMLHttpRequest();
		http.open( "post", url + "basket.add.json.php", true );
		http.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" );
		http.onreadystatechange = function() {
			if ( http.readyState == 4 ) {
				if ( http.status == 200 ) {
					console.log( "Added", url );
					self.resource.init();
					window.setTimeout( function() {
						self.__onViewportChange();
					}, 200 );
				}
			}
		};
		http.send( jQuery.param( params ) );		
		if ( params.checkout === true ) {
			console.error( "FIXME:", "haal checkout url uit een data-checkout-url attribuut - waarde daarvan via config!" );
			window.location = "/bezahlen/";
		}
	}


} ) )( document );