/*!
 * jQuery UI Widget 1.8.2
 *
 * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://docs.jquery.com/UI/Widget
 */
(function( $ ) {

var _remove = $.fn.remove;

$.fn.remove = function( selector, keepData ) {
	return this.each(function() {
		if ( !keepData ) {
			if ( !selector || $.filter( selector, [ this ] ).length ) {
				$( "*", this ).add( this ).each(function() {
					$( this ).triggerHandler( "remove" );
				});
			}
		}
		return _remove.call( $(this), selector, keepData );
	});
};

$.widget = function( name, base, prototype ) {
	var namespace = name.split( "." )[ 0 ],
		fullName;
	name = name.split( "." )[ 1 ];
	fullName = namespace + "-" + name;

	if ( !prototype ) {
		prototype = base;
		base = $.Widget;
	}

	// create selector for plugin
	$.expr[ ":" ][ fullName ] = function( elem ) {
		return !!$.data( elem, name );
	};

	$[ namespace ] = $[ namespace ] || {};
	$[ namespace ][ name ] = function( options, element ) {
		// allow instantiation without initializing for simple inheritance
		if ( arguments.length ) {
			this._createWidget( options, element );
		}
	};

	var basePrototype = new base();
	// we need to make the options hash a property directly on the new instance
	// otherwise we'll modify the options hash on the prototype that we're
	// inheriting from
//	$.each( basePrototype, function( key, val ) {
//		if ( $.isPlainObject(val) ) {
//			basePrototype[ key ] = $.extend( {}, val );
//		}
//	});
	basePrototype.options = $.extend( {}, basePrototype.options );
	$[ namespace ][ name ].prototype = $.extend( true, basePrototype, {
		namespace: namespace,
		widgetName: name,
		widgetEventPrefix: $[ namespace ][ name ].prototype.widgetEventPrefix || name,
		widgetBaseClass: fullName
	}, prototype );

	$.widget.bridge( name, $[ namespace ][ name ] );
};

$.widget.bridge = function( name, object ) {
	$.fn[ name ] = function( options ) {
		var isMethodCall = typeof options === "string",
			args = Array.prototype.slice.call( arguments, 1 ),
			returnValue = this;

		// allow multiple hashes to be passed on init
		options = !isMethodCall && args.length ?
			$.extend.apply( null, [ true, options ].concat(args) ) :
			options;

		// prevent calls to internal methods
		if ( isMethodCall && options.substring( 0, 1 ) === "_" ) {
			return returnValue;
		}

		if ( isMethodCall ) {
			this.each(function() {
				var instance = $.data( this, name ),
					methodValue = instance && $.isFunction( instance[options] ) ?
						instance[ options ].apply( instance, args ) :
						instance;
				if ( methodValue !== instance && methodValue !== undefined ) {
					returnValue = methodValue;
					return false;
				}
			});
		} else {
			this.each(function() {
				var instance = $.data( this, name );
				if ( instance ) {
					if ( options ) {
						instance.option( options );
					}
					instance._init();
				} else {
					$.data( this, name, new object( options, this ) );
				}
			});
		}

		return returnValue;
	};
};

$.Widget = function( options, element ) {
	// allow instantiation without initializing for simple inheritance
	if ( arguments.length ) {
		this._createWidget( options, element );
	}
};

$.Widget.prototype = {
	widgetName: "widget",
	widgetEventPrefix: "",
	options: {
		disabled: false
	},
	_createWidget: function( options, element ) {
		// $.widget.bridge stores the plugin instance, but we do it anyway
		// so that it's stored even before the _create function runs
		this.element = $( element ).data( this.widgetName, this );
		this.options = $.extend( true, {},
			this.options,
			$.metadata && $.metadata.get( element )[ this.widgetName ],
			options );

		var self = this;
		this.element.bind( "remove." + this.widgetName, function() {
			self.destroy();
		});

		this._create();
		this._init();
	},
	_create: function() {},
	_init: function() {},

	destroy: function() {
		this.element
			.unbind( "." + this.widgetName )
			.removeData( this.widgetName );
		this.widget()
			.unbind( "." + this.widgetName )
			.removeAttr( "aria-disabled" )
			.removeClass(
				this.widgetBaseClass + "-disabled " +
				"ui-state-disabled" );
	},

	widget: function() {
		return this.element;
	},

	option: function( key, value ) {
		var options = key,
			self = this;

		if ( arguments.length === 0 ) {
			// don't return a reference to the internal hash
			return $.extend( {}, self.options );
		}

		if  (typeof key === "string" ) {
			if ( value === undefined ) {
				return this.options[ key ];
			}
			options = {};
			options[ key ] = value;
		}

		$.each( options, function( key, value ) {
			self._setOption( key, value );
		});

		return self;
	},
	_setOption: function( key, value ) {
		this.options[ key ] = value;

		if ( key === "disabled" ) {
			this.widget()
				[ value ? "addClass" : "removeClass"](
					this.widgetBaseClass + "-disabled" + " " +
					"ui-state-disabled" )
				.attr( "aria-disabled", value );
		}

		return this;
	},

	enable: function() {
		return this._setOption( "disabled", false );
	},
	disable: function() {
		return this._setOption( "disabled", true );
	},

	_trigger: function( type, event, data ) {
		var callback = this.options[ type ];

		event = $.Event( event );
		event.type = ( type === this.widgetEventPrefix ?
			type :
			this.widgetEventPrefix + type ).toLowerCase();
		data = data || {};

		// copy original event properties over to the new event
		// this would happen if we could call $.event.fix instead of $.Event
		// but we don't have a way to force an event to be fixed multiple times
		if ( event.originalEvent ) {
			for ( var i = $.event.props.length, prop; i; ) {
				prop = $.event.props[ --i ];
				event[ prop ] = event.originalEvent[ prop ];
			}
		}

		this.element.trigger( event, data );

		return !( $.isFunction(callback) &&
			callback.call( this.element[0], event, data ) === false ||
			event.isDefaultPrevented() );
	}
};

})( jQuery );

/*
 * jQuery SmoothDivScroll 1.1
 *
 * Copyright (c) 2010 Thomas Kahn
 * Licensed under the GPL license.
 *
 * http://www.maaki.com/thomas/SmoothDivScroll/
 *
 * Depends:
 * jquery.ui.widget.js
 *
 */
