( function( $ ) {

	fashionation.wishlistpanel = ( function() {
		return new function() {
			var self = this;
			var panelAnimationTime = 600;
			var clipBlendTime = 200;
			var curtainAnimationTime = 300;

			this.init = function() {
				self.preloadImages();
				self.attachWishListPanelInteraction();
				self.animateDancingIcon();
			};

			this.preloadImages = function() {
				fashionation.layout.preloadImages( '/composite_styles/com.fashionation.web.components.wishlist.WishListPanel/resources/images/', [
				        'wishListPanelBottom.png', 'wishListPanelMiddle.png', 'wishListPanelTop.png' ] );
			};

			this.attachWishListPanelInteraction = function() {
				fashionation.event.bind( 'wishlist.sideclip.loaded', self.attachSideclipSpinner );
				fashionation.event.bind( 'wishlist.panel.loaded', self.extractWishListPanel );
				fashionation.event.bind( 'wishlist.panel.loaded', self.extractSideClips );
				fashionation.event.bind( 'wishlist.panel.loaded', self.finishSideclipSpinner );
				self.attachCloseAction();
			};

			this.attachSideclipSpinner = function() {
				$( '.WishListContainer .SideButtonClip a' ).click( function() {
					fashionation.loadingspinner.startUpdateRequestFor( $( '.WishListContainer .SideButtonClip a' ) );
				} );
			};

			this.finishSideclipSpinner = function() {
				fashionation.loadingspinner.finishUpdateRequestFor( $( '.WishListContainer .SideButtonClip a' ) );
			};

			this.extractWishListPanel = function() {
				var $panel = $( 'body > .PageContainer > .WishListContainer .WishListPanel' );
				if( !$panel.length ) {
					return;
				}
				var $curtain = self.createCurtain( 'WishList' );
				var $overlay = self.createTopLevelOverlay( 'WishList', $panel );
				self.adaptWishlistOverlayPosition( $overlay );
				self.showOverlay( $overlay, $curtain );
			};

			this.createCurtain = function( overlayClass ) {
				var $curtain = $( '<div class="Curtain"/>' );
				$curtain.addClass( overlayClass );
				fashionation.layout.getOrCreateTopLevelContainer().append( $curtain );
				$curtain.click( self.onCurtainClick );
				return $curtain;
			};

			this.onCurtainClick = function() {
				var $closeAction = $( '#topLevelContainer > .WishList.TopOverlay .WishListPanel .close-panel-action' );
				$closeAction.click();
				return false;
			};

			this.createTopLevelOverlay = function( overlayClass, $content ) {
				var $overlay = $( '<div class="TopOverlay"/>' );
				$overlay.addClass( overlayClass );
				fashionation.layout.getOrCreateTopLevelContainer().append( $overlay );
				$overlay.append( $( '<div class="PanelTop"/>' ) );
				var $middlePanel = $( '<div class="PanelMiddle"/>' );
				$overlay.append( $middlePanel );
				$middlePanel.append( $content );
				$overlay.append( $( '<div class="PanelBottom"/>' ) );
				return $overlay;
			};

			this.extractSideClips = function() {
				var $overlay = $( '#topLevelContainer > .WishList.TopOverlay' );
				var $newClips = $overlay.find( '.WishListPanel .PanelButtonClip' );
				if( !$newClips.length ) {
					return;
				}
				var $oldClips = $overlay.find( '> .PanelButtonClip' );
				$oldClips.remove();
				$overlay.prepend( $newClips );
			};

			this.adaptWishlistOverlayPosition = function( $overlay ) {
				$overlay.css( {
				    top : $( window ).scrollTop() + 'px',
				    left : 5 + 'px'
				} );
			};

			this.attachCloseAction = function() {
				var $closeAction = $( '#topLevelContainer > .WishList.TopOverlay .WishListPanel .close-panel-action' );
				$closeAction.live( 'click', self.onOverlayCloseActionClick );
			};

			this.onOverlayCloseActionClick = function() {
				self.closeOverlay();
			};

			this.showOverlay = function( $overlay, $curtain ) {
				$( 'body > .PageContainer > .WishListContainer' ).fadeOut( clipBlendTime );
				var targetLeftValue = $overlay.css( 'left' );
				$overlay.hide();
				$overlay.css( 'left', self.getHiddenLeftOffset() + 'px' );
				$overlay.fadeIn( clipBlendTime, function() {
					$overlay.animate( {
						'left' : targetLeftValue
					}, panelAnimationTime );
					if( $.browser.msie ) {
						$curtain.show();
					} else {
						$curtain.fadeIn( curtainAnimationTime );
					}
				} );
			};

			this.getHiddenLeftOffset = function() {
				var topLevelContainerOffset = fashionation.layout.getOrCreateTopLevelContainer().offset();
				return -topLevelContainerOffset.left - 969;
			};

			this.closeOverlay = function() {
				var $overlay = $( '#topLevelContainer > .WishList.TopOverlay' );
				self.hideAndRemoveOverlay( $overlay, $( '#topLevelContainer > .WishList.Curtain' ) );
				self.restoreWishListPanel( $overlay );
			};

			this.hideAndRemoveOverlay = function( $overlay, $curtain ) {
				if( $.browser.msie ) {
					$curtain.remove();
				} else {
					$curtain.fadeOut( curtainAnimationTime, function() {
						$curtain.remove();
					} );
				}
				$overlay.animate( {
					left : self.getHiddenLeftOffset() + 'px'
				}, panelAnimationTime, function() {
					$overlay.remove();
					$( 'body > .PageContainer > .WishListContainer ' ).show();
				} );
			};

			this.restoreWishListPanel = function( $overlay ) {
				var $panel = $overlay.find( '.WishListPanel' );
				var $clone = $panel.clone();
				$( 'body > .PageContainer > .WishListContainer div' ).append( $clone );
				$panel.attr( 'id', '' );
			};

			this.animateDancingIcon = function() {
				var $iconContainer = $( '.WishListContainer .DancingIcon' );
				var $container = $iconContainer.clone();
				fashionation.layout.getOrCreateTopLevelContainer().append( $container );
				$( '.wishlist-icon-dance' ).live( 'click', self.letIconDance );
			};

			this.letIconDance = function() {
				var $icon = $( '#topLevelContainer .DancingIcon .Icon.Original' );
				self.letOneIconDance( $icon );
				window.setTimeout( function() {
					self.letOneIconDance( $icon );
				}, 200 );
				window.setTimeout( function() {
					self.letOneIconDance( $icon );
				}, 400 );
			};

			this.letOneIconDance = function( $icon ) {
				var $duplicate = $icon.clone();
				$duplicate.removeClass( 'Original' );
				$icon.after( $duplicate );
				$duplicate.width( 20 ).height( 20 );
				$duplicate.css( {
				    'top' : '-10px',
				    'left' : '-10px',
				    'opacity' : 0.8
				} );
				$duplicate.show();
				$duplicate.animate( {
				    'width' : 200,
				    'height' : 200,
				    'top' : '-100px',
				    'left' : '-100px',
				    'opacity' : 0
				}, 1000, function() {
					$duplicate.remove();
				} );
			};

		};
	} )();

	// init this component
	fashionation.event.bind( 'init.components', function() {
		fashionation.wishlistpanel.init();
	} );

} )( jQuery );