//3.通用函数
function g(selector) {
	var mothod = selector.substr(0, 1) == '.' ? 'getElementsByClassName' : 'getElementById';
	return document[mothod](selector.substr(1));
}

//随机生成一个值,z支持取值范围
function random(range){
	var max = Math.max(range[0],range[1]);
	var min = Math.min(range[0],range[1]);
	var diff = max-min;
	var number = Math.random() * diff * min;
}

//4.输出所有的海报
var data = data;

function addPhotos() {

	var template = g('#warp').innerHTML;
	var html = [];

	for(s in data) {

		var _html = template
			.replace('{{index}}', s)
			.replace('{{img}}', data[s].img)
			.replace('{{caotion}}', data[s].caption)
			.replace('{{desc}}', data[s].desc);
		html.push(_html);

	}

	g('#warp').innerHTML = html.join('');
	rsort(random([0,data.length]));
}
addPhotos();
//6.计算左右分区的范围
function range(){
	var range = { left:{ x:{}, y:{} } , right:{ x:{}, y:{} } };
	var wrap  = {
		w:g('#warp').clientWidth,
		h:g('#warp').clientHeight
	}
	var photo = {
		w:g('.photo')[0].clientWidth,
		h:g('.photo')[0].clientHeight
	}
	range.wrap = wrap;
	range.photo = photo;
	
	range.left.x = [0-photo.w, wrap.w/2-photo.w/2];
	range.left.y = [0-photo.h, wrap.h];
	
	range.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w];
	range.right.y  = range.left.y;
	return range;
}

//5.排序海报
function rsort(n){
	var _photo = g('.photo');
	var photos = [];
	for (s=0; s<_photo.length;s++) {
		
		_photo[s].className = _photo[s].className.replace(/\s*photo_center\s*/,'')
		photos.push(_photo[s]);
	}
	
	var photo_center = g('#photo_'+n);
	photo_center.className+='photo_center ';
	photo_center = photos.splice(n,1)[0];
	//分为左右区域
	var photos_left = photos.splice(0,Math.ceil(photos.length/2 ))
	var photos_right = photos;
	
	var ranges = range();
	for (s in photos_left) {
		var photo = photos_left[s];
		
		photo.style.left = random(ranges.left.x) + 'px';
		photo.style.top =random(ranges.left.y)+ 'px';
	}
	
	for (s in photos_right) {
		var photo = photos_right[s];
		photo.style.left = random(ranges.right.x) + 'px';
		photo.style.top =random(ranges.right.y)+ 'px';
	}
	
	//console.log(photos.length);
}

//1.翻面控制
function turn(elem) {
	var cls = elem.className;
	if(/photo_front/.test(cls)) {
		cls = cls.replace(/photo_front/, 'photo_back');
	} else {
		cls = cls.replace(/photo_back'/, 'photo_front');
	}
	return elem.className = cls;
}

只能翻转一次咋整