function PennyVertical () {
	$preferences = arguments[0];
	this.$img_group = $($preferences["img_group"]);
	this.$img_group.style.display='none';
	this.$img_list = $$('li',this.$img_group);
	this.$img_length = this.$img_list.length;
	this.$ready_index = 0;
	
	$_this = this;
	this.a=[];
	this.$imgs=[];
	for (var $index=0; $index<this.$img_length; $index++) {
		this.a[$index] = {};
		var h = this.$img_list[$index];
		var a = this.a[$index];
		
		this.$imgs[$index] = $$('img',h)[0];
	}
	
	this.$circle_width = $preferences["circle_width"];
	this.$circle_height = $preferences["circle_height"];
	this.$img_circle = $($preferences["img_circle"]);
	this.$img_width = this.$circle_height;
	this.$img_height = this.$circle_height;
//	Pennyutils.setCssStyle(this.$img_circle, "width:"+this.$circle_width+"px;height:"+this.$circle_height+"px;display:inline;display:-moz-inline-box!important;white-space:nowrap;text-align:left;border:1px solid #555;");
//	Pennyutils.setCssStyle(this.$img_circle, "width:"+this.$circle_width+"px;height:"+this.$circle_height+"px;white-space:nowrap;text-align:left;margin:0 auto;white-space:nowrap;border:1px solid #555;");
//display:inline;display:-moz-inline-box!important;white-space:nowrap;text-align:left;

	this.$button_opacity = 50;
	// Left button.
	this.$prev_button = document.createElement("div");
	Pennyutils.setCssStyle(this.$prev_button, "float:left;width:20px;height:"+this.$circle_height+"px;");
	Pennyutils.setClassName(this.$prev_button, "img_left_button");
//	this.$prev_button = $($preferences["prev_button"]);
	this.$prev_button.style.opacity=this.$button_opacity/100;
	this.$prev_button.style.filter='alpha(opacity='+this.$button_opacity+')';
	Pennyutils.events.addEventHandler(this.$prev_button, "mouseover", 
		function () {
			$_this.setOpacity($_this.$prev_button, 80, 5);
			$_this.slidePhoto(true);
		});
	Pennyutils.events.addEventHandler(this.$prev_button, "mouseout", 
		function () {
			$_this.setOpacity($_this.$prev_button, 40, 5);
			clearInterval($_this.$fix_img_group.$interval_id);
		});
//	this.$prev_button.appendChild(document.createTextNode(" "));
//	this.$img_circle.appendChild(this.$prev_button);

	// Right button.
	this.$next_button = document.createElement("div");
	Pennyutils.setCssStyle(this.$next_button, "float:right;width:20px;height:"+this.$circle_height+"px;");
	Pennyutils.setClassName(this.$next_button, "img_right_button");
//	this.$next_button = $($preferences["next_button"]);
	this.$next_button.style.opacity=this.$button_opacity/100;
	this.$next_button.style.filter='alpha(opacity='+this.$button_opacity+')';
	Pennyutils.events.addEventHandler(this.$next_button, "mouseover", 
		function () {
			$_this.setOpacity($_this.$next_button, 80, 5);
			$_this.slidePhoto(false);
		});
	Pennyutils.events.addEventHandler(this.$next_button, "mouseout", 
		function () {
			$_this.setOpacity($_this.$next_button, 40, 5);
			clearInterval($_this.$fix_img_group.$interval_id);
		});
//	this.$next_button.appendChild(document.createTextNode(" "));
//	this.$img_circle.appendChild(this.$next_button);
	
	// Images group.
	this.$img_show = $preferences["img_show"];
	this.$method = $preferences["method"]?$preferences["method"]:this.createMainPhoto;
	this.$fix_img_group = document.createElement("div");
	Pennyutils.setCssStyle(this.$fix_img_group, "position:absolute;left:0;height:"+this.$circle_height+"px;");
	this.$fix_img_group_width = 0;
	this.$fix_img_group_height = 0;
	var $size;
	this.$images=[];
	for (var $index=0; $index<this.$img_length; $index++){
		this.$show_img = document.createElement("img");
		
		var $image = new Image();
		$image.onload=function () {
			$_this.$images[$index] = $image;

			$_this.setPhotos();
		};
		Pennyutils.setCssStyle($image, "cursor:pointer;margin:1px;");
		$image.src = this.$imgs[$index].src;
		$image.alt = this.$imgs[$index].alt;
		$image.title = this.$imgs[$index].title;
		
		Pennyutils.events.addEventHandler($image, "click", 
			  function () {
				  $_this.$method(arguments[0]);
			  });
		
		this.$images[$index] = $image;
	}
	
	this.showMainPhoto(this.$imgs[0].src);
}

