function MyPhotoSlide(Conf) {

	this.PhotoSlideID = "PhotoSlideID"+Math.round(Math.random()*10000);
	this.backgroundColor = Conf['bgColor'];
	this.PhotoSet = Conf['photo'];

	this.font = "verdana";
	
	this.PhotoSlideContainer = null;
	this.PhotoSlideInnerContainer = null;
	this.PhotoSlideBackground = null;
	this.PhotoContentArea = null;
	this.PhotoDisplayArea = null;
	this.PhotoNavigator = null;
	this.ButtonNext = null;
	this.ButtonPrevious = null;
	this.LoadingStatus = null;
	
	
	this.ActiveImagePosition = null;
	
	this.init();

}


MyPhotoSlide.prototype.init = function() {


	var _self = this;

	/* init UI */
	var Container = document.createElement("div");
	$(Container).attr("style","font-family:"+_self.font );
	$(Container).css("position","fixed");
	$(Container).css("zIndex","2");
	$(Container).css("width","100%");
	$(Container).css("height","100%");
	$(Container).css("top","0px");
	$(Container).css("left","0px");
	$(Container).css("display","none");
	
	_self.PhotoSlideContainer = $(Container);
	
	
	var InnerContainer = document.createElement("div");
	$(InnerContainer).css("position","relative");
	$(InnerContainer).css("width","100%");
	$(InnerContainer).css("height","100%");
	
	$(InnerContainer).appendTo($(Container));
	
	_self.PhotoSlideInnerContainer = $(InnerContainer);
	

	var Background = document.createElement("div");
	$(Background).css("position","absolute");
	$(Background).css("width","100%");
	$(Background).css("height","100%");
	$(Background).css("top","0px");
	$(Background).css("left","0px");
	$(Background).css("opacity","0");
	$(Background).css("backgroundColor",_self.backgroundColor);
	
	$(Background).appendTo($(InnerContainer));
	
	$(Background).click(function() {
		_self.close();
	});
	
	_self.PhotoSlideBackground = $(Background);
	

	
	var ContentArea = document.createElement("div");
	$(ContentArea).css("position","relative");
	$(ContentArea).css("padding","6px");
	$(ContentArea).css("overflow","hidden");
	$(ContentArea).css("margin","0px auto");
	$(ContentArea).css("height","auto");
	$(ContentArea).css("backgroundColor","#ffffff");
	$(ContentArea).appendTo($(InnerContainer));
	_self.PhotoContentArea = $(ContentArea);
	
	
	// Display Image Area
	var PhotoDisplayArea = document.createElement("div");
	$(PhotoDisplayArea).css("float","left");
	$(PhotoDisplayArea).css("overflow","hidden");
	$(PhotoDisplayArea).css("margin","0px auto");
	$(PhotoDisplayArea).css("display","inline");
	$(PhotoDisplayArea).css("clear","both");
	$(PhotoDisplayArea).appendTo($(ContentArea));
	_self.PhotoDisplayArea = PhotoDisplayArea;
	
	// Loading Status 
	var LoadingStatus = document.createElement("div");
	$(LoadingStatus).css("height","30px");
	$(LoadingStatus).css("width","70px");
	$(LoadingStatus).css("display","none");
	$(LoadingStatus).css("clear","both");
	$(LoadingStatus).html('Loading ..');
	$(LoadingStatus).appendTo($(ContentArea));
	_self.LoadingStatus = LoadingStatus;
	
	
	// Display Image Area
	var Break =  document.createElement("div");
	$(Break).css("clear","both");
	$(Break).appendTo($(ContentArea));
	
	
	
	// Navigator
	var PhotoNavigator =  document.createElement("div");
	$(PhotoNavigator).css("position","relative");
	$(PhotoNavigator).css("display","none");
	$(PhotoNavigator).css("clear","both");
	$(PhotoNavigator).css("margin-top","10px");
	$(PhotoNavigator).css("backgroundColor","#FFFFFF");
	$(PhotoNavigator).appendTo($(ContentArea));
	
	_self.PhotoNavigator = $(PhotoNavigator);
	
	// Button Next
	var ButtonNextPhoto =  document.createElement("div");
	$(ButtonNextPhoto).html("Next >>");
	$(ButtonNextPhoto).css("float","right");
	$(ButtonNextPhoto).css("fontWeight","bold");
	$(ButtonNextPhoto).css("width","48%");
	$(ButtonNextPhoto).css("color","#666666");
	$(ButtonNextPhoto).css("fontSize","12px");
	$(ButtonNextPhoto).css("cursor","pointer");
	$(ButtonNextPhoto).css("textAlign","right");
	$(ButtonNextPhoto).click(function() { _self.nextImage(); } );
	$(ButtonNextPhoto).appendTo($(PhotoNavigator));
	_self.ButtonNext = $(ButtonNextPhoto);
	
	// Button Previous
	var ButtonPrevPhoto =  document.createElement("div");
	$(ButtonPrevPhoto).html("<< Perv");
	$(ButtonPrevPhoto).css("float","left");
	$(ButtonPrevPhoto).css("fontWeight","bold");
	$(ButtonPrevPhoto).css("width","48%");
	$(ButtonPrevPhoto).css("color","#666666");
	$(ButtonPrevPhoto).css("fontSize","12px");
	$(ButtonPrevPhoto).css("cursor","pointer");
	$(ButtonPrevPhoto).css("textAlign","left");
	$(ButtonPrevPhoto).click(function() { _self.PrevImage(); } );
	$(ButtonPrevPhoto).appendTo($(PhotoNavigator));
	_self.ButtonPrevious = $(ButtonPrevPhoto);
	
	// Break Navigator
	var Break =  document.createElement("div");
	$(Break).css("clear","both");
	$(Break).appendTo($(PhotoNavigator));
	
	
	

	$(Container).appendTo($('body'));
	
	/* End init UI */
	
	
	
	
	
	/* init Photo */
	
	_self.PhotoSet.each(function(i,el) {
		$(el).css("cursor","pointer");
		$(el).click(function() {
							 
			$(_self.PhotoContentArea).css({"width":100 , "height":30}).fadeTo("fast",1);
			$(_self.PhotoDisplayArea).html('');
			
			_self.setImage(i, function() { _self.show() });
			_self.displayButton(i);
			//_self.show();
			
			_self.ActiveImagePosition = i;
		});
	
	});
	
	
	/* End init Photo */
	
}

