(function($){
  
  $.fn.hint = function(){
    return this
      .stop()
      .animate({
      'left':'+10px'
    }, 'fast');
  }
  
  $.fn.unHint = function(){
    return this
      .stop()
      .animate({
        'left':'0'
      }, 'fast');
  }
  
  $.fn.toutInit = function(options){
    
    return this.each(function(i, element){
      
      var settings = $.extend({
        'scrollbarColor': 'rgb(0, 132, 255)',
        'scrollbarHandleColor': 'rgb(255, 153, 0)',
        'scrollbarOpacity': 1,
        'activated_once': false,
        'auto_close_seconds': 5
      }, options);


      settings.tout = $(element);
      
      
      settings.wrap = $('<div class="tout_outer_wrap"></div>').css({
        position: 'relative',
        top: '0',
        left: '0'
      });
      var $divs = settings.tout.children();

      settings.tout.children().wrapAll(settings.wrap);

      settings.initial = $divs.eq(0).css({'cursor':'pointer'});
      settings.scroller = $divs.eq(1);


      settings.scroller.children().wrapAll('<div class="tout_scroll_content"><div></div></div>');
      settings.scroll_content = settings.scroller.children().eq(0).css(
        {
          'position':'absolute',
          'width':'100%',
          'top':'0',
          'left':'0',
          'cursor':'url("/assets/images/openhand.cur"), default'
        })
        .bind('selectstart',function(e){
          e.preventDefault();
        });

      settings.scroller.css({
        position: 'absolute',
        width: '340px',
        top: '0',
        left: '370px',
        height: '451px',
        backgroundColor: '#F1F1F1',
        zIndex: '5'
      });


      settings.initial.css({
        position: 'absolute',
        top: '0',
        left: '0',
        height: '451px',
        width: '369px',
        backgroundColor: '#FFF',
        zIndex: '6'
      });

      settings.scroll_content.children().eq(0).css({'padding':'20px'});

      var $img = $('<img src="assets/images/corner_left.png" alt="" />').css({position: 'absolute', bottom: '0', left: '0', zIndex:'6'});
      settings.tout.append($img);

      settings.scrollbar = $("<div class='tout_scrollbar'><div></div></div>").css({
        'width': '10px',
        'height': settings.tout.height()+'px',
        'position': 'absolute',
        'top' : '0',
        'right' : '0',
        'backgroundColor': settings.scrollbarColor
      });
      settings.scrollbar_handle = settings.scrollbar.children().eq(0).css({
        'top':'0',
        'left':'0',
        'position':'absolute',
        'background': settings.scrollbarHandleColor,
        'width': '100%',
        'height': Math.ceil(settings.scroller.height()/settings.scroll_content.height() * settings.tout.height()) + 'px'
      });

      settings.mode = 'closed';
      settings.tout_width = settings.scroller.width();


      settings.scroller.append(settings.scrollbar.hide());

      settings.scroll_x;
      settings.scroll_speed = 0; //distance over time
      settings.scroll_time;
      settings.scroll_direction = 0;
      settings.y_max = 0;
      settings.y_min = -(settings.scroll_content.height() - settings.scroller.height());

      var calculateFinalPosition = function(){

        var position = settings.scroll_content.position().top;

        if((position < settings.y_max && settings.scroll_direction == -1) || (position > settings.y_min && settings.scroll_direction == 1)){
          return position;
        }

        if(settings.scroll_direction == -1){
          return 0;
        }else if(settings.scroll_direction == 1){
          return -(settings.scroll_content.height() - settings.scroller.height());
        }else{
          return settings.scroll_content.position().top;
        }

      }

      var calculateNextPosition = function(increment, animated){

        var next_position = settings.scroll_content.position().top - increment;

        if((next_position > settings.y_max || next_position < settings.y_min) && animated){
          settings.scroll_speed *= .5;
        }

        return next_position;

      }

      settings.move_listener = function(e){
        console.log('move_listener', options);
        var movement = scroll_x - e.pageY;
        var current_time = new Date();

        // time in milliseconds
        // distance in pixelx
        var distance = (movement);
        var time = current_time.getTime() - settings.scroll_time.getTime();
        var speed = distance/time; // pixels per millisecond

        settings.scroll_direction = ( movement > 0 ) ? 1 : -1;

        scroll_x = e.pageY;

        var next_position = calculateNextPosition(movement);

        settings.scroll_content.css({'top':(next_position)+'px'})
        settings.tout.trigger('tout.scroll');

        settings.scroll_time = current_time;
        settings.scroll_speed = speed;
      }

      settings.kinetic_timeout = null;

      settings.kinetic = function(){

        var pixels = Math.abs(settings.scroll_speed) * 30 * settings.scroll_direction;

        if(Math.abs(pixels) <= 1){
          clearInterval(settings.kinetic_timeout);
          settings.scroll_content.animate({
            top:calculateFinalPosition()+'px'
          }, {
            duration: 'fast',
            step:function(){
              settings.tout.trigger('tout.scroll');
            },
            complete:function(){
              settings.tout.trigger('tout.scroll_finished');
            }
          });
          return;
        }
        var next = calculateNextPosition(pixels, true);

        settings.scroll_content.css({
          'top':next+'px'
        });

        settings.scroll_speed *= .85;
        settings.tout.trigger('tout.scroll');
      }

      settings.initial_hint = function(e){
        $(this).hint();
      }

      settings.initial_unhint = function(e){
        $(this).unHint();
      }

      settings.auto_close_timer = null;

      settings.auto_close = function(){
        settings.auto_close_timer = setTimeout(function(){
          settings.initial.trigger('click');
        }, settings.auto_close_seconds * 1000);
      }

      settings.auto_close_cancel = function(){
        clearTimeout(settings.auto_close_timer);
      }

      // for opening and closing the interaction
      settings.initial.click(function(){
        //animate the the wrap      
        var params;

        params = (settings.mode == 'closed' ? {
          'left': '-'+settings.tout_width+'px'
        } : {
          'left': '0'
        });


        settings.mode = (settings.mode == 'closed' ? 'open' : 'closed');

        if(settings.mode == 'open'){
          settings.initial.bind('mouseover', settings.initial_hint);
          settings.initial.bind('mouseout', settings.initial_unhint);

          settings.scroller.bind('mouseover', settings.auto_close_cancel);
          settings.scroller.bind('mouseout', settings.auto_close);
        }else{
          
          settings.initial.unbind('mouseover', settings.initial_hint);
          settings.initial.unbind('mouseout', settings.initial_unhint);    
          
          settings.scroller.unbind('mouseover', settings.auto_close_cancel);
          settings.scroller.unbind('mouseout', settings.auto_close);
          
          settings.initial.unHint();
          settings.auto_close_cancel();
        }


        settings.tout.trigger('tout.before_'+settings.mode);
        settings.tout.children().eq(0).animate(params, { duration:'fast', complete:function(){
          settings.tout.trigger('tout.after_'+settings.mode);
        }});      
      });

      settings.tout.bind('tout.before_open', function(event){
        if(!settings.activated_once){
          settings.scroll_content.css({
            'top':'-'+settings.scroll_content.height()+'px'
          });
        };
      });

      settings.tout.bind('tout.after_open', function(event){
        //add the scrollbar ui

        if(settings.scroll_content.height() > settings.scroller.height()){
          settings.scrollbar.fadeIn(500, function(){
            settings.scrollbar.fadeOut('slow');
          });
        }

        if( !settings.activated_once ){
          settings.activated_once = true;
          settings.scroll_content.animate({
            top:'0px'
          }, {
            duration: 'slow',
            step:function(){
              settings.tout.trigger('tout.scroll');
            },
            complete:function(){
              settings.scroll_content.animate({
                top:'0'
              }, {
                duration: 'fast',
                step:function(){
                  settings.tout.trigger('tout.scroll');
                }
              });
            }
          });
        }

      });

      settings.tout.bind('tout.before_closed', function(event){
        settings.scrollbar.fadeOut();
      });

      settings.tout.bind('tout.scroll', function(event){
        //get the touts y_offset and then
        var ratio = settings.scroll_content.position().top/settings.scroll_content.height();
        settings.scrollbar_handle.css({'top': (settings.scrollbar.height() * -ratio) + 'px'});
      });

      settings.tout.bind('tout.scroll_finished', function(event){
        settings.scrollbar.fadeOut('slow');
      });

      if(settings.scroll_content.height() > settings.scroller.height()){


        settings.scroll_content.bind('mousedown', function(e){
          if (e.which == 1) e.preventDefault();
          //activate mouse listening
          // can we get the pageX here
          clearInterval(settings.kinetic_timeout);
          scroll_x = e.pageY;
          settings.scroll_speed = 0;
          settings.scroll_time = new Date();
          console.log(settings.move_listener);
          $('body').bind('mousemove', settings.move_listener);
          settings.scroll_content.stop();
          settings.scrollbar.stop(false, true);
          settings.scrollbar.fadeIn('fast');
          settings.scroll_content.css({'cursor':'url(/assets/images/closedhand.cur), default'})
        });

        $('body').bind('mouseup', function(e){
          settings.scroll_content.css({'cursor':'url(/assets/images/openhand.cur), default'})
          $('body').unbind('mousemove', settings.move_listener);
          settings.scrollbar.stop(false, true);

          var $spd = Math.abs(settings.scroll_speed*1000);
          //attempt iphone like physics
          if($spd > 250){
            settings.kinetic_timeout = setInterval(settings.kinetic, 30); 
          }else{
            if(settings.activated_once){
              settings.scroll_content.animate({
                'top':calculateFinalPosition()+'px'
              }, {
                duration: 'fast',
                step:function(){
                  settings.tout.trigger('tout.scroll');
                },
                complete:function(){
                  settings.tout.trigger('tout.scroll_finished');
                }
              });
            }
          }

        });

      }
    });
    
        
  }
  
})(jQuery);

$(document).ready(function(){
	$('.tout_v.interactive').toutInit();
});