(function($){
    $.fn.imageplayer = 	function(options) {
   			   var defaults={images:{location:"",number:5},height:0,start:1,preload:false,autoplay:false,active:0,speed:2000,base:""};
   			   var opts = $.extend(defaults,options);
      return this.each(function(){imageplayer=new player(this,opts);return imageplayer.init();});
    };
})(jQuery);

function player(elm,opts) {
	var e = this.element = elm;
	this.settings = opts;
	this.playing = false;
  this.images=[];
	this.init = function(){        
    $(this.element).append( $("<div class='img-left'></div>").append( $("<div></div>").addClass("img-holder").append( $("<div></div>").addClass("img-holder-wrap") ) )
                                                             .append( $("<div></div>").addClass("img-navi").html("<span class='img-back'>Back</span><span class='img-stop'>Stop</span><span class='img-reload'>Reload</span><span class='img-play'>Play</span><span class='img-next'>Next</span>") ) )
                   .append($("<div />").addClass("img-list-container").append( $("<div></div>").addClass("img-list").attr("id","img-list") )
                                                                      .append( $("<div>&nbsp;</div>").addClass("img-up").click(this.scrollUp))
                                                                      .append( $("<div>&nbsp;</div>").addClass("img-dn").click(this.scrollDn)));

    var base = this.base = window.location.protocol + "//" + window.location.host + "/" + this.settings.images.location;

    //if(opts.preload)
    this.preload(base);

    $(".img-holder-wrap").html("<img src='"+ base+this.settings.start+".jpg' />");

    this.settings.active = this.settings.start;

    for(var x=1;x<=this.settings.images.number;x++) {
      $(".img-list").append( $("<div class='img-list-wrap'></div>").append( $("<img />").attr("src",base+x+".jpg") ) );
    }

    //Add Events
    $(".img-list-wrap img").click(function(e){
      var src = (e.target) ? e.target : e.srcElement;
      $(".img-holder-wrap img").attr("src",$(src).attr("src"));
      imageplayer.active = x;
    });
    $(".img-back").click( function()  { imageplayer.back(); } ).html("<img src='../includes/images/png/prev.png' alt='Previous' />");
    $(".img-stop").click( function()  { imageplayer.stop(); } ).html("<img src='../includes/images/png/stop.png' alt='Stop' />");
    $(".img-reload").click( function(){ imageplayer.reload(); } ).html("<img src='../includes/images/png/reload.png' alt='Reload' />");
    $(".img-play").click( function()  { imageplayer.play(); } ).html("<img src='../includes/images/png/play.png' alt='Play' />");
    $(".img-next").click( function()  { imageplayer.next(); } ).html("<img src='../includes/images/png/next.png' alt='Next' />");

    this.settings.height = $(".img-list-wrap").css("height");
    this.settings.height = this.settings.height.substring(0,this.settings.height.length-2);

    if(this.settings.autoplay){
      this.playing = true;
      this.imagePlay();
    }
  };
  this.preload=function(b){
      for(var x=0;x<this.settings.images.number;x++){
          this.images[this.images.length]=b+x+".jpg";
      }
  };
	this.imagePlay = function() {
		if ( (this.hasMore()) && (this.playing) ) {
			this.settings.active = this.settings.active+1;
			this.showImage();
			this.isPlaying = setTimeout("imageplayer.imagePlay()",this.settings.speed);
		} else {
			clearTimeout(this.isPlaying);
		}
	};
	this.back = function() {
		if (this.hasPrev()) {
			this.settings.active = this.settings.active - 1;
			this.showImage();
		}
	};
	this.play = function() {
		this.playing = true;
		this.imagePlay();
	};
	this.reload = function() {
		this.playing = false;
		this.settings.active = 1;
		this.showImage();
	};
	this.stop = function() {
		this.playing = false;
	};
	this.next = function() {
		if (this.hasMore()) {
			this.settings.active = this.settings.active+1;
			this.showImage();
		}
	};
	this.showImage = function() {
		$(".img-holder-wrap img").attr("src",this.images[this.settings.active]);
	};
	this.hasPrev = function() {
		return ((this.settings.active) > 1) ? true : false
	};
	this.hasMore = function() {
    return ((this.settings.active) < this.settings.images.number) ? true : false
	};
  this.scrollUp=function(){
      $(".img-list").scrollTop(1*$(".img-list").scrollTop()-(1*imageplayer.settings.height));
  };
  this.scrollDn=function(){
      $(".img-list").scrollTop(1*$(".img-list").scrollTop()+(1*imageplayer.settings.height));
  };
}