;(function($,window,undefined){'use strict';var $event=$.event,$special,resizeTimeout;$special=$event.special.debouncedresize={setup:function(){$(this).on("resize",$special.handler)},teardown:function(){$(this).off("resize",$special.handler)},handler:function(event,execAsap){//Save the context var context=this,args=arguments,dispatch=function(){//set correct event type event.type="debouncedresize";$event.dispatch.apply(context,args)};if (resizeTimeout){clearTimeout(resizeTimeout)}execAsap ? dispatch() :resizeTimeout=setTimeout(dispatch,$special.threshold);},threshold:50};//=======================imagesLoaded Plugin===============================//https://github.com/desandro/imagesloaded//$('#my-container').imagesLoaded(myFunction)//execute a callback when all images have loaded.//needed because .load() doesn't work on cached images

	// callback function gets image collection as argument
	//  this is the container

	// original: mit license. paul irish. 2010.
	// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou

	// blank image data-uri bypasses webkit log warning (thx doug jones)
	var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';

	$.fn.imagesLoaded = function( callback ) {
		var $this = this,
			deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
			hasNotify = $.isFunction(deferred.notify),
			$images = $this.find('img').add( $this.filter('img') ),
			loaded = [],
			proper = [],
			broken = [];

		// Register deferred callbacks
		if ($.isPlainObject(callback)) {
			$.each(callback, function (key, value) {
				if (key === 'callback') {
					callback = value;
				} else if (deferred) {
					deferred[key](value);
				}
			});
		}

		function doneLoading() {
			var $proper = $(proper),
				$broken = $(broken);

			if ( deferred ) {
				if ( broken.length ) {
					deferred.reject( $images, $proper, $broken );
				} else {
					deferred.resolve( $images );
				}
			}

			if ( $.isFunction( callback ) ) {
				callback.call( $this, $images, $proper, $broken );
			}
		}

		function imgLoaded( img, isBroken ) {
			// don't proceed if BLANK image,or image is already loaded if (img.src===BLANK || $.inArray(img,loaded) !==-1){return}//store element in loaded images array loaded.push(img);//keep track of broken and properly loaded images if (isBroken){broken.push(img)}else{proper.push(img)}//cache image and its state for future calls $.data(img,'imagesLoaded',{isBroken:isBroken,src:img.src});//trigger deferred progress method if present if (hasNotify){deferred.notifyWith($(img),[ isBroken,$images,$(proper),$(broken) ])}//call doneLoading and clean listeners if all images are loaded if ($images.length===loaded.length){setTimeout(doneLoading);$images.unbind('.imagesLoaded')}}//if no images,trigger immediately if (!$images.length){doneLoading()}else{$images.bind('load.imagesLoaded error.imagesLoaded',function(event){//trigger imgLoaded imgLoaded(event.target,event.type==='error')}).each(function(i,el){var src=el.src;//find out if this image has been already checked for status//if it was,and src has not changed,call imgLoaded on it var cached=$.data(el,'imagesLoaded');if (cached && cached.src===src){imgLoaded(el,cached.isBroken);return}//if complete is true and browser supports natural sizes,try//to check for image status manually if (el.complete && el.naturalWidth !==undefined){imgLoaded(el,el.naturalWidth===0 || el.naturalHeight===0);return}//cached images don't fire load sometimes, so we reset src, but only when
				// dealing with IE, or image is complete (loaded) and failed manual check
				// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
				if ( el.readyState || el.complete ) {
					el.src = BLANK;
					el.src = src;
				}
			});
		}

		return deferred ? deferred.promise( $this ) : $this;
	};

	// global
	var $window = $( window ),
		Modernizr = window.Modernizr;

	$.Slicebox = function( options, element ) {
		
		this.$el = $( element );
		this._init( options );
		
	};

	$.Slicebox.defaults = {
		// (v)ertical, (h)orizontal or (r)andom
		orientation : 'v',
		// perspective value
		perspective : 1200,
		// number of slices / cuboids
		// needs to be an odd number 15 => number > 0 (if you want the limit higher, change the _validate function).
		cuboidsCount : 5,
		// if true then the number of slices / cuboids is going to be random (cuboidsCount is overwitten)
		cuboidsRandom : false,
		// the range of possible number of cuboids if cuboidsRandom is true
		// it is strongly recommended that you do not set a very large number :)
		maxCuboidsCount : 5,
		// each cuboid will move x pixels left / top (depending on orientation). The middle cuboid doesn't move. the middle cuboid's neighbors will move disperseFactor pixels
		disperseFactor : 0,
		// color of the hidden sides
		colorHiddenSides : '#222',
		// the animation will start from left to right. The left most cuboid will be the first one to rotate
		// this is the interval between each rotation in ms
		sequentialFactor : 150,
		// animation speed
		// this is the speed that takes "1" cuboid to rotate
		speed : 600,
		// transition easing
		easing : 'ease',
		// if true the slicebox will start the animation automatically
		autoplay : false,
		// time (ms) between each rotation, if autoplay is true
		interval: 3000,
		// the fallback will just fade out / fade in the items
		// this is the time fr the fade effect
		fallbackFadeSpeed : 300,
		// callbacks
		onBeforeChange : function( position ) { return false; },
		onAfterChange : function( position ) { return false; },
		onReady : function() { return false; }
	};

	$.Slicebox.prototype = {

		_init : function( options ) {
			
			// options
			this.options = $.extend( true, {}, $.Slicebox.defaults, options );

			this._validate();

			// all the items
			this.$items = this.$el.children( 'li' );
			
			// total number of items
			this.itemsCount = this.$items.length;
			// if there's no items return if(this.itemsCount===0){return false};//suport for css 3d transforms and css transitions this.support=Modernizr.csstransitions && Modernizr.csstransforms3d;//current image index this.current=0;//control if the slicebox is animating this.isAnimating=false;//control if slicebox is ready (all images loaded) this.isReady=false;//preload the images var self=this;this.$el.imagesLoaded(function(){//we need to hide the items except first one (current default value) var $current=self.$items.eq(self.current).css('display','block').addClass('sb-current');//get real size of image var i=new Image();i.src=$current.find('img').attr('src');self.realWidth=i.width;//assuming all images with same size self._setSize();self._setStyle();self._initEvents();self.options.onReady();self.isReady=true;if(self.options.autoplay){self._startSlideshow()}});},_validate :function(options){if(this.options.cuboidsCount < 0){this.options.cuboidsCount=1}else if(this.options.cuboidsCount>15){this.options.cuboidsCount=15}else if(this.options.cuboidsCount %2===0){++this.options.cuboidsCount}if(this.options.maxCuboidsCount < 0){this.options.maxCuboidsCount=1}else if(this.options.maxCuboidsCount>15){this.options.maxCuboidsCount=15}else if(this.options.maxCuboidsCount %2===0){++this.options.maxCuboidsCount}if(this.options.disperseFactor < 0){this.options.disperseFactor=0}if(this.options.orientation !=='v' && this.options.orientation !=='h' && this.options.orientation !=='r'){this.options.orientation='v'}},_setSize :function(){var $visible=this.$items.eq(this.current).find('img');this.size={width:$visible.width(),height:$visible.height()};},_setStyle :function(){//max-width is the real size of the images this.$el.css({'max-width':this.realWidth});},_initEvents :function(){var self=this;$window.on('debouncedresize.slicebox',function(event){//assuming all images with same size self._setSize()});},_startSlideshow:function(){var self=this;this.slideshow=setTimeout(function(){self._navigate('next');if (self.options.autoplay){self._startSlideshow()}},this.options.interval);},_stopSlideshow:function(){if (this.options.autoplay){clearTimeout(this.slideshow);this.isPlaying=false;this.options.autoplay=false}},_navigate :function(dir,pos){if(this.isAnimating || !this.isReady || this.itemsCount < 2){return false}this.isAnimating=true;//current item's index
			this.prev = this.current;

			// if position is passed
			if( pos !== undefined ) {

				this.current = pos;

			}
			// if not check the boundaries
			else if( dir === 'next' ) {

				this.current = this.current < this.itemsCount - 1 ? this.current + 1 : 0;

			}
			else if( dir === 'prev' ) {

				this.current = this.current > 0 ? this.current - 1 : this.itemsCount - 1;

			}

			// callback trigger
			this.options.onBeforeChange( this.current );

			if( !this.support ) {
				
				this._fade( dir );

			}
			else {

				this._layout( dir );
				this._rotate();
			
			}

		},
		_fade : function( dir ) {

			var self = this,
				$visible = this.$items.eq( this.prev ),
				h = $visible.find( 'img' ).height();

			this.$el.css( 'height', h );
			this.$items.css( 'position', 'absolute' );
			
			this.$items.eq( this.current ).fadeIn( this.options.fallbackFadeSpeed, function() {

				$( this ).css( 'display', 'block' ).addClass( 'sb-current' );
				self.$el.css( 'height', 'auto' );
				self.$items.css( 'position', 'relative' );
				self.isAnimating = false;

			} );
			self.$items.eq( self.prev ).removeClass( 'sb-current' ).fadeOut( this.options.fallbackFadeSpeed );

		},
		_layout : function( dir ) {

			// create a structure like this and append it to the main container (this.$el):
			// <div>	wrapper with perspective
			//   <div>
			//     <div></div> front side
			//     <div></div> back side
			//     <div></div> right side
			//     <div></div> left side
			//     <div></div> top side
			//     <div></div> bottom side
			//   </div>
			//   <div>..</div>
			//   <div>..</div>
			//   <div>..</div>
			//   ...	number of slices defined in options
			// </div>

			var orientation = this.options.orientation;

			if( orientation === 'r' ) {

				orientation = Math.floor( Math.random() * 2 ) === 0 ? 'v' : 'h';

			}

			if( this.options.cuboidsRandom ) {

				this.options.cuboidsCount = Math.floor( Math.random() * this.options.maxCuboidsCount + 1 );
			
			}
			
			this._validate();
			
			var boxStyle = {
					'width' : this.size.width,
					'height' : this.size.height,
					'perspective' : this.options.perspective + 'px'
				},
				config = $.extend( this.options, {
					size : this.size,
					items : this.$items,
					direction : dir,
					prev : this.prev,
					current : this.current,
					o : orientation
				} ),
				self = this;

			this.$box = $('<div>').addClass( 'sb-perspective' ).css( boxStyle ).appendTo( this.$el );

			this.cuboids = [];

			this.$el.css( 'overflow', 'visible' );

			for( var i = 0; i < this.options.cuboidsCount; ++i ) {

				var cuboid = new $.Cuboid( config, i );
				
				this.$box.append( cuboid.getEl() );

				this.cuboids.push( cuboid );

			}

		},
		_rotate : function() {

			// hide current item
			this.$items.eq( this.prev ).removeClass( 'sb-current' ).hide();

			for( var i = 0; i < this.options.cuboidsCount; ++i ) {

				var cuboid = this.cuboids[ i ],
					self = this;

				cuboid.rotate( function( pos ) {

					if( pos === self.options.cuboidsCount - 1 ) {

						self.$el.css( 'overflow', 'hidden' );
						self.isAnimating = false;
						self.$box.remove();
						var $current = self.$items.eq( self.current );
						$current.css( 'display', 'block' ); // show() makes it inline style
						setTimeout(function() {
							$current.addClass( 'sb-current' );
						} , 0 );
						self.options.onAfterChange( self.current );

					}

				});

			}

		},
		_destroy : function( callback ) {
			
			this.$el.off( '.slicebox' ).removeData( 'slicebox' );
			$window.off( '.slicebox' );
			callback.call();

		},
		// public methos: adds more items to the slicebox
		add : function( $items, callback ) {

			this.$items = this.$items.add( $items );
			this.itemsCount = this.$items.length;

			if ( callback ) {

				callback.call( $items );

			}

		},
		// public method: shows next image
		next : function() {

			this._stopSlideshow();
			this._navigate( 'next' );

		},
		// public method: shows previous image
		previous : function() {

			this._stopSlideshow();
			this._navigate( 'prev' );

		},
		// public method: goes to a specific image
		jump : function( pos ) {

			pos -= 1;

			if( pos === this.current || pos >= this.itemsCount || pos < 0 ) {

				return false;

			}

			this._stopSlideshow();
			this._navigate( pos > this.current ? 'next' : 'prev', pos );

		},
		// public method: starts the slideshow
		// any call to next(), previous() or jump() will stop the slideshow
		play : function() {

			if( !this.isPlaying ) {

				this.isPlaying = true;

				this._navigate( 'next' );
				this.options.autoplay = true;
				this._startSlideshow();

			}

		},
		// publicc methos: pauses the slideshow
		pause : function() {

			if( this.isPlaying ) {

				this._stopSlideshow();

			}

		},
		// public method: check if isAnimating is true
		isActive : function() {

			return this.isAnimating;

		},
		// publicc methos: destroys the slicebox instance
		destroy : function( callback ) {

			this._destroy( callback );
		
		}

	};

	$.Cuboid = function( config, pos ) {

		this.config = config;
		this.pos = pos;
		this.side = 1;
		this._setSize();
		this._configureStyles();

	};

	$.Cuboid.prototype = {

		_setSize : function() {

			this.size = {
				width : this.config.o === 'v' ? Math.floor( this.config.size.width / this.config.cuboidsCount ) : this.config.size.width,
				height : this.config.o === 'v' ? this.config.size.height : Math.floor( this.config.size.height / this.config.cuboidsCount )
			};
			// extra space to fix gaps
			this.extra = this.config.o === 'v' ? this.config.size.width - ( this.size.width * this.config.cuboidsCount ) : this.config.size.height - ( this.size.height * this.config.cuboidsCount );

		},
		_configureStyles : function() {

			// style for the cuboid element
			// set z-indexes based on the cuboid's position var middlepos=Math.ceil(this.config.cuboidsCount/2),positionStyle=this.pos < middlepos ?{zIndex:(this.pos + 1)*100,left:(this.config.o==='v') ? this.size.width*this.pos:0,top:(this.config.o==='v') ? 0:this.size.height*this.pos}:{zIndex:(this.config.cuboidsCount - this.pos)*100,left:(this.config.o==='v') ? this.size.width*this.pos:0,top:(this.config.o==='v') ? 0:this.size.height*this.pos};//how much this cuboid is going to move (left or top values) this.disperseFactor=this.config.disperseFactor * ((this.pos+1) - middlepos);this.style=$.extend({'-webkit-transition':'-webkit-transform ' + this.config.speed + 'ms ' + this.config.easing,'-moz-transition':'-moz-transform ' + this.config.speed + 'ms ' + this.config.easing,'-o-transition':'-o-transform ' + this.config.speed + 'ms ' + this.config.easing,'-ms-transition':'-ms-transform ' + this.config.speed + 'ms ' + this.config.easing,'transition':'transform ' + this.config.speed + 'ms ' + this.config.easing},positionStyle,this.size);this.animationStyles={side1 :(this.config.o==='v') ?{'transform':'translate3d( 0, 0, -' + (this.size.height/2) + 'px )'}:{'transform':'translate3d( 0, 0, -' + (this.size.width/2) + 'px )'},side2 :(this.config.o==='v') ?{'transform':'translate3d( 0, 0, -' + (this.size.height/2) + 'px ) rotate3d( 1, 0, 0, -90deg )'}:{'transform':'translate3d( 0, 0, -' + (this.size.width/2) + 'px ) rotate3d( 0, 1, 0, -90deg )'},side3 :(this.config.o==='v') ?{'transform':'translate3d( 0, 0, -' + (this.size.height/2) + 'px ) rotate3d( 1, 0, 0, -180deg )'}:{'transform':'translate3d( 0, 0, -' + (this.size.width/2) + 'px ) rotate3d( 0, 1, 0, -180deg )'},side4 :(this.config.o==='v') ?{'transform':'translate3d( 0, 0, -' + (this.size.height/2) + 'px ) rotate3d( 1, 0, 0, -270deg )'}:{'transform':'translate3d( 0, 0, -' + (this.size.width/2) + 'px ) rotate3d( 0, 1, 0, -270deg )'}};var measure=(this.config.o==='v') ? this.size.height :this.size.width;this.sidesStyles={frontSideStyle :{width:(this.config.o==='v') ? this.size.width + this.extra:this.size.width,height:(this.config.o==='v') ? this.size.height:this.size.height + this.extra,backgroundColor:this.config.colorHiddenSides,transform:'rotate3d( 0, 1, 0, 0deg ) translate3d( 0, 0, ' + (measure/2) + 'px )'},backSideStyle :{width:this.size.width,height:this.size.height,backgroundColor:this.config.colorHiddenSides,transform:'rotate3d( 0, 1, 0, 180deg ) translate3d( 0, 0, ' + (measure/2) + 'px ) rotateZ( 180deg )'},rightSideStyle :{width:measure,height:(this.config.o==='v') ? this.size.height:this.size.height + this.extra,left:(this.config.o==='v') ? this.size.width/2 - this.size.height/2:0,backgroundColor:this.config.colorHiddenSides,transform:'rotate3d( 0, 1, 0, 90deg ) translate3d( 0, 0, ' + (this.size.width/2) + 'px )'},leftSideStyle :{width:measure,height:(this.config.o==='v') ? this.size.height:this.size.height + this.extra,left:(this.config.o==='v') ? this.size.width/2 - this.size.height/2:0,backgroundColor:this.config.colorHiddenSides,transform:'rotate3d( 0, 1, 0, -90deg ) translate3d( 0, 0, ' + (this.size.width/2) + 'px )'},topSideStyle :{width:(this.config.o==='v') ? this.size.width + this.extra:this.size.width,height:measure,top:(this.config.o==='v') ? 0:this.size.height/2 - this.size.width/2,backgroundColor:this.config.colorHiddenSides,transform:'rotate3d( 1, 0, 0, 90deg ) translate3d( 0, 0, ' + (this.size.height/2) + 'px )'},bottomSideStyle :{width:(this.config.o==='v') ? this.size.width + this.extra:this.size.width,height:measure,top:(this.config.o==='v') ? 0:this.size.height/2 - this.size.width/2,backgroundColor:this.config.colorHiddenSides,transform:'rotate3d( 1, 0, 0, -90deg ) translate3d( 0, 0, ' + (this.size.height/2) + 'px )'}};},getEl :function(){this.$el=$('<div/>').css(this.style) .css(this.animationStyles.side1) .append($('<div/>').addClass('sb-side').css(this.sidesStyles.frontSideStyle)) .append($('<div/>').addClass('sb-side').css(this.sidesStyles.backSideStyle)) .append($('<div/>').addClass('sb-side').css(this.sidesStyles.rightSideStyle)) .append($('<div/>').addClass('sb-side').css(this.sidesStyles.leftSideStyle)) .append($('<div/>').addClass('sb-side').css(this.sidesStyles.topSideStyle)) .append($('<div/>').addClass('sb-side').css(this.sidesStyles.bottomSideStyle));this._showImage(this.config.prev);return this.$el},_showImage :function(imgPos){var sideIdx,$item=this.config.items.eq(imgPos),imgParam={'background-size':this.config.size.width + 'px ' + this.config.size.height + 'px'};imgParam.backgroundImage='url(//b-broad.co.jp/wp-content/themes/rsmcpn/js/+%20$item.find(%20'img).attr('src')+')';switch(this.side){case 1:sideIdx=0;break;case 2:sideIdx=(this.config.o==='v') ? 4:2;break;case 3:sideIdx=1;break;case 4:sideIdx=(this.config.o==='v') ? 5:3;break};imgParam.backgroundPosition=(this.config.o==='v') ? - (this.pos * this.size.width)+'px 0px' :'0px -'+(this.pos * this.size.height)+'px';this.$el.children().eq(sideIdx).css(imgParam);},rotate :function(callback){var self=this,animationStyle;setTimeout(function(){if(self.config.direction==='next'){switch(self.side){case 1:animationStyle=self.animationStyles.side2;self.side=2;break;case 2:animationStyle=self.animationStyles.side3;self.side=3;break;case 3:animationStyle=self.animationStyles.side4;self.side=4;break;case 4:animationStyle=self.animationStyles.side1;self.side=1;break};}else{switch(self.side){case 1:animationStyle=self.animationStyles.side4;self.side=4;break;case 2:animationStyle=self.animationStyles.side1;self.side=1;break;case 3:animationStyle=self.animationStyles.side2;self.side=2;break;case 4:animationStyle=self.animationStyles.side3;self.side=3;break};}self._showImage(self.config.current);;if(self.config.o==='v'){animateOut.left='+=' + self.disperseFactor + 'px';animateIn.left='-=' + self.disperseFactor + 'px'}else if(self.config.o==='h'){animateOut.top='+=' + self.disperseFactor + 'px';animateIn.top='-=' + self.disperseFactor + 'px'}self.$el.css(animationStyle).animate(animateOut,self.config.speed/2).animate(animateIn,self.config.speed/2,function(){if(callback){callback.call(self,self.pos)}});},this.config.sequentialFactor * this.pos+30);}};var logError=function(message){if (window.console){window.console.error(message)}};$.fn.slicebox=function(options){var self=$.data(this,'slicebox');if (typeof options==='string'){var args=Array.prototype.slice.call(arguments,1);this.each(function(){if (!self){logError("cannot call methods on slicebox prior to initialization; " + "attempted to call method '" + options + "'");return}if (!$.isFunction(self[options]) || options.charAt(0)==="_"){logError("no such method '" + options + "' for slicebox self");return}self[options].apply(self,args);});}else{this.each(function(){if (self){self._init()}else{self=$.data(this,'slicebox',new $.Slicebox(options,this))}});}return self;};//　画像切り替えsampleページ jQuery(function($){    $('#subImg img').on('click',function(){        //mainに切り替えるimgのsrc取得         img=$(this).attr('src');        //currentクラス付け替え         $('#subImg li').removeClass('current');        $(this).parent().addClass('current');        //fadeOutできたらsrc変更してfadeIn         $('#mainImg img').fadeOut(50,function(){            $('#mainImg img').attr('src',img).on('load',function(){                 $(this).fadeIn();            })        })     });});//end})(jQuery,window);