MyPhotoSlide.prototype.nextImage = function() { 
	var _self = this; 
	var Index = _self.ActiveImagePosition+1;
	
	_self.displayButton(Index);
	_self.setImage(Index,function() {_self.swapImage()}); 
	
	_self.ActiveImagePosition = Index;
}
MyPhotoSlide.prototype.PrevImage = function() { 

	var _self = this; 
	var Index = _self.ActiveImagePosition-1;

	_self.displayButton(Index);
	_self.setImage(Index,function() {_self.swapImage()}); 
	
	_self.ActiveImagePosition = Index;

}

MyPhotoSlide.prototype.AdjustImage = function() {

	var _self = this; 
	
	/* Calculate Width & Height */
	var MaxWidth = Math.round($(_self.PhotoSlideContainer).width() * 0.9);
	var MaxHeight =  Math.round($(_self.PhotoSlideContainer).height() * 0.8);
	var CloneObj = $(_self.PhotoSlideContainer).find("img");

	
	if (MaxHeight <= $(_self.PhotoDisplayArea).height()) {
	
		var WidthPercent = MaxHeight / $(_self.PhotoDisplayArea).height();
		var Width = Math.round($(CloneObj).width()*WidthPercent);
		
		if (Width < $(CloneObj).width()) {
			//$(CloneObj).stop(true,true).animate({"width":Width});
			$(CloneObj).css("width",Width);
		}
		//$(CloneObj).stop(true,true).animate({"height":MaxHeight});
		$(CloneObj).css("height",MaxHeight);
		
		
	} else if (MaxWidth <= $(_self.PhotoDisplayArea).width()) {
		
		var HeightPercent = MaxWidth / $(_self.PhotoDisplayArea).width();
		var Height = Math.round($(CloneObj).height()*HeightPercent);
		

		if (Height < $(CloneObj).height()) {
			//$(CloneObj).stop(true,true).animate({"height":Height});
			$(CloneObj).css("height",Height);
		}
		//$(CloneObj).stop(true,true).animate({"width":MaxWidth});	
		$(CloneObj).css("width",MaxWidth);
		
	}
	
		

	
	/* End Calculate Width & Height */
}