/*
 * jQuery SmoothDivScroll 1.1
 *
 * Copyright (c) 2010 Thomas Kahn
 * Licensed under the GPL license.
 *
 * http://www.maaki.com/thomas/SmoothDivScroll/
 *
 * Depends:
 * jquery.ui.widget.js
 *
 */
(function($) {

	$.widget("thomaskahn.smoothDivScroll", {
		// Default options
		options: {
			scrollingHotSpotLeft: ".arrow-left",
			scrollingHotSpotRight: ".arrow-right",
			scrollableArea: ".ui-slider",
			scrollWrapper: ".ui-display",
			hiddenOnStart: false,
			ajaxContentURL: "",
			countOnlyClass: "",
			scrollStep: 15,
			scrollInterval: 10,
			mouseDownSpeedBooster: 3,
			autoScroll: "",
			autoScrollDirection: "right",
			autoScrollStep: 5,
			autoScrollInterval: 10,
			visibleHotSpots: "",
			hotSpotsVisibleTime: 5,
			startAtElementId: ""
		},
		_create: function() {

			// Set variables
			var self = this, o = this.options, el = this.element;

			el.data("scrollWrapper", el.find(o.scrollWrapper));
			el.data("scrollingHotSpotRight", el.find(o.scrollingHotSpotRight));
			el.data("scrollingHotSpotLeft", el.find(o.scrollingHotSpotLeft));
			el.data("scrollableArea", el.find(o.scrollableArea));
			el.data("speedBooster", 1);
			el.data("motherElementOffset", el.offset().left);
			el.data("scrollXPos", 0);
			el.data("hotSpotWidth", el.find(o.scrollingHotSpotLeft).width());
			el.data("scrollableAreaWidth", 0);
			el.data("startingPosition", 0);
			el.data("rightScrollInterval", null);
			el.data("leftScrollInterval", null);
			el.data("autoScrollInterval", null);
			el.data("hideHotSpotBackgroundsInterval", null);
			el.data("previousScrollLeft", 0);
			el.data("pingPongDirection", "right");
			el.data("getNextElementWidth", true);
			el.data("swapAt", null);
			el.data("startAtElementHasNotPassed", true);
			el.data("swappedElement", null);
			el.data("originalElements", el.data("scrollableArea").children(o.countOnlyClass));
			el.data("visible", true);
			el.data("initialAjaxContentLoaded", false);
			el.data("enabled", true);

			// If the user wants to have visible hotspots, here is where it's taken care of
			if (o.autoScroll !== "always") {
				switch (o.visibleHotSpots) {
					case "always":
						self.showHotSpotBackgrounds();
						break;
					case "onstart":
						self.showHotSpotBackgrounds();
						el.data("hideHotSpotBackgroundsInterval", setTimeout(function() {
							self.hideHotSpotBackgrounds("slow");
						}, (o.hotSpotsVisibleTime * 1000)));
						break;
					default:
						break;
				}
			}
			
			/*****************************************
			SET UP EVENTS FOR SCROLLING RIGHT
			*****************************************/
			// Check the mouse X position and calculate the relative X position inside the right hotspot
			el.data("scrollingHotSpotRight").bind("mousemove", function(e) {
				var x = e.pageX - (this.offsetLeft + el.data("motherElementOffset"));
				el.data("scrollXPos", Math.round((x / el.data("hotSpotWidth")) * o.scrollStep));
				if (el.data("scrollXPos") === Infinity) {
					el.data("scrollXPos", 0);
				}
			});

			// mouseover right hotspot - scrolling
			el.data("scrollingHotSpotRight").bind("mouseover", function() {

				// Clear autoscrolling, if it should only run on start
				if ((o.autoScroll === "onstart" && el.data("autoScrollInterval") !== null)) {
					clearInterval(el.data("autoScrollInterval"));
					el.data("autoScrollInterval", null);
					self._trigger("autoScrollIntervalStopped");
				}

				// Start the scrolling interval
				el.data("rightScrollInterval", setInterval(function() {

					if (el.data("scrollXPos") > 0 && el.data("enabled")) {
						el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + (el.data("scrollXPos") * el.data("speedBooster")));

						self._showHideHotSpots();
					}

				}, o.scrollInterval));

				// Callback
				self._trigger("mouseOverRightHotSpot");

			});

			// mouseout right hotspot
			el.data("scrollingHotSpotRight").bind("mouseout", function() {
				clearInterval(el.data("rightScrollInterval"));
				el.data("scrollXPos", 0);
			});

			// mousedown right hotspot (add scrolling speed booster)
			el.data("scrollingHotSpotRight").bind("mousedown", function() {
				el.data("speedBooster", o.mouseDownSpeedBooster);
			});

			// mouseup anywhere (stop boosting the scrolling speed)
			$("body").bind("mouseup", function() {
				el.data("speedBooster", 1);
			});

			/*****************************************
			SET UP EVENTS FOR SCROLLING LEFT
			*****************************************/
			// Check the mouse X position and calculate the relative X position inside the left hotspot
			el.data("scrollingHotSpotLeft").bind("mousemove", function(e) {
				var x = el.data("scrollingHotSpotLeft").innerWidth() - (e.pageX - el.data("motherElementOffset"));
				el.data("scrollXPos", Math.round((x / el.data("hotSpotWidth")) * o.scrollStep));
				if (el.data("scrollXPos") === Infinity) {
					el.data("scrollXPos", 0);
				}

			});

			// mouseover left hotspot
			el.data("scrollingHotSpotLeft").bind("mouseover", function() {

				// Clear autoscrolling, if it should only run on start

				if ((o.autoScroll === "onstart" && el.data("autoScrollInterval") !== null)) {
					clearInterval(el.data("autoScrollInterval"));
					el.data("autoScrollInterval", null);
					self._trigger("autoScrollIntervalStopped");
				}

				el.data("leftScrollInterval", setInterval(function() {
					if (el.data("scrollXPos") > 0 && el.data("enabled")) {
						el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - (el.data("scrollXPos") * el.data("speedBooster")));

						self._showHideHotSpots();
					}

				}, o.scrollInterval));

				// Callback
				self._trigger("mouseOverLeftHotSpot");
			});

			// mouseout left hotspot
			el.data("scrollingHotSpotLeft").bind("mouseout", function() {
				clearInterval(el.data("leftScrollInterval"));
				el.data("scrollXPos", 0);
			});

			// mousedown left hotspot (add scrolling speed booster)
			el.data("scrollingHotSpotLeft").bind("mousedown", function() {
				el.data("speedBooster", o.mouseDownSpeedBooster);
			});

			/*****************************************
			SET UP EVENT FOR RESIZING THE BROWSER WINDOW
			*****************************************/
			$(window).bind("resize", function() {
				// If the scrollable area is not hidden on start, show/hide the hotspots
				if (!(o.hiddenOnStart)) {
					self._showHideHotSpots();
				}

				if($('#categoryNavigation .product').length <= 4){
					var centering = {
						'window':	$(window).width(),
						'slider':	$('#categoryNavigation .ui-slider').width(),
						'product':	225 * $('#categoryNavigation .product').length,
						'margin': 0
					}
					centering.margin = Math.floor((centering.window - centering.product) /2) +25;
					if(centering.margin < 0) centering.margin = 0;
					centering.slider = centering.slider + centering.margin;
					//console.log(centering.margin);
					$('#categoryNavigation .ui-slider').css({ 'width' : centering.slider+'px'});
					$('#categoryNavigation .product:nth-child(1)').css({ 'margin' : '0 25px 0 '+ centering.margin +'px'});
				}		

				self._trigger("windowResized");
			});

			/*****************************************
			FETCHING AJAX CONTENT ON INITIALIZATION
			*****************************************/
			// If there's an ajaxContentURL in the options, 
			// fetch the content
			if (o.ajaxContentURL.length > 0) {
				self.replaceContent(o.ajaxContentURL);
			}
			else {
				self.recalculateScrollableArea();
			}

			// Should it be hidden on start?
			if (o.hiddenOnStart) {
				self.hide();
			}

			/*****************************************
			AUTOSCROLLING
			*****************************************/
			// If the user has set the option autoScroll, the scollable area will
			// start scrolling automatically. If the content is fetched using AJAX
			// the autoscroll is not started here but in recalculateScrollableArea.
			// Otherwise recalculateScrollableArea won't have the time to calculate
			// the width of the scrollable area before the autoscrolling starts.
			if ((o.autoScroll.length > 0) && !(o.hiddenOnStart) && (o.ajaxContentURL.length <= 0)) {
				self.startAutoScroll();
			}


			/*****************************************
			Hide Arrows
			*****************************************/
			// 左矢印が必要ないとき
			if (el.data("scrollWrapper").scrollLeft() === 0 && el.data("scrollXPos") === 0) {
				el.data("scrollingHotSpotLeft").hide();
			}
			// 右矢印が必要ないとき
			if (el.data("scrollableAreaWidth") <= (el.data("scrollWrapper").innerWidth() + el.data("scrollWrapper").scrollLeft())) {
				el.data("scrollingHotSpotRight").hide();
			}
		},
		/**********************************************************
		Hotspot functions
		**********************************************************/
		showHotSpotBackgrounds: function(fadeSpeed) {
			// Alter the CSS (SmoothDivScroll.css) if you want to customize
			// the look'n'feel of the visible hotspots
			//console.log('showHotSpotBackgrounds');
			var self = this, el = this.element;

			// Fade in the hotspot backgrounds
			if (fadeSpeed !== undefined) {
				// Before the fade-in starts, we need to make sure the opacity
				// is zero
				el.data("scrollingHotSpotLeft").css("opacity", "0.0");
				el.data("scrollingHotSpotRight").css("opacity", "0.0");

				el.data("scrollingHotSpotLeft").addClass("scrollingHotSpotLeftVisible");
				el.data("scrollingHotSpotRight").addClass("scrollingHotSpotRightVisible");

				// Fade in the left hotspot
				el.data("scrollingHotSpotLeft").fadeTo(fadeSpeed, 0.35);

				// Fade in the right hotspot
				el.data("scrollingHotSpotRight").fadeTo(fadeSpeed, 0.35);
			}
			// Don't fade, just show them
			else {
				// The left hotspot
				el.data("scrollingHotSpotLeft").addClass("scrollingHotSpotLeftVisible");
				el.data("scrollingHotSpotLeft").removeAttr("style");

				// The right hotspot
				el.data("scrollingHotSpotRight").addClass("scrollingHotSpotRightVisible");
				el.data("scrollingHotSpotRight").removeAttr("style");
			}
			self._showHideHotSpots();
		},
		hideHotSpotBackgrounds: function(fadeSpeed) {
			//console.log('hideHotSpotBackgrounds');
			var el = this.element;

			// Fade out the hotspot backgrounds
			if (fadeSpeed !== undefined) {
				// Fade out the left hotspot
				el.data("scrollingHotSpotLeft").fadeTo(fadeSpeed, 0.0, function() {
					el.data("scrollingHotSpotLeft").removeClass("scrollingHotSpotLeftVisible");
				});

				// Fade out the right hotspot
				el.data("scrollingHotSpotRight").fadeTo(fadeSpeed, 0.0, function() {
					el.data("scrollingHotSpotRight").removeClass("scrollingHotSpotRightVisible");
				});
			}
			// Don't fade, just hide them
			else {
				el.data("scrollingHotSpotLeft").removeClass("scrollingHotSpotLeftVisible");
				el.data("scrollingHotSpotLeft").removeAttr("style");

				el.data("scrollingHotSpotRight").removeClass("scrollingHotSpotRightVisible");
				el.data("scrollingHotSpotRight").removeAttr("style");
			}

		},
		// Function for showing and hiding hotspots depending on the
		// offset of the scrolling
		_showHideHotSpots: function() {
			var self = this, el = this.element, o = this.options;
			//console.log('_showHideHotSpots');

			// If autoscrolling is set to always, there should be no hotspots
			if (o.autoScroll !== "always") {
				// If the scrollable area is shorter than the scroll wrapper, both hotspots
				// should be hidden
				if (el.data("scrollableAreaWidth") <= (el.data("scrollWrapper").innerWidth())) {
					el.data("scrollingHotSpotLeft").fadeOut(200);
					el.data("scrollingHotSpotRight").fadeOut(200);
				}
				// When you can't scroll further left the left scroll hotspot should be hidden
				// and the right hotspot visible.
				else if (el.data("scrollWrapper").scrollLeft() === 0) {
					el.data("scrollingHotSpotLeft").fadeOut(200);
					el.data("scrollingHotSpotRight").fadeIn(200);
					// Callback
					self._trigger("scrollLeftLimitReached");
					// Clear interval
					clearInterval(el.data("leftScrollInterval"));
					el.data("leftScrollInterval", null);
				}
				// When you can't scroll further right
				// the right scroll hotspot should be hidden
				// and the left hotspot visible
				else if (el.data("scrollableAreaWidth") <= (el.data("scrollWrapper").innerWidth() + el.data("scrollWrapper").scrollLeft())) {
					el.data("scrollingHotSpotLeft").fadeIn(200);
					el.data("scrollingHotSpotRight").fadeOut(200);
					// Callback
					self._trigger("scrollRightLimitReached");
					// Clear interval
					clearInterval(el.data("rightScrollInterval"));
					el.data("rightScrollInterval", null);
				}
				// If you are somewhere in the middle of your
				// scrolling, both hotspots should be visible
				else {
					el.data("scrollingHotSpotLeft").fadeIn(200);
					el.data("scrollingHotSpotRight").fadeIn(200);
				}
			}
			else {
				el.data("scrollingHotSpotLeft").hide();
				el.data("scrollingHotSpotRight").hide();
			}
		},
		/**********************************************************
		Moving to a certain element
		**********************************************************/
		moveToElement: function(moveTo, elementNumber) {
			var self = this, el = this.element, o = this.options, tempScrollableAreaWidth = 0, foundStartAtElement = false;

			switch (moveTo) {
				case "first":
					el.data("scrollXPos", 0);
					self._trigger("movedToFirstElement");
					break;
				case "start":
					// Check to see where the start-at element is at the moment.
					// This can vary if endlessloop is used for autoscroll since it
					// swaps elements around.

					el.data("scrollableArea").children(o.countOnlyClass).each(function() {

						if ((o.startAtElementId.length > 0) && (($(this).attr("id")) === o.startAtElementId)) {
							el.data("startingPosition", tempScrollableAreaWidth);
							foundStartAtElement = true;
						}
						tempScrollableAreaWidth = tempScrollableAreaWidth + $(this).outerWidth(true);
					});

					el.data("scrollXPos", el.data("startingPosition"));
					self._trigger("movedToStartElement");
					break;
				case "last":
					el.data("scrollXPos", el.data("scrollableAreaWidth"));
					self._trigger("movedToLastElement");
					break;
				case "number":
					if (!(isNaN(elementNumber))) {
						// Get the total width of all preceding elements					
						el.data("scrollableArea").children(o.countOnlyClass).each(function(index) {
							if (index === (elementNumber - 1)) {
								el.data("scrollXPos", tempScrollableAreaWidth);
							}
							tempScrollableAreaWidth = tempScrollableAreaWidth + $(this).outerWidth(true);
						});
					}
					self._trigger("movedToElementNumber", null, { "elementNumber": elementNumber });
					break;
				default:
					break;
			}

			el.data("scrollWrapper").scrollLeft(el.data("scrollXPos"));
			self._showHideHotSpots();
		},
		/**********************************************************
		Adding or replacing content
		**********************************************************/
		addContent: function(ajaxContentURL, addWhere) {
			var self = this, el = this.element;

			$.get(ajaxContentURL, function(data) {
				// Add the loaded content first or last in the scrollable area
				if (addWhere === "first") {
					el.data("scrollableArea").children(":first").before(data);
				}
				else {
					el.data("scrollableArea").children(":last").after(data);
				}

				// Recalculate the total width of the elements inside the scrollable area
				self.recalculateScrollableArea();

				// Determine which hotspots to show
				self._showHideHotSpots();
			});
		},
		replaceContent: function(ajaxContentURL) {
			var self = this, el = this.element;

			el.data("scrollableArea").load(ajaxContentURL, function() {
				// Recalculate the total width of the elements inside the scrollable area
				self.recalculateScrollableArea();
				self.moveToElement("first");
				self._showHideHotSpots();
				el.data("startingPosition", 0);
			});
		},
		/**********************************************************
		Recalculate the scrollable area
		**********************************************************/
		recalculateScrollableArea: function() {

			var tempScrollableAreaWidth = 0, foundStartAtElement = false, o = this.options, el = this.element, self = this;

			// Add up the total width of all the items inside the scrollable area
			// and check to see if there's a specific element to start at
			el.data("scrollableArea").children(o.countOnlyClass).each(function() {
				// Check to see if the current element in the loop is the one where the scrolling should start
				if ((o.startAtElementId.length > 0) && (($(this).attr("id")) === o.startAtElementId)) {
					el.data("startingPosition", tempScrollableAreaWidth);
					foundStartAtElement = true;
				}
				tempScrollableAreaWidth = tempScrollableAreaWidth + $(this).outerWidth(true);
			});

			// If the element with the ID specified by startAtElementId
			// is not found, reset it
			if (!(foundStartAtElement)) {
				el.data("startAtElementId", "");
			}

			// Set the width of the scrollable area
			el.data("scrollableAreaWidth", tempScrollableAreaWidth);
			el.data("scrollableArea").width(el.data("scrollableAreaWidth"));

			// Move to the starting position
			el.data("scrollWrapper").scrollLeft(el.data("startingPosition"));
			el.data("scrollXPos", el.data("startingPosition"));

			// If the content of the scrollable area is fetched using AJAX
			// during initialization, it needs to be done here. After it has
			// been loaded a flag variable is set to indicate that the content
			// has been loaded already and shouldn
			if (!(el.data("initialAjaxContentLoaded"))) {
				if ((o.autoScroll.length > 0) && !(o.hiddenOnStart) && (o.ajaxContentURL.length > 0)) {
					self.startAutoScroll();
					el.data("initialAjaxContentLoaded", true);
				}
			}

		},
		/**********************************************************
		Stopping, starting and doing the autoscrolling
		**********************************************************/
		stopAutoScroll: function() {
			var self = this, el = this.element;

			clearInterval(el.data("autoScrollInterval"));
			el.data("autoScrollInterval", null);

			// Check to see which hotspots should be active
			// in the position where the scroller has stopped
			self._showHideHotSpots();

			self._trigger("autoScrollStopped");

		},
		startAutoScroll: function() {
			var self = this, el = this.element, o = this.options;

			self._showHideHotSpots();

			// Stop any running interval
			clearInterval(el.data("autoScrollInterval"));
			el.data("autoScrollInterval", null);

			// Callback
			self._trigger("autoScrollStarted");

			// Start interval
			el.data("autoScrollInterval", setInterval(function() {

				// If the scroller is not visible or
				// if the scrollable area is shorter than the scroll wrapper
				// any running autoscroll interval should stop.
				if (!(el.data("visible")) || (el.data("scrollableAreaWidth") <= (el.data("scrollWrapper").innerWidth()))) {
					// Stop any running interval
					clearInterval(el.data("autoScrollInterval"));
					el.data("autoScrollInterval", null);
				}
				else {
					// Store the old scrollLeft value to see if the scrolling has reached the end
					el.data("previousScrollLeft", el.data("scrollWrapper").scrollLeft());


					switch (o.autoScrollDirection) {
						case "right":
							el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + o.autoScrollStep);
							if (el.data("previousScrollLeft") === el.data("scrollWrapper").scrollLeft()) {
								self._trigger("autoScrollRightLimitReached");
								clearInterval(el.data("autoScrollInterval"));
								el.data("autoScrollInterval", null);
								self._trigger("autoScrollIntervalStopped");
							}
							break;

						case "left":
							el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - o.autoScrollStep);
							if (el.data("previousScrollLeft") === el.data("scrollWrapper").scrollLeft()) {
								self._trigger("autoScrollLeftLimitReached");
								clearInterval(el.data("autoScrollInterval"));
								el.data("autoScrollInterval", null);
								self._trigger("autoScrollIntervalStopped");
							}
							break;

						case "backandforth":
							if (el.data("pingPongDirection") === "right") {
								el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + (o.autoScrollStep));
							}
							else {
								el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - (o.autoScrollStep));
							}

							// If the scrollLeft hasnt't changed it means that the scrolling has reached
							// the end and the direction should be switched
							if (el.data("previousScrollLeft") === el.data("scrollWrapper").scrollLeft()) {
								if (el.data("pingPongDirection") === "right") {
									el.data("pingPongDirection", "left");
									self._trigger("autoScrollRightLimitReached");
								}
								else {
									el.data("pingPongDirection", "right");
									self._trigger("autoScrollLeftLimitReached");
								}
							}
							break;

						case "endlessloopright":
							// Get the width of the first element. When it has scrolled out of view,
							// the element swapping should be executed. A true/false variable is used
							// as a flag variable so the swapAt value doesn't have to be recalculated
							// in each loop.

							if (el.data("getNextElementWidth")) {
								if ((o.startAtElementId.length > 0) && (el.data("startAtElementHasNotPassed"))) {
									el.data("swapAt", $("#" + o.startAtElementId).outerWidth(true));
									el.data("startAtElementHasNotPassed", false);
								}
								else {
									el.data("swapAt", el.data("scrollableArea").children(":first").outerWidth(true));
								}

								el.data("getNextElementWidth", false);
							}

							// Do the autoscrolling
							el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + o.autoScrollStep);

							// Check to see if the swap should be done
							if (el.data("swapAt") <= el.data("scrollWrapper").scrollLeft()) {
								el.data("swappedElement", el.data("scrollableArea").children(":first").detach());
								el.data("scrollableArea").append(el.data("swappedElement"));
								el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - el.data("swappedElement").outerWidth(true));
								el.data("getNextElementWidth", true);
							}
							break;
						case "endlessloopleft":
							// Get the width of the first element. When it has scrolled out of view,
							// the element swapping should be executed. A true/false variable is used
							// as a flag variable so the swapAt value doesn't have to be recalculated
							// in each loop.

							if (el.data("getNextElementWidth")) {
								if ((o.startAtElementId.length > 0) && (el.data("startAtElementHasNotPassed"))) {
									el.data("swapAt", $("#" + o.startAtElementId).outerWidth(true));
									el.data("startAtElementHasNotPassed", false);
								}
								else {
									el.data("swapAt", el.data("scrollableArea").children(":first").outerWidth(true));
								}

								el.data("getNextElementWidth", false);
							}

							// Do the autoscrolling
							el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() - o.autoScrollStep);

							// Check to see if the swap should be done
							if (el.data("scrollWrapper").scrollLeft() === 0) {
								el.data("swappedElement", el.data("scrollableArea").children(":last").detach());
								el.data("scrollableArea").prepend(el.data("swappedElement"));
								el.data("scrollWrapper").scrollLeft(el.data("scrollWrapper").scrollLeft() + el.data("swappedElement").outerWidth(true));
								el.data("getNextElementWidth", true);
							}
							break;
						default:
							break;

					}
				}
			}, o.autoScrollInterval));

		},
		restoreOriginalElements: function() {
			var self = this, el = this.element;

			// Restore the original content of the scrollable area
			el.data("scrollableArea").html(el.data("originalElements"));
			self.recalculateScrollableArea();
			self.moveToElement("first");
		},
		show: function() {
			var el = this.element;
			el.data("visible", true);
			el.show();
		},
		hide: function() {
			var el = this.element;
			el.data("visible", false);
			el.hide();
		},
		enable: function() {
			var el = this.element;

			// Set enabled to true
			el.data("enabled", true);
		},
		disable: function() {
			var el = this.element;

			// Clear all running intervals
			clearInterval(el.data("autoScrollInterval"));
			clearInterval(el.data("rightScrollInterval"));
			clearInterval(el.data("leftScrollInterval"));
			clearInterval(el.data("hideHotSpotBackgroundsInterval"));

			// Set enabled to false
			el.data("enabled", false);
		},
		destroy: function() {
			var el = this.element;

			// Clear all running intervals
			clearInterval(el.data("autoScrollInterval"));
			clearInterval(el.data("rightScrollInterval"));
			clearInterval(el.data("leftScrollInterval"));
			clearInterval(el.data("hideHotSpotBackgroundsInterval"));

			// Remove all element specific events
			el.data("scrollingHotSpotRight").unbind("mouseover");
			el.data("scrollingHotSpotRight").unbind("mouseout");
			el.data("scrollingHotSpotRight").unbind("mousedown");

			el.data("scrollingHotSpotLeft").unbind("mouseover");
			el.data("scrollingHotSpotLeft").unbind("mouseout");
			el.data("scrollingHotSpotLeft").unbind("mousedown");

			// Restore the original content of the scrollable area
			el.data("scrollableArea").html(el.data("originalElements"));

			// Remove the width of the scrollable area
			el.data("scrollableArea").removeAttr("style");
			el.data("scrollingHotSpotRight").removeAttr("style");
			el.data("scrollingHotSpotLeft").removeAttr("style");

			el.data("scrollWrapper").scrollLeft(0);
			el.data("scrollingHotSpotLeft").removeClass("scrollingHotSpotLeftVisible");
			el.data("scrollingHotSpotRight").removeClass("scrollingHotSpotRightVisible");
			el.data("scrollingHotSpotRight").hide();
			el.data("scrollingHotSpotLeft").hide();

			// Call the base destroy function
			$.Widget.prototype.destroy.apply(this, arguments);

		}
	});
})(jQuery);

