$('.motion_wrapper ul').css({width:990*$('.motion_wrapper ul li').length});
//$('.motion_bg ul').css({width:990*$('.motion_wrapper ul li').length});
$('a.arrow_right').bind('click', function() {
	close($('.video_show'));
  var frames = $('.motion_wrapper ul li');
  var delta = parseInt((w - 990) / 2 + 0.5);
  var index = -1; var index2 = -1;
  frames.each(function(i, c) {
    if ($(c).offset().left > delta) {
      if (index == -1) index = i;
    }
    if($(c).offset().left > parseInt(w)){
    	if (index2 == -1) index2= i;
    }
  });
  if (index > - 1){moveTo(index);$('a.arrow_left').show() ;}
  if(index2 == -1) $('a.arrow_right').hide() ;
 
  return false;
});

$('a.arrow_left').bind('click', function() {
	close($('.video_show'));
  var frames = $('.motion_wrapper ul li');
  var delta = parseInt((w - 990) / 2 + 0.5);
  var index = -1;
  var index2 = 0;
  frames.each(function(i, c) {
    if ($(c).offset().left < delta) {
      index = i;
    }
    if($(c).offset().left < parseInt(w - 990 + 0.5)){
    	index2 = i;
    }
  });
  if (index > - 1) {moveTo(index);$('a.arrow_right').show() ;}
  if(index2 == 1) $('a.arrow_left').hide() ;
  
  return false;
});

function moveTo(index) {
  var container = $('.motion_wrapper ul');
  //var container_bg = $('.motion_bg ul');
  var frames = $('.motion_wrapper ul li');
 //var frames_bg = $('.motion_bg ul li');
  if (index < 0 || index >= frames.size()) return;
  container.stop();
  var left = $(frames.get(index)).position().left;
  //var left_bg = $(frames_bg.get(index)).position().left/2;
  var w = $(window).width();
  left -= (w - 990) / 2;
  //left_bg-= (w - 990) / 2;
  
  container.stop().animate({left:-left + 'px'});
  //container_bg.stop().animate({left:-left_bg + 'px'},500);
  
}


$('.motion_wrapper').bind('mousedown', function(event) {
  $(this).attr('drag', '1');
  $(this).attr('dragx', container.position().left - event.pageX + "");
  $(this).attr('dragpagex', event.pageX + '');
  $(this).addClass('drag');
  close($('.video_show'));
  return false;
}).bind('mousemove', function(event) {
  if ($(this).attr('drag') != '1') return;
  $('.direct_arrowhead a').fadeOut(30);
  var x = parseInt($(this).attr('dragx'));
  container.css({left: x + event.pageX + 'px'}); 
}).bind('mouseup', function(event) { 
	$(this).removeClass('drag');
	$(this).attr('drag', '0');
	$('.direct_arrowhead a').fadeIn(200);
	var x = container.position().left;
	var delta = (x - event.pageX) / 3;
	if (x > max) {
		x=max;$('a.arrow_left').hide() ;
	container.stop().animate({left: max+ 'px'}); return false;
	}
	if (x < min) {
		x=min;$('a.arrow_right').hide() ;
	container.stop().animate({left: min+ 'px'}); return false;
	}
	if($(this).attr('dragpagex')>event.pageX){
		container.animate({left: x +delta*0.3+ 'px'});
	}else if($(this).attr('dragpagex')<event.pageX){
		container.animate({left: x -delta*0.3+ 'px'});
	}else{return;}
	
});

var w = $(window).width();
var container = $('.motion_wrapper ul');
//var container_bg = $('.motion_bg ul');
var max = ($(window).width() - 990) / 2;
var min = -(container.width() - ($(window).width() +990) / 2);
container.css({left:((w - 990) / 2)+'px'});
//container_bg.css({left:((w - 990) / 2)+'px'});
//$('.arrow_right').hide();

//video_rounded


var $vbox=$('.video_thumb');
var $vcontent=$('.video_thumb ul');
var $vframes = $('.video_thumb ul li');
var vpage=1;
var vscreen=6;
var vpage_count = Math.ceil($vframes.length / vscreen);
var vwidth=$vbox.width();
var curl;
var flashobj='';
var flashpar;

$('a.rounded_l').click(function(){
		if( !$vcontent.is(":animated") ){
			if(vpage == 1 ){
				return false;
			}else{
				$vcontent.animate({ left : '+='+vwidth });
				vpage--;
			}
		}
	});
	$('a.rounded_r').click(function(){
		if( !$vcontent.is(":animated") ){
			if(vpage == vpage_count ){
				return false;
			}else{
				$vcontent.animate({ left : '-='+vwidth });
				vpage++;
			}
		}
	})
	$('.video_thumb ul li a').bind('click',function(){
		$(this).parent().addClass('current').siblings().removeClass('current');
		$('.video_box span').html($(this).find('p').text())
		flvurl=$(this).parent().attr('video_url');
		flvjpg=$(this).parent().attr('video_pic');
		if(!flvjpg){ var flvjpg="resource/www/images/product/x903/images/flv_bg.jpg"}
		flashpar="&CuPlayerFile="+flvurl+"&CuPlayerImage="+flvjpg+"&CuPlayerWidth=640&CuPlayerHeight=350&CuPlayerAutoPlay=true&CuPlayerAutoRepeat=false&CuPlayerShowControl=true&CuPlayerAutoHideControl=false&CuPlayerAutoHideTime=0&CuPlayerVolume=80";
		switchflv(flashpar);
		return false;
	})
	
	function intplay(s){
		if(s){
			flvurl=$vframes.eq(0).attr('video_url');
			flvjpg=$vframes.eq(0).attr('video_pic');
			flashpar="&CuPlayerFile="+flvurl+"&CuPlayerImage="+flvjpg+"&CuPlayerWidth=640&CuPlayerHeight=350&CuPlayerAutoPlay=true&CuPlayerAutoRepeat=false&CuPlayerShowControl=true&CuPlayerAutoHideControl=false&CuPlayerAutoHideTime=0&CuPlayerVolume=80";
			$vframes.eq(0).addClass('current').siblings().removeClass('current');
			switchflv(flashpar);
			}else{
				$('.video_preview').html("<strong>oppo find me~  x903智能手机</strong>");
			}
		}
	
	function switchflv(v){
			flashobj="<embed src='resource/www/images/product/x903/flash/xplay_b.swf' flashvars='"+v+"' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='640' height='350'></embed>";
			$('.video_preview').html(flashobj);
		}
		
	$('.view_video').click(function(){
		open($('.video_show'));
		})
	
	$('.video_box h2 a').click(function(){
		close($('.video_show'));
	})
	
	function close(d){
		$(d).fadeOut(function(){
		  if($(this).alpha==0){
			  $(this).hide();
			  intplay(0);
			  }
		  });
		}
	function open(d){
		$(d).fadeIn().show();
		intplay(1);
		}
	$vcontent.css({width:($vframes.width()+10)*$vframes.length});

//
function resize_main() {
	$('.motion_wrapper').css({width:$(window).width()});
	w =  $(window).width();      //动态更改W的值，避免出现窗口调整的时候左右滚动出现问题的BUG  P.L.R 10:26 2011-08-09
}
$(document).ready(function(){
	$('.video_show').css({top:95,left:(w-990)/2+'px'});
	window.onresize = function() {resize_main()}
	resize_main();
	$('a.arrow_right').fadeIn(1000) ;
	//$('#header .nav').css({opacity:0});
	//$('#header .nav').animate({opacity:1},1000);
})