if ( ! $defined( SK.GP ) ) {
   SK.GP = {};
   
   SK.GP.Utils = {
      addPlugin: function( json, callback ) {
         json = JSON.decode( JSON.encode( json ) );
         $( window ).addEvent( 'domready', function( ) { callback( json ); } );
      }
   }
}



SK.GP.Slide = new Class({
   initialize: function( config ) {
      this.config = config;
      if ( ! $defined(this.config.navigation_loop) ) {
         this.config.navigation_loop = 0;
      }
      if ( ! $defined(this.config.navigation_align) ) {
         this.config.navigation_align = 1;
      }
   },
   
   display: function( ) {
      var main       = $(this.config.id);
      var wrapper    = (main.getChildren('.gp-wrapper'))[0];
      var inside     = (wrapper.getChildren('.gp-inside'))[0];
      var images     = (inside.getChildren('.gp-images'))[0];
      var nav_left   = (main.getChildren('.gp-nav-left'))[0];
      var nav_right  = (main.getChildren('.gp-nav-right'))[0];
      
      var thumb_sizes  = this.config.thumb_size.split('x');
      var thumb_width  = thumb_sizes[ 0 ].toInt();
      var thumb_height = thumb_sizes[ 1 ].toInt();
      
      this.images_placeholder = images;
      this.nav_left           = nav_left;
      this.nav_right          = nav_right;
      this.thumb_width        = thumb_width;
      this.thumb_height       = thumb_height;
      
      if ( this.config.navigation_align ) {
         nav_left.setStyles({
            'top': thumb_height / 2 - nav_left.getStyle('height').toInt() / 2,
            'left': 0
         });
         nav_right.setStyles({
            'top': thumb_height / 2 - nav_left.getStyle('height').toInt() / 2,
            'left': thumb_width - nav_right.getStyle('width').toInt()
         });
      }
      
      images.setStyle('width', this.config.images.length * thumb_width);
      images.setStyle('height', thumb_height);
            
      // Attach the navigation actions
      nav_left.store('h', this);
      [ 'click', 'mouseenter', 'mouseleave' ].each(function( e_id ) {
         nav_left.removeEvents( e_id );
         nav_right.removeEvents( e_id );
      });
      nav_left.addEvents({
         'click': function( ) {
            this.retrieve('h').moveLeft(this);
         },
         'mouseenter': function( ) {
            this.addClass( 'gp-mover' );
         },
         'mouseleave': function( ) {
            this.removeClass( 'gp-mover' );
         }
      });
      
      nav_right.store('h', this);
      nav_right.addEvents({
         'click': function( ) {
            this.retrieve('h').moveRight(this);
         },
         'mouseenter': function( ) {
            this.addClass( 'gp-mover' );
         },
         'mouseleave': function( ) {
            this.removeClass( 'gp-mover' );
         }
      });
      
      // Dump the images in the placeholder
      this.current_index = 0;
      if ( this.config.images.length > 0 ) {
         this.config.images.each(function(img_config){
            this.addImage( img_config );
         }, this);
      }
      
      // Init the navigation state
      if ( this.config.navigation_loop == 0 ) {
         this.setNavigationState();
      }
   },
   
   addImage: function( img_config ) {
      var a = new Element('a', {
         'href': img_config.link
      });
      var img = new Element('img', {
         src: img_config.thumb_url,
         title: img_config.caption,
         alt: img_config.alt,
         id: img_config.id,
         border: 0
      });
      for ( var i in img_config.image_attributes ) {
         img.set(i, img_config.image_attributes[i]);
      }
      img.inject( a );
      a.inject( this.images_placeholder );
   },
   
   moveLeft: function( nav_obj ) {
      this.move( -1, nav_obj );
   },
   
   moveRight: function( nav_obj ) {
      this.move( +1, nav_obj );
   },
   
   move: function( direction, nav_obj ) {
      // Check if on the last index and we want to move forward
      if ( this.isLastIndex( this.current_index ) && direction == 1 && this.config.navigation_loop == 0 ) {
         return;
      }
      
      // Check if on the first index and we want to move backwards
      if ( this.isFirstIndex( this.current_index ) && direction == -1 && this.config.navigation_loop == 0 ) {
         return;
      }
      
      this.current_index += direction;
      
      if ( this.current_index < 0 ) {
         this.current_index = this.config.images.length;
         this.images_placeholder.setStyles({
            left: this.current_index * this.thumb_width * ( -1 )
         });
         this.current_index = this.config.images.length - 1;
      }
      if ( this.current_index > this.config.images.length - 1 ) {
         this.current_index = -1;
         this.images_placeholder.setStyles({
            left: this.current_index * this.thumb_width * ( -1 )
         });
         this.current_index = 0;
      }
      
      // Slide the whole images placeholder
      this.images_placeholder.morph({
         left: this.current_index * this.thumb_width * ( -1 )
      });      
      
      // Enable/disable navigation
      if ( this.config.navigation_loop == 0 ) {
         this.setNavigationState();
      }
   },
   
   setNavigationState: function( ) {
      this.enableNavigation( this.nav_left );
      this.enableNavigation( this.nav_right );
      
      if ( this.isFirstIndex( this.current_index ) ) {
         this.disableNavigation( this.nav_left );
      }
      if ( this.isLastIndex( this.current_index ) ) {
         this.disableNavigation( this.nav_right );
      }
   },
   
   isFirstIndex: function( image_index ) {
      return image_index == 0;
   },
   
   isLastIndex: function( image_index ) {
      return image_index == this.config.images.length - 1;
   },
   
   disableNavigation: function( nav_obj ) {
      nav_obj.addClass('gp-disabled');
   },
   
   enableNavigation: function( nav_obj ) {
      nav_obj.removeClass('gp-disabled');
   }
});