PennyVertical.prototype.setPhotos = function () {
	this.$ready_index++;
//	alert(this.$ready_index+","+this.$img_length);
	if (this.$ready_index>=this.$img_length) {
		this.$fix_img_group_left=0;
		for (var $index=0; $index<this.$img_length; $index++){
			var $size = Pennyutils.resizeImage(this.$images[$index], this.$img_width, this.$img_height, 3);
			this.$fix_img_group.appendChild(this.$images[$index]);
			this.$fix_img_group_width+= $size.width;
			this.$fix_img_group_left+= $size.width;
		}
//		this.$fix_img_group.innerHTML = $temp.innerHTML+$temp.innerHTML;
//		Pennyutils.setCssStyle(this.$fix_img_group, );
//		Pennyutils.setCssStyle(this.$fix_img_group, "width:"+this.$fix_img_group_width+"px;height:"+this.$fix_img_group_height+"px;display:-moz-inline-box!important;white-space:nowrap;");
//		this.$img_circle.appendChild(this.$fix_img_group);
		
		var $temp_div = document.createElement("div");
		Pennyutils.setCssStyle($temp_div, "float:left;position:relative;width:"+(this.$circle_width-50)+"px;margin-left:5px;height:"+this.$circle_height+"px;overflow:hidden;");
		$temp_div.appendChild(this.$fix_img_group);
//		alert(this.$img_circle.style.cssText);
		this.$img_circle.appendChild(this.$prev_button);
		this.$img_circle.appendChild($temp_div);
		this.$img_circle.appendChild(this.$next_button);
	}
}

PennyVertical.prototype.createMainPhoto = function () {
	var $events = Pennyutils.events.getEvent();
	var $element = $events.target;
	this.showMainPhoto($element.src);
}

PennyVertical.prototype.showMainPhoto = function () {
	if (arguments[0]) {
	} else {
		return;
	}
	
	var $img_show = $(this.$img_show);
	if ($img_show) {
	} else {
		return;
	}
	
	var $image = new Image();
	$image.onload = function () {
//		alert($image.src+","+$img_show.style.width);
		$size = Pennyutils.resizeImage($image, parseInt($img_show.style.width), parseInt($img_show.style.height), 0);
		
		var left = ((parseInt($img_show.style.width) - $size.width)/2);
		var top = ((parseInt($img_show.style.height) - $size.height)/2);
//		Pennyutils.setCssStyle($image, "margin-top;"+top+"px;margin-left;"+left+"px;padding-top;"+top+"px;padding-left;"+left+"px;top;"+top+"px;left;"+left+"px;");
//		alert($image.scrollTop);
//		Pennyutils.setCssStyle($image, "position:absolute;top;50%;left:50%;");
//		Pennyutils.setCssStyle($image, "position:relate;top;50%;left:50%;");
		var $length = $img_show.childNodes.length;
		for (var $index=$length-1; $index>=0; $index--) {
			$img_show.removeChild($img_show.childNodes[$index]);
		}
		
		$img_show.appendChild($image);
	}
	$image.src = arguments[0];
}

