/*
 * コンテンツスライダーモジュール
 * @copyright 2009 mobiby.com
 */
jQuery.fn.contentsSlider = function( settings ) {
	settings = jQuery.extend({
        speed : "slow",
		slideBy : 4,
//		slideBy : 3,
		design : 'cs_nav_top'　// or cs_nav_side
    }, settings);
    return this.each(function() {
		jQuery.fn.contentsSlider.run( jQuery( this ), settings );
    });
};

jQuery.fn.contentsSlider.run = function( $this, settings ) {
	var items = jQuery('div',$this); 	
	if ( items.length > settings.slideBy ) {
		jQuery("br.clearBoth",$this).remove();		
		
		var wrapper = $this;
		var wrapperWidth = wrapper.width();
		wrapper.width(wrapperWidth);
		wrapper.addClass('contents_slider '+ settings.design);
		
		items.removeClass('back');		
		items.addClass('slide_item');
		items.wrapAll(document.createElement('div'));
		
		var slide_area = jQuery('div:eq(0)', wrapper);
		slide_area.addClass('slide_area');	

		slide_area.wrapAll(document.createElement('div'));
		var slide_wrapper = slide_area.parent();
		slide_wrapper.addClass('slide_wrapper');
		
		var itemWidth = (slide_wrapper.width() / 4 ); 
//		var itemWidth = (slide_wrapper.width() / 3 ); 
		items.width(itemWidth);
		slide_area.css( "width", ( items.length * itemWidth ) );
		
		var itemHeight = slide_area.height();
		items.height(itemHeight);
		
		slide_wrapper.before('<div class="slide_nav"><p class="skip"><a href="#skip">Skip</a></p><p class="back"><a href="#" title="Back" /></p><p class="next"><a href="#" title="Next" /></p><a name="skip"></a></div>');

		var $next = jQuery( ".next > a", $this );
		var $back = jQuery( ".back > a", $this );
		
		$next.height(itemHeight);
		$back.height(itemHeight);
		
		var animating = false;	
		
		$next.click(function() {
			if ( !animating ) {
				animating = true;
				offsetLeft = parseInt( slide_area.css( "left" ) ) - ( itemWidth * settings.slideBy ) + 3;
				if ( offsetLeft + slide_area.width() > 0 ) {
					$back.css( "display", "block" );
					slide_area.animate({
						left: offsetLeft
					}, settings.speed, function() {
						if ( parseInt( slide_area.css( "left" ) ) + slide_area.width() <= itemWidth * settings.slideBy ) {
							$next.css( "display", "none" );
						}
						animating = false;
					});
				} else {
					animating = false;
				}
			}
			return false;
		});
		$back.click(function() {
			if ( !animating ) {
				animating = true;
				offsetRight = parseInt( slide_area.css( "left" ) ) + ( itemWidth * settings.slideBy ) - 3;
				if ( offsetRight + slide_area.width() <= slide_area.width() ) {
					$next.css( "display", "block" );
					slide_area.animate({
						left: offsetRight
					}, settings.speed, function() {
						if ( parseInt( slide_area.css( "left" ) ) == 0 ) {
							$back.css( "display", "none" );
						}
						animating = false;
					});
				} else {
					animating = false;
				}
			}
			return false;
		});
		$next.css( "display", "block" ).parent().after( [ "<p class=\"slide_view view_all\">", " <a href=\"#\"></a></p>" ].join( "" ) );		
		jQuery( ".view_all > a, .skip_to_news > a", $this ).click(function() {
			var skip_to_news = ( jQuery( this ).html() == "Skip" );
			if ( jQuery( this ).parent().hasClass("view_all") || skip_to_news ) {
				slide_area.css( "width", "auto" ).css( "left", "0" );
				$next.css( "display", "none" );
				$back.css( "display", "none" );
				
				if ( !skip_to_news ) {
					jQuery( this ).parent().removeClass('view_all');
					jQuery( this ).parent().addClass('view_less');
				}
			} else {
				if ( !skip_to_news ) {
					jQuery( this ).parent().removeClass('view_less');
					jQuery( this ).parent().addClass('view_all');					
				}
				slide_area.css( "width", ( items.length * itemWidth ) );
				$next.css( "display", "block" );
			}
			return false;
		});		
	}	
};


$(function() {
	$( "#whatsNew" ).contentsSlider();
	$( "#featuredProducts" ).contentsSlider({design:"cs_nav_top"});
	$( "#specialsDefault" ).contentsSlider({design:"cs_nav_side"});
});