$(function(){
	
	new IconShowCase($('#icons'));
	
});

var IconShowCase = function(container){
	
	this.containerWidth = $(container).width();
	this.ul = $('ul', container);
	this.icons = $('li', this.ul);
	this.iconWidth = 100;
	this.iconHeight = 77;
	this.iconMargin = 10;
	this.fullWidth = this.icons.length*(this.iconWidth+this.iconMargin*2)+this.iconMargin*2+100;
	
	this.largeRate = 1.3;
	this.large = Math.round(this.iconWidth*this.largeRate);
	this.small = this.iconWidth;	
	this.topPadding = Math.floor((this.iconHeight*this.largeRate-this.iconHeight)/2);
	this.smallStyle = {width:this.small, opacity:0.5, 'padding-top':this.topPadding};
	
	this.fullWidth = this.large + this.small*(this.icons.length-1)+this.iconMargin*2*this.icons.length+this.iconMargin*2+100;
	
	this.targetPos = 0;
	
	this.ensmall($('li img', container));
	$('li img', container).css(this.smallStyle);
	this.enlarge($('li:first-child img', container));
	
	var offset = $(container).offset();
	this.containerOffsetX = offset.left;
	
	var owner = this;
	
	this.ul.width(this.fullWidth);
	
	$(container).mousemove(function(event){
		owner.targetPos = (owner.containerWidth-owner.fullWidth)*(event.clientX-owner.containerOffsetX)/owner.containerWidth;
	});
	
	$('li img', container).mouseover(function(){
		owner.ensmall($('li img', container));
		owner.enlarge(this);
	});
	
	setInterval(function(){
		var pos = owner.ul.position();
		owner.ul.css('left', pos.left-(pos.left-owner.targetPos)*0.1);
	}, 30);
	
	// ドロップシャドウを追加
	$('li', container).append('<div class="shadow"><img src="images/icons/dropshadow.png" alt="" /></div>');
	$('li div.shadow', container).hide();
	
};


IconShowCase.prototype.ensmall = function(el, exclude){
	var owner = this;
	$(el).each(function(){
		$('div.shadow', el.parent().parent()).hide();
		if ($(this).hasClass('selected')) {
			$(this).stop();
			$(this).animate(owner.smallStyle);
			$(this).removeClass('selected');
		}
	});
};

IconShowCase.prototype.enlarge = function(el){
	if ($(this).hasClass('selected')) {
	//	return;
	}
	$(el).css({opacity:1});
	$(el).addClass('selected');
	if ($(el).css('opacity')==1) {
		$(el).animate({width:this.large, 'padding-top':0}, 300, function(){
			if ($(el).hasClass('selected')) {
				// $('div.shadow', $(el).parent().parent()).fadeIn();
				$('div.shadow', $(el).parent().parent()).show();
			}
		});
	}
};