PennyVertical.prototype.slidePhoto = function () {
	if (this.$fix_img_group_width<this.$circle_width) {
		return;
	}
	
	var $p_or_n = arguments[0];
	$element = this.$fix_img_group;
	clearInterval($element.$interval_id);
	var $borderline = 0;

	$borderline = this.$fix_img_group_width-this.$circle_width;

	$borderline *= -1;
//	alert(":"+$borderline);
	var $_this = this;
	$element.$interval_id=setInterval(function(){
//		alert(parseInt($_this.$fix_img_group.style.width));
		var $left=parseInt($_this.$fix_img_group.style.left);
		$left=$left?$left:0;
		if ($p_or_n) {
//			if($left>=0){
//				$_this.$fix_img_group.style.left = "0px";
//				clearInterval($_this.$fix_img_group.$interval_id);
//			} else {
//				$_this.$fix_img_group.style.left = ($left+10)+"px";
//			}
			if($left>=0){
				$_this.$fix_img_group.style.left = (-1*($_this.$fix_img_group_left-$_this.$circle_width)+10)+"px";
			} else{
				$_this.$fix_img_group.style.left = ($left+10)+"px";
			}
		} else {
//			if($left<=$borderline){
//				$_this.$fix_img_group.style.left = $borderline+"px";
//				clearInterval($_this.$fix_img_group.$interval_id);
//			} else {
//				$_this.$fix_img_group.style.left = ($left-10)+"px";
//			}
			if(($_this.$fix_img_group_left+$left)<=-$left){
				$_this.$fix_img_group.style.left = "0px";
			} else{
				$_this.$fix_img_group.style.left = ($left-10)+"px";
			}
		}
		window.status=$left+","+$_this.$fix_img_group_left+","+$_this.$circle_width;

	}, 20);
}

PennyVertical.prototype.changeImage = function($step, $walk){
	this.$img_index += $step;
	this.$img_index = this.$img_index<0?0:this.$img_index>this.$img_length-1?this.$img_length-1:this.$img_index;
	this.showImage(this.$img_index, $walk);
}

PennyVertical.prototype.showImage = function($img_index, $walk){
	var $image = new Image();
	$image.style.opacity = 0;
	$image.style.filter = 'alpha(opacity=0)';
	$image.onload=new Function("PennyVertical.setOpacity(this, 20, 5)");
	this.$show_img.src.onload=new Function("PennyVertical.setOpacity(this, 20, 5)");
	this.$show_img.src = this.$imgs[$img_index].src;
	Pennyutils.resizeImage(this.$show_img, this.$img_width, this.$img_height);
	this.$show_img.style.left = (this.$img_width - this.$show_img.width) / 2;
	this.$show_img.style.top = (this.$img_height - this.$show_img.height) / 2;
}

PennyVertical.prototype.setOpacity = function ($element, $alpha, $target) {
	$element = 'object'==typeof $element?$element:$($element);
	var $opacity = $element.style.opacity||this.getStyleProperty($element, 'opacity');
	var $destine=$alpha>$opacity*100?1:-1;
	$element.style.opacity = $opacity;
	clearInterval($element.$interval_id);
	var $_this = this;
	$element.$interval_id=setInterval(function(){$_this.tween($element, $alpha, $destine, $target)}, 20);
}

PennyVertical.prototype.tween = function ($element, $alpha, $destine, $target) {
	var $opacity = Math.round($element.style.opacity*100);0
	if($opacity==$alpha){
		clearInterval($element.$interval_id);
	} else {
		var $now_opacity = $opacity + Math.ceil(Math.abs($alpha - $opacity) / $target) * $destine;
		$element.style.opacity = $now_opacity / 100;
		$element.style.filter = 'alpha(opacity='+$now_opacity+')';
	}
}

PennyVertical.prototype.getStyle = function ($elements_tag_name, $property_value) {
	$elements_tag_name = 'object'==typeof $elements_tag_name?$elements_tag_name:$($elements_tag_name);
	return $elements_tag_name.currentStyle?$elements_tag_name.currentStyle[$property_value]:document.defaultView.getComputedStyle($elements_tag_name,null).getPropertyValue($property_value);
}