MyPhotoSlide.prototype.setImage = function(Index,fn) { 
	var _self = this; 
	$(_self.PhotoSlideContainer).css("display","block");
	$(_self.PhotoSlideBackground).fadeTo("fast",0.8);
	$(_self.PhotoContentArea).css("top","35px");
	
	$(_self.LoadingStatus).slideDown('fast');
	var CloneObj = document.createElement("img");

	$(CloneObj).load(function() { 
		
		$(_self.LoadingStatus).stop(true,true).hide();
		$(_self.PhotoDisplayArea).html('');
		$(CloneObj).css("opacity","0");
		$(CloneObj).appendTo($(_self.PhotoDisplayArea) );
		fn.call(); 
		$(_self.PhotoNavigator).css("opacity","0").css("display",'block').fadeTo("fast",1);
		
	});

	$(CloneObj).attr("src", $(_self.PhotoSet).eq(Index).attr("src") );
	
	

}

MyPhotoSlide.prototype.displayButton = function(Index) { 
	var _self = this;
	
	$(_self.ButtonNext).css("display","none")
	$(_self.ButtonPrevious).css("display","none")
	
	if ($(_self.PhotoSet).size() > 0) {
		if (Index < ($(_self.PhotoSet).size()-1) ) {
			$(_self.ButtonNext).css("display","block");
		}
		
		if (Index > 0) {
			$(_self.ButtonPrevious).css("display","block");
		}
	}
}

MyPhotoSlide.prototype.swapImage = function() {
	var _self = this; 
	$(_self.PhotoNavigator).css("opacity",0);
		
		
	var CloneObj = $(_self.PhotoSlideContainer).find("img");
						   
		_self.AdjustImage(); 

		$(_self.PhotoContentArea).animate({ 'opacity':[1,0] , 'width': $(CloneObj).width() , 'height': parseInt($(CloneObj).height())+30   } , function() { $(CloneObj).fadeTo("fast",1);$(_self.PhotoNavigator).fadeTo("fast",1); } );
			


	

}


MyPhotoSlide.prototype.show = function() {
	var _self = this; 
	
	
	var CloneObj = $(_self.PhotoSlideContainer).find("img");
		


	_self.AdjustImage();

	$(_self.PhotoContentArea).css({"opacity":"0" , "width":"0px" , "height":"0px"}).animate({ 'opacity': 1 , 'width': $(_self.PhotoDisplayArea).width() ,'height': parseInt($(_self.PhotoDisplayArea).height())+30 } , function() { $(CloneObj).fadeTo("fast",1);$(_self.PhotoDisplayArea).fadeTo("fast",1); } );

	
	



	
}
MyPhotoSlide.prototype.close = function() {
	var _self = this;
	$(_self.PhotoNavigator).fadeTo("fast",0).css("display","none");
	$(_self.PhotoDisplayArea).fadeTo("fast",0 ,function() {
	
		$(_self.PhotoContentArea).animate({ 'opacity':0, 'width':'toggle' } , function() {
		$(_self.PhotoSlideBackground).fadeTo("fast",0,function() { $(_self.PhotoSlideContainer).css("display","none") }) }).animate({ 'width':'toggle' });
		
	});

}