// JavaScript Document
function ImageSlider(eldiv, zoom, duration) {
	this.zoom = zoom || 1.1;
	this.eldiv = eldiv;
	this.duration = duration || 10000;
	this.imgarr = new Array();
	this.currentImgIndex = 0;
	this.currentImg = null;
	this.currentLoadingImage = null;
	var that = this;
	
	$(this.eldiv).find('img').each(function(index, img) {
		that.imgarr.push($(img).attr('src'));
		$(img).remove();
	});
	
	this.divheight = $(that.eldiv).height();
	this.divwidth = $(that.eldiv).width();
	
	this.divtop = $(that.eldiv).position().top;
	this.divleft = $(that.eldiv).position().left;
	
	$(this.eldiv).hover(function() {
					//Set the width and height according to the zoom percentage
					var width =that.divwidth * that.zoom;
					var height = that.divheight * that.zoom;
					
					movex = -0.5*(width - that.divwidth);
					movey = -0.5*(height - that.divheight);
					$(this).css('z-index', '2');
					//Move and zoom the image
					$(this).stop(true,true).animate({'width':width, 'height':height, 'top':that.divtop+movey, 'left':that.divleft+movex}, {duration:200});
					 
					
				},
				function() {
					//Reset the image
					$(this).stop(false,true).animate({'width':that.divwidth, 'height':that.divheight, 'top':that.divtop, 'left':that.divleft}, 100,function() {$(that.eldiv).css('z-index', '1');});
					
			 
		});
	
}
ImageSlider.prototype.loadNextImage = function () {
	
	var imagesrc = this.imgarr[this.currentImgIndex];
	this.currentImgIndex++;
	this.currentImgIndex%=this.imgarr.length;
	//var newimg = imgarr[imgarr[0]];
	var that = this;
	this.currentLoadingImage = new Image();
	$(this.currentLoadingImage)
	.load(function () {
		that.animateImg(function () {
				that.loadNextImage();
			});
		})
	.error(function () {alert("error");})
	.attr('src', imagesrc);

}
ImageSlider.prototype.animateImg = function (finish) {
	//appending image
	//$(rthis).hide();
	$(this.currentImg).remove();
	this.currentImg = this.currentLoadingImage;
	this.currentLoadingImage = null;
	
	$(this.eldiv).append($(this.currentImg));
	
	$(this.currentImg).css('position', 'absolute');
	
	//calculating size
	var oldheight = $(this.currentImg).height();
	var oldwidth = $(this.currentImg).width();
	var divwidth = $(this.eldiv).width()*this.zoom;
	var divheight = $(this.eldiv).height()*this.zoom;
	var anwidth = 0;
	var anheight = 0;
	
	if(oldwidth / oldheight > divwidth / divheight) {
		anwidth = divheight/oldheight*oldwidth;
		anheight = divheight;
	} else {
		anheight = divwidth/oldwidth*oldheight;
		anwidth = divwidth;
	}
	
	var newwidth = anwidth*1.3;
	var newheight = anheight*1.3;
	
	
	//choose animation direction
	var rnd = Math.round(Math.random()*5);
	
	if(rnd == 0) {
		// from topleft to downright
		var movey = -(newwidth-divwidth);
		var movex = -(newheight-divheight);
		anwidth = newwidth;
		anheight = newheight;
	} else if (rnd == 1) {
		// from downright to topleft
		$(this.currentImg).css('left', -(newwidth-divwidth));
		$(this.currentImg).css('top',-(newheight-divheight));
		var movey = 0;
		var movex = 0;
		anwidth = newwidth;
		anheight = newheight;
	} else if (rnd == 2) {
		// from leftdown to topright
		$(this.currentImg).css('left', '0 px');
		$(this.currentImg).css('top', -(newheight-divheight));
		var movey = -(newwidth-divwidth);
		var movex = 0;
		anwidth = newwidth;
		anheight = newheight;
	} else if (rnd == 3) {
		// from topright to downleft
		$(this.currentImg).css('left', -(newwidth-divwidth));
		$(this.currentImg).css('top', '0 px');
		var movey = 0;
		var movex = -(newheight-divheight);
		anwidth = newwidth;
		anheight = newheight;
	} else if(rnd == 4) {
		// zoom out
		$(this.currentImg).css('left', -0.5*(newwidth-divwidth));
		$(this.currentImg).css('top', -0.5*(newheight-divheight));
		var movex = -0.5*(anheight-divheight) ;
		var movey = -0.5*(anwidth-divwidth);
	} else if(rnd == 5) {
		//zoom in
		var tmp1 = anwidth;
		var tmp2 = anheight;
		anwidth = newwidth;
		anheight = newheight;
		newwidth = tmp1;
		newheight = tmp2;
		$(this.currentImg).css('left',  (-0.5*(newwidth-divwidth)));
		$(this.currentImg).css('top',  (-0.5*(newheight-divheight)));
		var movex = -0.5*(anheight-divheight) ;
		var movey = -0.5*(anwidth-divwidth);
	}
	
	
	$(this.currentImg).width(newwidth);
	$(this.currentImg).height(newheight);
	
	
	
	// display image + animate
	$(this.currentImg).stop(false,true)
			.fadeIn()
			.animate({'top':movex, 'left':movey, 'width': anwidth,'height': anheight}, this.duration, finish);
	
}