//电视剧大图滚动
(function(jq){
	var postertvgrid = function(o, options, data){
		this.parent = jq("#"+ o);
		this.body   = jq("body");
		if (this.parent.length <= 0) { 
			return false;
		}
		
		this.options = jq.extend({}, postertvgrid.options, options);
		if(typeof(data) !== 'object') return false;

		this.data = data || {};
		this.reset();
		//处理页面resize
		var _this = this;
		jq(window).resize(function(){
				_this.reset();
		});
	};
	postertvgrid.prototype = {
		reset: function(options){
			if(typeof(options) == 'object'){
				jq.extend(this.options, options);	
			}
			if(parseint(this.body.outerwidth())>1002 || navigator.useragent.indexof('ipad') !== -1){
				this.options.width = 677;	
			}else{
				this.options.width = 677;	
			}
			this.total = this.data.length;
			this.pagenow = this.options.initpage;
			this.preleft = 0;
			this.nextleft = this.options.width-380;
			this.prenleft = -380;
			this.nextnleft = this.options.width;
			this.pagenowleft = (this.options.width-518)/2
			this.drawcontent();
		},
		drawcontent: function(){
			this.parent.empty();
			this.parent.css({width:this.options.width+"px", height:this.options.height+"px", position: "relative"});
			this.content = document.createelement("div");
			this.content.classname = this.options.classname;
			this.content.csstext = "width:"+this.options.width+"px;height:"+this.options.height+"px;cursor:move;position:absolute;";
				this.bottomnav = document.createelement("div");
				this.bottomnav.classname = "bottomnav";
				for(var i=1; i<= this.total; i++){
					var bottomitem = document.createelement("div");
					bottomitem.classname = "bottomnavbuttonoff";
					if(i == this.pagenow){
						bottomitem.classname = "bottomnavbuttonoff bottomnavbuttonon";
					}
					bottomitem.setattribute("ref", i);
					this.bottomnav.appendchild(bottomitem);
				}
				this.content.appendchild(this.bottomnav);
				this.bannercontrols = '<div class="bannercontrols"> <div class="leftnav" style="display: block;"></div> <div class="rightnav" style="display: block;"></div> </div>';
				this.content.innerhtml += this.bannercontrols;

			this.contentholder = document.createelement("div");
			this.contentholder.style.width = this.options.width + 'px';
			this.contentholder.style.height = this.options.height + 'px';
			
			for(var item=0, i = 1, l= this.data.length ; item < l ; ++item, ++i){
				var contentholderunit = document.createelement("div");
				contentholderunit.classname = "contentholderunit";
				contentholderunit.setattribute("ref", i);
				contentholderunit.setattribute("id", 'contentholderunit' + (i));
				var unititem = '<a href="'+this.data[item].url+'" target="_blank" class="elementlink">';
				unititem += '</a>';
				unititem += '<img src="'+this.data[item].img+'" alt="'+this.data[item].title+'"/>';
				unititem += '<span class="elementoverlay"></span>';
				unititem += '<span class="leftshadow"></span>';
				unititem += '<span class="rightshadow"></span>';
				contentholderunit.innerhtml = unititem;
				this.contentholder.appendchild(contentholderunit);
			}
			this.content.appendchild(this.contentholder);
			this.parent.append(this.content);
			this.parent.css({overflow:'hidden'});
			this.initcontent();
			this.bind();
			this.start();
		},
		initcontent: function(){
			contentholderunit = this.parent.find(".contentholderunit");
			contentholderunit.css({width:'0px',height:'0px', opacity: 0, left:this.options.width/2+'px', zindex:0, margintop: '135px'});
			this.parent.find(".contentholderunit:nth-child("+this.pagenow+")").css({width:'518px',height:'409px', opacity: 1, left: this.pagenowleft+'px', zindex: 3, margintop: 0});
			this.parent.find(".contentholderunit:nth-child("+this.pagenow+") .elementoverlay").css({opacity:0});
			this.parent.find(".contentholderunit:nth-child("+this.pagenow+") .leftshadow").css({opacity:1});
			this.parent.find(".contentholderunit:nth-child("+this.pagenow+") .rightshadow").css({opacity:1});
			
			var pre = this.pagenow > 1 ? this.pagenow -1: this.total;
			var next = this.pagenow == this.total ? 1 : this.pagenow + 1;
			this.parent.find(".contentholderunit:nth-child("+pre+")").css({opacity: 1, left: this.preleft+'px',height: '300px', width: '380px', zindex: 0, margintop: '53px'});
			this.parent.find(".contentholderunit:nth-child("+pre+") .elementoverlay").css({opacity:0.4});
			this.parent.find(".contentholderunit:nth-child("+pre+") .leftshadow").css({opacity:0});
			this.parent.find(".contentholderunit:nth-child("+pre+") .rightshadow").css({opacity:0});

			this.parent.find(".contentholderunit:nth-child("+next+")").css({opacity: 1, left: this.nextleft+'px',height: '300px', width: '380px', zindex: 0, margintop: '53px'});
			this.parent.find(".contentholderunit:nth-child("+next+") .elementoverlay").css({opacity:0.4});
			this.parent.find(".contentholderunit:nth-child("+next+") .leftshadow").css({opacity:0});
			this.parent.find(".contentholderunit:nth-child("+next+") .rightshadow").css({opacity:0});
		},
		bind: function(){
			this.leftnav = this.parent.find(".leftnav");
			this.rightnav = this.parent.find(".rightnav");
			this.bottonnav = this.parent.find(".bottomnavbuttonoff");
			this.lists = this.parent.find(".contentholderunit");
			var _this = this;
			this.parent.mouseover(function(){
				_this.stop();
				_this.leftnav.show();
				_this.rightnav.show();
			});
			this.parent.mouseout(function(){
				_this.start();
				//_this.leftnav.hide();
				//_this.rightnav.hide();
			});
			
			_this.leftnav.click(function(){
				_this.turn("right");					 
			});
			_this.rightnav.click(function(){
				_this.turn("left");					 
			});
			_this.bottonnav.click(function(){
				var ref = parseint(this.getattribute("ref"));
				if(_this.pagenow == ref) return false;

				if(_this.pagenow < ref){
					var rightabs = ref - _this.pagenow;
					var leftabs = _this.pagenow + _this.total - ref;
				}else{
					var rightabs = _this.total - _this.pagenow + ref;
					var leftabs = _this.pagenow - ref;
				}
				if(leftabs < rightabs){
					 dir = "right";	
				}else{
					 dir = "left";	
				}

				_this.turnpage(ref, dir);
				return false;
			});
			
			_this.lists.click(function(e){
				var ref = parseint(this.getattribute("ref"));
				if(_this.pagenow == ref) {
					return true;
				}else{
					e.preventdefault();
				}
				if(_this.pagenow < ref){
					var rightabs = ref - _this.pagenow;
					var leftabs = _this.pagenow + _this.total - ref;
				}else{
					var rightabs = _this.total - _this.pagenow + ref;
					var leftabs = _this.pagenow - ref;
				}
				if(leftabs < rightabs){
					 dir = "right";	
				}else{
					 dir = "left";	
				}
				_this.turnpage(ref, dir);	

			});
		},
		initbottomnav: function(){
				this.parent.find(".bottomnavbuttonoff").removeclass("bottomnavbuttonon");
				this.parent.find(".bottomnavbuttonoff:nth-child("+this.pagenow+")").addclass("bottomnavbuttonon");
		},
		start: function(){
			var _this = this;
			if(_this.timerid) _this.stop();
			_this.timerid = setinterval(function(){
				if(_this.options.direct == "left"){
					_this.turn("left");	
				}else{
					_this.turn("right");	
				}
			}, _this.options.delay);
		},
		stop: function(){
			clearinterval(this.timerid);
		},
		turn: function(dir){
			var _this = this;
			
			if(dir == "right"){
				var page = _this.pagenow -1;
				if(page <= 0) page = _this.total;
			}else{
				var page = _this.pagenow + 1;
				if(page > _this.total) page = 1;
			}
			_this.turnpage(page, dir);
		},
		turnpage: function(page, dir){
			var _this = this;
			if(_this.locked) return false;
			_this.locked = true;
			if(_this.pagenow == page) return false;
			
			var run = function(page, dir, t){
				var pre = page > 1 ? page -1: _this.total;
				var next = page == _this.total ? 1 : page + 1;
				var prep = pre - 1 >= 1 ? pre-1 : _this.total;
				var nextn = next + 1 > _this.total ? 1 : next+1;
				if(pre != _this.pagenow && next != _this.pagenow){
					var nowpre = _this.pagenow > 1 ? _this.pagenow -1: _this.total;
					var nownext = _this.pagenow == _this.total ? 1 : _this.pagenow + 1;
					_this.parent.find(".contentholderunit:nth-child("+nowpre+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zindex:0, margintop: '135px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+_this.pagenow+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zindex:0, margintop: '135px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+nownext+")").animate({width:'0px',height:'0px', opacity: 0, left:_this.options.width/2+'px', zindex:0, margintop: '135px'}, t);
				}
				if(dir == 'left'){					
					_this.parent.find(".contentholderunit:nth-child("+_this.pagenow+")").css({zindex: 0});
				
					
					_this.parent.find(".contentholderunit:nth-child("+pre+") .elementoverlay").css({opacity:0.4});
					_this.parent.find(".contentholderunit:nth-child("+pre+")").animate({opacity: 1, left: _this.preleft+'px', height: '300px', width: '380px', zindex: 2, margintop: '53px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+pre+") .leftshadow").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+pre+") .rightshadow").css({opacity:0});
					
					
					_this.parent.find(".contentholderunit:nth-child("+page+")").css({zindex: 3});
					_this.parent.find(".contentholderunit:nth-child("+page+")").animate({opacity: 1, left: _this.pagenowleft+'px', height: '409px', width: '518px', zindex: 3, margintop: '0'}, t);
					_this.parent.find(".contentholderunit:nth-child("+page+") .elementoverlay").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+page+") .leftshadow").css({opacity:1});
					_this.parent.find(".contentholderunit:nth-child("+page+") .rightshadow").css({opacity:1});
					
					_this.parent.find(".contentholderunit:nth-child("+next+")").css({opacity: 0, left: _this.nextnleft+'px', height: '100px', width: '380px', zindex: 2, margintop: '85px'});
					_this.parent.find(".contentholderunit:nth-child("+next+")").animate({opacity: 1, left: _this.nextleft+'px', height: '300px', width:"380px", zindex: 2, margintop: '53px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+next+") .elementoverlay").css({opacity:0.4});
					_this.parent.find(".contentholderunit:nth-child("+next+") .leftshadow").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+next+") .rightshadow").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+prep+")").css({zindex:0});
					_this.parent.find(".contentholderunit:nth-child("+prep+")").animate({width:'380px',height:'100px', opacity: 0, left:_this.prenleft+'px', zindex:0, margintop: '85px'},t, "", function(){_this.locked=false;});
					
					
				}else{
					_this.parent.find(".contentholderunit:nth-child("+_this.pagenow+")").css({zindex: 0});
					
					_this.parent.find(".contentholderunit:nth-child("+next+")").css({zindex:2});
					_this.parent.find(".contentholderunit:nth-child("+next+")").animate({opacity: 1, left: _this.nextleft+'px', height: '300px', width: '380px', zindex: 2, margintop: '53px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+next+") .elementoverlay").css({opacity:0.4});
					_this.parent.find(".contentholderunit:nth-child("+next+") .leftshadow").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+next+") .rightshadow").css({opacity:0});
					
					_this.parent.find(".contentholderunit:nth-child("+page+")").css({zindex: 3}, t);
					_this.parent.find(".contentholderunit:nth-child("+page+")").animate({opacity: 1, left: _this.pagenowleft+'px', height: '409px', width: '518px', zindex: 3, margintop: '0px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+page+") .elementoverlay").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+page+") .leftshadow").css({opacity:1});
					_this.parent.find(".contentholderunit:nth-child("+page+") .rightshadow").css({opacity:1});
					
					_this.parent.find(".contentholderunit:nth-child("+pre+")").css({opacity: 0, left: _this.prenleft+'px', height: '100px', width: '380px', zindex: 2, margintop: '85px'});
					_this.parent.find(".contentholderunit:nth-child("+pre+")").animate({opacity: 1, left: _this.preleft+'px', height: '300px', width: '380px', zindex: 2, margintop: '53px'}, t);
					_this.parent.find(".contentholderunit:nth-child("+pre+") .elementoverlay").css({opacity:0.4});
					_this.parent.find(".contentholderunit:nth-child("+pre+") .leftshadow").css({opacity:0});
					_this.parent.find(".contentholderunit:nth-child("+pre+") .rightshadow").css({opacity:0});
					
					_this.parent.find(".contentholderunit:nth-child("+nextn+")").css({zindex:0});
					_this.parent.find(".contentholderunit:nth-child("+nextn+")").animate({width:'380px',height:'100px', opacity: 0, left:_this.nextnleft+'px', zindex:0, margintop: '85px'}, t, "",function(){_this.locked=false;});
				}
			
				_this.pagenow = page;
				_this.initbottomnav();
			};
			
			run(page, dir,_this.options.speed);					
			
		}
		
	};

	postertvgrid.options = {
		offsetpages : 3,//默认可视最大条数
		direct : "left",//滚动的方向
		initpage : 1,//默认当前显示第几条
		classname : "postertvgrid",//最外层样式
		autowidth : true,//默认不用设置宽
		width : 1002,//最外层宽，需要使用的时候在传,默认由程序自动判断
		height : 409,//最外层高  
		delay : 5000,//滚动间隔（毫秒）
		speed : 500 //滚动速度毫秒
	};
	
	window.postertvgrid = postertvgrid;
})(jquery);