$(function (){

	// -----------------
	// Debug
	if ( typeof window.console !== 'undefined' && typeof window.console.log === 'function' ) {	// Use window.console
		$.log = window.console.log;
	} else {
		$.log = function (){}; // Don't use anything
		window.console = { 'log' : function () {} };
	}

	// jQuery.easing
	$.easing['jswing'] = $.easing['swing'];
	$.extend( jQuery.easing, {
		def: 'easeOutQuad',
		easeOutQuad: function (x, t, b, c, d) {
			return -c *(t/=d)*(t-2) + b;
		},
		easeOutSine: function (x, t, b, c, d) {
			return c * Math.sin(t/d * (Math.PI/2)) + b;
		},
		easeOutExpo: function (x, t, b, c, d) {
			return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
		}
	});

	// ----------
	// for IE

	if(! Array.indexOf) {
		Array.prototype.indexOf = function(o) {
			for(var i in this) {
				if(this[i] == o) {
					return i;
				}
			}
		return -1;
		}
	}

	// ----------
	// settings
	
	//console.log(window);
	
	var settings = {
		'files': {
			'framework': 	'js/site.framework.js',
			'css': 			'css/widget.css'
		},
		'keyword': {
			'body':			$('body').attr('class'),
			'pagetype':		$('#pageType').attr('class')
		},
		'pagenavigation': {
			'lock':		false,
			'next':		null,
			'prev':		null
		},
		'support_ie6':	(window.ActiveXObject !== undefined && typeof document.body.style.maxHeight === 'undefined'),
		'support_ie7':	(window.ActiveXObject !== undefined && typeof document.body.style.maxHeight !== 'undefined'),
		'support_ie':	(window.ActiveXObject !== undefined)
	};

	//console.log(settings.keyword.body, settings.keyword.pagetype);
	settings.src = $('script[src*="'+ settings.files.framework +'"]:first').attr('src');
	settings.baseurl = settings.src.substring(0, settings.src.indexOf(settings.files.framework));
	//console.log(settings.src);

	var bodyEl = document.getElementsByTagName($.browser.safari ? 'head' : 'body')[0]; // IE & Fx では body に生成される
	var linkEl = document.createElement('link');
	linkEl.type = 'text/css';
	linkEl.rel = 'stylesheet';
	linkEl.media = 'all';
	linkEl.href = settings.baseurl + settings.files.css;
	bodyEl.appendChild(linkEl);

	
	// ----------
	// bootstrap

	// Windows IE で利用可能な font の調査
	// 即実行
	var useMeiryo = function() {
		if(window.ActiveXObject !== undefined) {
			$(window).load(function() {
				this.fontslist = '';
				var dlg = '<object id="dlgHelper" classid="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"><\/object>'
				$('body').append('<div id="tmp"><\/div>');
				document.getElementById('tmp').innerHTML = dlg;
	
				try {
					for (var i = 1; i < dlgHelper.fonts.count; i++) {
						this.fontslist += dlgHelper.fonts(i) + '\n';
					}
				}
				catch(e) { 
					this.fontslist = null; 
				}
				if (this.fontslist) {
					if (this.fontslist.indexOf('メイリオ') != -1 || this.fontslist.indexOf('Meiryo') != -1 ) {
						$('html').addClass('useMeiryo');
					}
				}
				$('#tmp').remove();
				this.fontslist = '';
			});
		}
	}()

	// for IE6
	if( settings.support_ie6 ) {
		$('#btn-pageTop img').css({'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ $('#btn-pageTop img').attr('src') +'", sizingMethod="image")'}).attr('src', settings.baseurl +'common/images/transparence.gif');
		$('body.home #pageContent p.photo img').css({'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ $('body.home #pageContent p.photo img').attr('src') +'", sizingMethod="image")'}).attr('src', settings.baseurl +'common/images/transparence.gif');
		$('#oc21p29 p.photo img').css({'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ $('#oc21p29 p.photo img').attr('src') +'", sizingMethod="image")'}).attr('src', settings.baseurl +'common/images/transparence.gif');
		$('#oc21p30 p.photo img').css({'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ $('#oc21p30 p.photo img').attr('src') +'", sizingMethod="image")'}).attr('src', settings.baseurl +'common/images/transparence.gif');
	}


	// ----------
	// Apply default events

	function scrollto() {
		var location_path = location.pathname, this_path = this.pathname;

		if (canonicalize(location_path) == canonicalize(this_path) && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length && target;
			if (target.length) {
				var sclpos = 30;
				var scldurat = 800;
				var targetOffset = target.offset().top - sclpos;
				$($.browser.opera ? 'html' : 'html,body').animate({ scrollTop: targetOffset }, { duration: scldurat, easing: 'easeOutExpo' });
				return false;
			}
		}

		function canonicalize (pathname){
			var reg = new RegExp('^\/'), rex = reg.exec(pathname);
			if(rex) pathname = pathname.replace(rex[0], '');
			return pathname;
		}
	}

	$('a[href*=#]').live('click', scrollto);



	// ----------
	// start-up pageNavigation
	
	var pageNavigation =  function() {
		
		var s = settings.pagenavigation,
			css_prop = (settings.support_ie6 || settings.support_ie7) ? 'width' : 'min-width',
			css_next = {},
			css_prev = {};
		
		$('#pageNavigation .club, #pageNavigation .equipment').each(function(){
			$(this).addClass('topCategory');
		});

		if(settings.keyword.body === 'club' || settings.keyword.body === 'equipment') setupTopCategory( settings.keyword.body );

		$('#pageNavigation .topCategory h3').bind(
			{
				'mouseover': function( event ){
					var $self = $(this),
						$section = $self.parent().parent(),
						$section_prev = null,
						category = ($section.attr('class').split(' ').indexOf('club') !== -1) ? 'club' : 'equipment';

					//if(settings.support_ie7) css_prop = 'width';
					$self.addClass('hover');
					if( $section.hasClass('opened') === false && s.lock === false ) {
						s.lock = true;
						s.next = category;
						css_next[css_prop] = scaling(s.next, 'next');
						//css_next[css_prop] = (s.next === 'club') ? '216px' : '314px';
	
						if(s.prev !== null) {
							css_prev[css_prop] = scaling(s.prev, 'prev');
							//css_prev[css_prop] = (s.prev === 'club') ? '56px' : '94px';
							//css_prev[css_prop] = (s.prev === 'club') ? ((settings.support_ie6 || settings.support_ie7) ? '66px' : '56px') : '94px';
							//console.log(css_prev[css_prop]);
							$section_prev = $('#pageNavigation .'+ s.prev);
							$section_prev.find('ul').animate({'height': 0, 'opacity': 0}, 200, function(){
								$section_prev.animate(css_prev, 500);
								$section_prev.removeClass('opened');
								if(settings.support_ie6) $section_prev.find('h3').removeClass('opened');
								s.prev = s.next;
								$section.animate(css_next, 500, function(){
									$section.find('ul').animate({'height': '127px', 'opacity': 1}, 500);
									$section.addClass('opened');
									if(settings.support_ie6) $self.addClass('opened');
									s.lock = false;
								});
							});
						} else {
							$section.animate(css_next, 500, function(){
								$section.find('ul').animate({'height': '127px', 'opacity': 1}, 500);
								$section.addClass('opened');
								s.lock = false;
							});
							s.prev = s.next;
						}
					//console.log('[2]', settings.pagenavigation.next, settings.pagenavigation.prev);
					}
				},
				'mouseout': function( event ){
					$(this).removeClass('hover');
				}
			}
		);
	
		function setupTopCategory ( category ) {
			var	$section = $('#pageNavigation .'+ category);
				//if(settings.support_ie7) css_prop = 'width';
			s.next = category;
			css_next[css_prop] = scaling(s.next, 'next');
			s.prev = category;
			$section.css(css_next).addClass('opened');
			$section.find('h3').addClass('opened');
			$section.find('ul').css({'height': '127px', 'opacity': 1});
		}

		function scaling ( category, dir ){
			var val = '';
			if(dir === 'prev') {
				val = (category === 'club') ? '56px' : '94px';
				val = (category === 'club') ? ((settings.support_ie6 || settings.support_ie7) ? '66px' : '56px') : '94px';
			}
			if(dir === 'next') {
				val = (category === 'club') ? '216px' : '314px';
			}
			return val;
		}

	}()


	// ----------
	// start-up categoryNavigation
	
	$('#categoryNavigation .ui-arrow').bind('click', function(event){
		event.preventDefault();
		return false;
	});

	$('#categoryNavigation .product').each(function(){
		var product = $(this).attr('class').replace(/product /g,'');
		$(this).append('<p class="hot-area">&nbsp;</p>');
		if( settings.support_ie6 ){
			$(this).prepend('<p class="product-label"><img src="'+ settings.baseurl +'common/images/transparence.gif" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ settings.baseurl +'images/global/product-browser/label-'+ product +'.png\',sizingMethod=\'image\')" alt="" /></p>');
			var icon = $(this).find('.product-icon img').attr('src');
			if($(this).hasClass('driver') || $(this).hasClass('boston-bag')) $(this).find('.product-icon img').css({'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+ icon +'", sizingMethod="image")'}).attr('src', settings.baseurl +'common/images/transparence.gif');
		} else {
			$(this).prepend('<p class="product-label"><img src="'+ settings.baseurl +'images/global/product-browser/label-'+ product +'.png" alt="" /></p>');
		}
	});


	if($('#categoryNavigation .product').length <= 4){
		var centering = {
			'window':	$(window).width(),
			'product':	225 * $('#categoryNavigation .product').length,
			'margin': 0
		}
		centering.margin = Math.floor((centering.window - centering.product) /2) +25;
		$('#categoryNavigation .product:nth-child(1)').css({ 'margin' : '0 25px 0 '+ centering.margin +'px'});
	} else {
		// 1番目の要素の処理
		$('#categoryNavigation .product:nth-child(1)').css({ 'margin' : '0 25px 0 25px'});
	}

	$('#categoryNavigation .product-label').hide();
	$('#categoryNavigation .product .hot-area').bind(
		{
			'mouseover': function( event ){
				//var sWidth = $('#categoryNavigation .ui-slider').width();
				//var $right = $('#categoryNavigation .arrow-right:visible').length;
				var $e = $(this);
				var wWidth = $(window).width();
				var $left = $('#categoryNavigation .arrow-left:visible').length;
				var scroll = $('#categoryNavigation .ui-display').scrollLeft(); 
				var scrollOffset = $e.offset().left + scroll;
				//console.log((scrollOffset - scroll), (wWidth-210));
				$e.addClass('hover');
				if( scrollOffset >= 25 && (scrollOffset - scroll) < (wWidth-185)) { // 左側一般対応
					mouseoverAciton($e);
				} else if (scrollOffset < 50 && $left != 1) { // 左側矢印非表示
					mouseoverAciton($e);
				}
			},
			'mouseout': function( event ){
				var $e = $(this);
				event.stopPropagation();
				if(settings.keyword.body === 'club' || settings.keyword.body === 'equipment'){
					var active = settings.keyword.pagetype;
					if(! $e.parent().hasClass(active) ){
						$('#categoryNavigation div[id!="start-at"] > .product-icon').stop(true, false).animate({ 'top' : '30px'}, 300);
						$('#categoryNavigation div[id!="start-at"] > .product-label:visible').stop(true, false).fadeOut(300);
						$e.removeClass('hover');
						$('#start-at > .product-icon').stop(true, false).animate({ 'top' : '10px'}, 300, function(){
							$('#start-at > .product-label').stop(true, false).fadeIn(300, function(){
								$('#start-at > .product-label').css({ 'opacity': 1});
							});
						});
					}
				} else {
					$e.siblings('.product-icon').stop(true, false).animate({ 'top' : '30px'}, 300);
					$e.siblings('.product-label').stop(true, false).fadeOut(300);
					$e.removeClass('hover');
				}
			},
			'click': function( event ){
				var $e = $(this);
				var url = $e.siblings('.product-icon').children().attr('href');
				event.stopPropagation();
				window.location = url;
			}
		}
	);
	
	function mouseoverAciton ( element ) {
		var $e = element;
		var active = settings.keyword.pagetype;
		//$('#categoryNavigation div[id!="start-at"] > .product-label:visible').fadeOut(200);
		if(! $e.parent().hasClass(active) ){
			$('#categoryNavigation .product-label:visible').fadeOut(200);
			$('#categoryNavigation .product-icon').stop(true, false).animate({ 'top' : '30px'}, 300);
			$e.siblings('.product-icon').stop(true, false).animate({ 'top' : '10px'}, 300, function(){
				$e.siblings('.product-label').stop(true, false).fadeIn(300, function(){
					$e.siblings('.product-label').css({ 'opacity': 1});
				});
			});
		} else {
			$('#categoryNavigation div[id!="start-at"] > .product-label:visible').fadeOut(200);
		}
	}

	if(settings.keyword.body === 'club' || settings.keyword.body === 'equipment') {
		$('#categoryNavigation .'+ settings.keyword.pagetype).attr('id', 'start-at')
	}

	$(window).load(function() {
		var options = {
				autoScroll: '',
				autoScrollStep: 5,
				autoScrollInterval: 15,
				visibleHotSpots: ''
		};

		if(settings.keyword.body === 'club' || settings.keyword.body === 'equipment') options.startAtElementId = 'start-at'; 
		$('#categoryNavigation .nav').smoothDivScroll(options);

		// Clubの場合は4つしかないので矢印を消す
		if($('#categoryNavigation .product').length <= 4){
			$('#categoryNavigation .nav').smoothDivScroll('hideHotSpotBackgrounds', 200);
		}
		if(settings.keyword.body === 'club' || settings.keyword.body === 'equipment'){
			var $e = $('#categoryNavigation .'+ settings.keyword.pagetype+' .hot-area');
			$e.addClass('hover');
			//mouseoverAciton($e);
			$e.siblings('.product-icon').stop(true, false).animate({ 'top' : '10px'}, 300, function(){
				$e.siblings('.product-label').stop(true, false).fadeIn(300, function(){
					$e.siblings('.product-label').css({ 'opacity': 1});
				});
			});

			//$('#categoryNavigation .'+ settings.keyword.pagetype +' .product-label').fadeIn(200);
			//$('#categoryNavigation .'+ settings.keyword.pagetype +' .hot-area').addClass('hover');
		}
	});

	// ----------
	// set-up Color custom

	if($('.ui-color-custom').length){
		$('.ui-color-custom .first .block').each(function(i){
			var btn = '<p class="btn-change"><a href="#" class="grip"><img src="../../images/club/color-custom/btn-change.png" alt="Change" /></a></p>';
			$(this).append(btn);
			if(i === 0) $(this).find('.btn-change').css({ 'opacity': 0.5});
		});

		$('.ui-color-custom .second .block').each(function(i){
			var btn = '<p class="btn-change"><a href="#" class="shaft"><img src="../../images/club/color-custom/btn-change.png" alt="Change" /></a></p>';
			$(this).append(btn);
			if(i === 0) $(this).find('.btn-change').css({ 'opacity': 0.5});
		});

		$('.ui-color-custom .btn-change a').bind('click', function(event){
			event.stopPropagation();
			var part = $(this).attr('class');
			var color = $(this).parent().parent().attr('class').replace(/ block/g, '');
			color = color.replace(/ hover/g, '');
			var $target = (part === 'grip') ? $('#photo-grip') : $('#photo-shaft');
			var current = $target.attr('src');
			var after = current;
			current = current.substring(current.lastIndexOf('/')+1, current.length);

			var reg = new RegExp('([^_]*)\.jpg$');
			var rex = reg.exec(current);
			if(rex != null) {
				after = after.replace(rex[1], color);
				current = rex[1];
				//console.log(current);
			}
			$target.attr('src', after); // イメージ画像を差替え
			var $prev = $('.ui-color-custom '+ ((part === 'grip') ? '.first' : '.second') +' p.'+ current +' img');
			var restore = $prev.attr('src').replace(/_select\.jpg$/, '_default.jpg');
			$prev.attr('src', restore);
			($(this).attr('class') === 'grip') ? $('.ui-color-custom .first .btn-change').css({ 'opacity': 1}) : $('.ui-color-custom .second .btn-change').css({ 'opacity': 1});
			$(this).parent().css({ 'opacity': 0.5});
			var $img = $(this).parent().siblings().find('img');
			var selected = $img.attr('src').replace(/_default\.jpg$/, '_select.jpg');
			$img.attr('src', selected);
			return false;
		});
		$('.ui-color-custom .block').bind(
			{
				'mouseover': function( event ){
					$(this).addClass('hover');
				},
				'mouseout': function( event ){
					$(this).removeClass('hover');
				},
				'click': function( event ){
					event.stopPropagation();
					var color = $(this).attr('class').replace(/ block/g, '');
					color = color.replace(/ hover/g, '');
					var part = $(this).find('p.btn-change a').attr('class');
					var $target = (part === 'grip') ? $('#photo-grip') : $('#photo-shaft');
					var current = $target.attr('src');
					var after = current;
					current = current.substring(current.lastIndexOf('/')+1, current.length);
		
					var reg = new RegExp('([^_]*)\.jpg$');
					var rex = reg.exec(current);
					if(rex != null) {
						after = after.replace(rex[1], color);
						current = rex[1];
						//console.log(current);
					}
					$target.attr('src', after); // イメージ画像を差替え
					var $prev = $('.ui-color-custom '+ ((part === 'grip') ? '.first' : '.second') +' p.'+ current +' img');
					var restore = $prev.attr('src').replace(/_select\.jpg$/, '_default.jpg');
					$prev.attr('src', restore);
					($(this).find('p.btn-change a').attr('class') === 'grip') ? $('.ui-color-custom .first .btn-change').css({ 'opacity': 1}) : $('.ui-color-custom .second .btn-change').css({ 'opacity': 1});
					$(this).find('p.btn-change').css({ 'opacity': 0.5});
					var $img = $(this).find('p.'+ color).find('img');
					var selected = $img.attr('src').replace(/_default\.jpg$/, '_select.jpg');
					$img.attr('src', selected);
					return false;
				}
			}
		);
	}
	// end function
});