var BF_Effect = {
  
  /**
  *   ScrollIntoView - scrolls the page vertically so that the specified element is in the viewport
  *
  */
  ScrollIntoView: function (element,duration) {
    if(duration===undefined) { var duration = 0.5; } 
    var viewport_height = document.viewport.getHeight();
    var element_height = $(element).getHeight();
    
    var scroll_to = document.viewport.getScrollOffsets().top + $(element).viewportOffset().top; // where should we scroll to
    var scroll_by = Math.ceil(scroll_to/duration/100); // how many pixels do we need to scroll by each time?
    // adjust scroll to based on div height and whether we're scrolling up or down
    if( $(element).viewportOffset().top > 0) {
      // element is below current view port so make sure we get the whole element in view
      scroll_to -= viewport_height;
      if( viewport_height >= element_height ) {
        // the div is smaller than the viewport so make sure bottom of it is in view
        scroll_to += element_height;
      } else { 
        // the div is bigger than the viewport make sure top is in view, rather than bottom
        scroll_to += viewport_height - 30; // some extra padding
      }
    } else {
      // element is above current viewport so scroll up
      scroll_by *= -1;
    }
    
    // _doScroll function just scrolls the page until we're in the right spot
    var _doScroll = function(scroll_to,scroll_by) {
      var now_top = document.viewport.getScrollOffsets().top;
      if( (scroll_by < 0 && now_top > scroll_to) || (scroll_by > 0 && now_top < scroll_to) ) {
        window.scrollTo(0, Math.round(now_top + scroll_by));
		// setTimeout(_doScroll,1,scroll_to,scroll_by);            
    setTimeout(function(){_doScroll(scroll_to,scroll_by)},1);            
      }          
    }        
	// setTimeout(_doScroll,1,scroll_to,scroll_by);        
    setTimeout(function(){_doScroll(scroll_to,scroll_by)},1);            
  },
  
  /**
  *   FadeOut - fades an element out and then hides it
  *
  */
  FadeOut: function(element, opacity) {    
    if(! opacity) {
    	$(element).setOpacity(1).show();
    	opacity = 100 - 2;
    	setTimeout(function () { BF_Effect.FadeOut(element, opacity) },5);
    } else {
    	opacity = opacity - 2;
    	if(opacity > 0) {
    		$(element).setOpacity(opacity/100);
	    	setTimeout(function () { BF_Effect.FadeOut(element, opacity) },5);    		
    	} else {
    		$(element).hide();    		
    	}
    }    
  },
  
  /**
  *   FadeIn - fades an element in
  *
  */
	FadeIn: function(element, opacity) {
		try {
			if(! opacity) {
				$(element).setOpacity(.01);
				$(element).show();
				opacity = 1;
				setTimeout(function () { BF_Effect.FadeIn(element, opacity) },5);
			} else {
				opacity = opacity + 2;
				if(opacity < 100) {
					$(element).setOpacity(opacity/100);
					setTimeout(function () { BF_Effect.FadeIn(element, opacity) },5);    		
				} else {
					$(element).setOpacity(1);
	    		}
	    	}
		} catch(e) {
			console.error(e);
		}    
	}
}

Object.extend(Element.Methods, {
	showOnScreen: function(element, duration) {
		element.show();
		BF_Effect.ScrollIntoView(element, duration);
	}
});
Element.addMethods();