content: require('styles/App.css');
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  
  // 获取图片相关数据
  var imageDatas = require('./../data/imageDatas.js');
  
  // 利用自执行函数，将图片的名字转换成url信息
  imageDatas = (function getImage(imageDatasArr) {
  	for (let i = 0, j = imageDatasArr.length; i < j; i++) {
  		let singleImageData = imageDatasArr[i];
  		singleImageData.imageUrl = require('./../images/' + singleImageData.fileName);
  		imageDatasArr[i] = singleImageData;
  	}
  	return imageDatasArr;
  })(imageDatas)
  
  // 获取区间内随机值
  function getRangeRandom(low, high) {
  	return Math.floor(Math.random() * (high - low) + low)
  }
  
  // 获取随机一个正负30的数
  function get30Deg() {
  	return Math.floor(Math.random() * 61 - 30)
  }
  
  // 创建图片组件
  class ImageFigure extends React.Component {
  		// 点击处理函数
  		handleClick = (e) => {
  			if (this.props.arrange.isCenter) {
  				this.props.reversal();
  			} else {
  				this.props.center();
  			}
  			e.stopPropagation();
  			e.preventDefault();
  		}
  		render() {
  			var styleObj = {};
  			// 如果props属性中指定了这张图片的位置，则使用
  			if (this.props.arrange.pos) {
  				styleObj = this.props.arrange.pos;
  			}
  			// 如果图片的旋转角度有值且不为零，添加旋转角度
  			if (this.props.arrange.rotate) {
  				(['MozTransform', 'msTransform', 'WebkitTransform', 'transform']).forEach(function(value) {
  					styleObj[value] = 'rotate(' + this.props.arrange.rotate + 'deg)';
  				}.bind(this));
  			}
  			// 如果是居中的图片，就添加zIndex
  			if (this.props.arrange.isCenter) {
  				styleObj.zIndex = 11;
  			}
  			// 如果是翻转，则添加类名
  			var imageFigureClassName = 'image-figure';
  			imageFigureClassName += this.props.arrange.isReversal ? ' is-reversal' : '';
  			return (<figure className={imageFigureClassName}
  			style={styleObj}
  			onClick={this.handleClick}>
  			<img src={this.props.data.imageUrl} alt={this.props.data.title}/>
  			<figcaption>
  				<h2 className="image-title">{this.props.data.title}</h2>
  				<p className="image-desc">{this.props.data.desc}</p>
  			</figcaption>
  		</figure>)
  		}
  	}
  	// 创建控制组件
  class ControllerDot extends React.Component {
  	handleClick = (e) => {
  		if (this.props.arrange.isCenter) {
  			this.props.reversal();
  		} else {
  			this.props.center();
  		}
  
  		e.stopPropagation();
  		e.preventDefault();
  	}
  
  
  	render() {
  		var controllerDotClassName = 'controller-dot';
  		if (this.props.arrange.isCenter) {
  			controllerDotClassName += ' on';
  			if (this.props.arrange.isReversal) {
  				controllerDotClassName += ' is-reversal'
  			}
  		}
  		return (<span className={controllerDotClassName}
  			onClick={this.handleClick}
  			></span>)
  	}
  }
  
  class AppComponent extends React.Component {
  	constructor(props) {
  		super(props);
  
  		this.state = {
  			// 每张图片的排布信息，一个对象，具有left，right以及反转等信息
  			imagesArrangeArr: [
  				/*
  					{
  						pos:{
  							left:0,
  							top:0
  						},
  						rotate:0, //旋转角度
  						isReversal:false  //是否翻转
  					}
  				 */
  			]
  		};
  	}
  
  	// 定义一个常量(Constant)存放图片位置
  	Constant = {
  		centerPos: {
  			left: 0,
  			right: 0
  		},
  		hPosRange: { //水平方向的取值范围
  			leftSecX: [0, 0],
  			rightSecX: [0, 0],
  			y: [0, 0]
  		},
  		vPosRange: { //垂直方向上的取值范围
  			x: [0, 0],
  			topY: [0, 0]
  		}
  	}
  
  	// 重新排布图片
  	rearrange(centerIndex) {
  		var imagesArrangeArr = this.state.imagesArrangeArr,
  			Constant = this.Constant,
  			centerPos = Constant.centerPos,
  			hPosRange = Constant.hPosRange,
  			vPosRange = Constant.vPosRange,
  			hPosRangeLeftSecX = hPosRange.leftSecX,
  			hPosRangeRightSecX = hPosRange.rightSecX,
  			hPosRangeY = hPosRange.y,
  			vPosRangeTopY = vPosRange.topY,
  			vPosRangeX = vPosRange.x,
  			// 存放在上面的图片的数组
  			topImage = [],
  			// 取一个或者不取图片
  			topImageNum = Math.floor(Math.random() * 2),
  			// 上面图片的序列号
  			topImageSpliceIndex = 0,
  			// 取出中间的图片
  			centerImage = imagesArrangeArr.splice(centerIndex, 1);
  		// 布局居中的图片
  		centerImage[0] = {
  			pos: centerPos,
  			rotate: 0,
  			isCenter: true
  		};
  
  		// 取出布局在上面的图片状态信息
  		topImageSpliceIndex = Math.floor(Math.random() * (imagesArrangeArr.length - topImageNum))
  		topImage = imagesArrangeArr.splice(topImageSpliceIndex, topImageNum)
  
  		// 布局上面的图片
  		topImage.forEach(function(value, index) {
  			topImage[index] = {
  				pos: {
  					top: getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]),
  					left: getRangeRandom(vPosRangeX[0], vPosRangeX[1])
  				},
  				rotate: get30Deg(),
  				isCenter: false
  			}
  		})
  
  		// 布局左右两侧的图片
  		for (let i = 0, j = imagesArrangeArr.length, k = j / 2; i < j; i++) {
  			var hPosRangeLORX = null;
  
  			// 前半部分布局左边， 右半部分布局右边
  			if (i < k) {
  				hPosRangeLORX = hPosRangeLeftSecX;
  			} else {
  				hPosRangeLORX = hPosRangeRightSecX;
  			}
  
  			// 进行布局
  			imagesArrangeArr[i] = {
  				pos: {
  					top: getRangeRandom(hPosRangeY[0], hPosRangeY[1]),
  					left: getRangeRandom(hPosRangeLORX[0], hPosRangeLORX[1])
  				},
  				rotate: get30Deg(),
  				isCenter: false
  			}
  		}
  
  		if (topImage && topImage[0]) {
  			imagesArrangeArr.splice(topImageSpliceIndex, 0, topImage[0])
  		}
  
  		imagesArrangeArr.splice(centerIndex, 0, centerImage[0])
  
  		this.setState({
  			imagesArrangeArr: imagesArrangeArr
  		})
  	}
  
  	// 组件加载后，为每张图片进行位置计算
  	componentDidMount() {
  		// 获取stage舞台节点，并获取其大小
  		/*
  		scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
  		clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
  		offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
  		 */
  		/*由于React的版本问题，使用React.findDOMNode会产生报错，这里需要使用ReactDOM.findDOMNode*/
  		var stageDOM = ReactDOM.findDOMNode(this.refs.stage),
  			stageW = stageDOM.offsetWidth,
  			stageH = stageDOM.offsetHeight,
  			halfStageW = stageW / 2,
  			halfStageH = stageH / 2;
  
  		// 拿到一个imageFigure的大小
  		var imageFigureDOM = ReactDOM.findDOMNode(this.refs.imageFigure0),
  			imgW = imageFigureDOM.scrollWidth,
  			imgH = imageFigureDOM.scrollHeight,
  			halfImgW = imgW / 2,
  			halfImgH = imgH / 2;
  		// 计算图片中心的位置点
  		this.Constant.centerPos = {
  			left: halfStageW - halfImgW,
  			top: halfStageH - halfImgH
  		}
  
  		// 计算左右区域图片位置的取值范围
  		this.Constant.hPosRange.leftSecX[0] = -halfImgW;
  		this.Constant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
  		this.Constant.hPosRange.rightSecX[0] = halfStageW + halfImgW;
  		this.Constant.hPosRange.rightSecX[1] = stageW - halfImgW;
  		this.Constant.hPosRange.y[0] = -halfImgH;
  		this.Constant.hPosRange.y[1] = stageH - halfImgH;
  
  		// 计算上侧区域图片位置的取值范围
  		this.Constant.vPosRange.x[0] = halfStageW - imgW;
  		this.Constant.vPosRange.x[1] = halfStageW;
  		this.Constant.vPosRange.topY[0] = -halfImgH;
  		this.Constant.vPosRange.topY[1] = halfStageH - halfImgH * 3;
  
  		this.rearrange(0);
  	}
  
  	// 重新排布图片
  	center(index) {
  		return () => this.rearrange(index)
  	}
  
  	// 翻转图片
  	reversal(index) {
  		return function() {
  			var imagesArrangeArr = this.state.imagesArrangeArr;
  			imagesArrangeArr[index].isReversal = !imagesArrangeArr[index].isReversal;
  			this.setState({
  				imagesArrangeArr: imagesArrangeArr
  			})
  		}.bind(this);
  	}
  	render() {
  		var controllerDots = [],
  			imageFigures = [];
  		// 利用forEach函数对imageDatas数组进行遍历，并将值传递给ImageFigure
  		imageDatas.forEach(function(value, index) {
  			if (!this.state.imagesArrangeArr[index]) {
  				this.state.imagesArrangeArr[index] = {
  					pos: {
  						left: 0,
  						top: 0
  					},
  					rotate: 0,
  					isCenter: false,
  					isReversal: false
  				}
  			}
  			imageFigures.push(<ImageFigure
  				key={index}
  				ref={'imageFigure' + index}
  				center= {this.center(index)}
  				reversal={this.reversal(index)}
  				arrange={this.state.imagesArrangeArr[index]}
  				data={value}/>)
  			controllerDots.push(<ControllerDot
  				key={index}
  				ref={'ControllerDot'+index}
  				arrange={this.state.imagesArrangeArr[index]}
  				center= {this.center(index)}
  				reversal={this.reversal(index)}
  				/>)
  		}.bind(this))
  
  		return (
  			<section className="stage" ref="stage">
  				<section className="image-sec">
  					{imageFigures}
  				</section>
  				<nav className="controller-nav">
  					{controllerDots}
  				</nav>
  			</section>
  		);
  	}
  }
  
  AppComponent.defaultProps = {};
  
  export default AppComponent;