var tips_images = new Array();
var tips_index = 0;
$(document).ready( function() {

  // hide container
  $("#tips").hide();
  // hide images
  $("#tips img").hide();
  // show container
  $("#tips").show();
  // get image paths
  $("#tips img").each( function(i){
	tips_images[tips_images.length] = this.src;
  });
  // create visible image
  $("#tips").append( '<img id="tips_img" />' );	
  // put first image
  tips_setImage(tips_index);
  // create nav
  nav = '<div id="tips_nav">Image <span id="tips_index">1</span> of ' + tips_images.length;
  if( tips_images.length > 1 ){
	nav += '  <a id="tips_next" href="javascript:void(0);">next &raquo;</a>';
  }
  nav += '</div>';
  $("#tips").append(nav);

  // bind click to nav
  $("#tips_next").click( function(){ tips_nextImage() } );
});

function tips_setImage(i){
  $("#tips_img").attr("src",tips_images[i]);
  $("#tips_index").html((i+1));
}

function tips_nextImage(){
  tips_index++;
  if(tips_index == tips_images.length) tips_index=0;
  tips_setImage(tips_index);
  this.blur();
}