define(['html!vendorDir/video/video.html','css!vendorDir/video/css/video.css'],function(video){
var video_stus={
//渲染div的id
id:"",
//定时器
timer:"",
//时间轴移动的位置
x : 0,
//时间轴移动的当前时间
StartTime :0,
//时间轴移动的总时间
totalTime:"",
//每秒移动的像素
perTime:"",
//播放时间间隔(秒)
t:2 ,
//播放总页数
dataCount : 0,
//开始时间
startT:"",
//结束时间
endT:"",
//每页数据的时间段(小时)
timeInter:1,
//播放的当前页数
nowPage:1
}
//播放器初始化
function init(id,callback){
video_stus.id=id;
initPlayData();
$("#"+id+" .cover-content").html(video);
initTime();
measurTotalTime();
bingEvents(video_stus);
btnDisabled();
if(typeof callback === "function"){
callback.call();
}
}
//查询数据初始化
function dataInit(){
clearInterval(video_stus.timer);
video_stus.StartTime = 0;
video_stus.x = 0;
$(".video-progress_btn").css("left",video_stus.x-12);
initTime();
measurTotalTime();
btnDisabled();
}
function initPlayData(){
video_stus.x=0;
video_stus.StartTime = 0;
video_stus.nowPage=1;
}
function initTime(){
var nowDate = new Date();
var endDate = nowDate.getTime();
var startDate = $("#video-query-startDate").val();
if(!startDate){
startDate = nowDate.setHours(nowDate.getHours()-(24*7));
$("#video-query-startDate").val(getTimeStr(startDate,2))
$("#video-query-endDate").val(getTimeStr(endDate,2))
}
video_stus.startT=getTimeStr(startDate)
video_stus.endT=getTimeStr(endDate)
$(".start-time").html(video_stus.startT)
$(".end-time").html(video_stus.endT)
$(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+"");
var t = new Date(video_stus.startT);
var s = new Date(video_stus.endT);
video_stus.dataCount=Math.ceil(Math.abs(t - s)/1000/60/(60*video_stus.timeInter));
}
function bingEvents(){
$(".video-btn-stop").off("click").on("click",function(){
var o = $(this)
if(o.hasClass("video-stop-img")){return;}
stop();
ONEMAP.C.publisher.publish({
action:'stop',
data:video_stus
}, video_stus.id);
});
$(".video-btn-back").off("click").on("click",function(){
var o = $(this);
$(".video-progress_btn").show();
if(o.hasClass("video-back-img")){return;}
back();
ONEMAP.C.publisher.publish({
action:'back',
data:video_stus
}, video_stus.id);
});
$(".video-btn-play").off("click").on("click",function(){
var o = $(this);
$(".video-progress_btn").show();
if(o .hasClass("video-play-img")){
if(video_stus.dataCount==0){return;}
ONEMAP.C.publisher.publish({
action:'play',
data:video_stus
}, video_stus.id);
play();
o.removeClass("video-play-img").addClass("video-parse-img");
}else{
clearInterval(video_stus.timer);
ONEMAP.C.publisher.publish({
action:'parse',
data:video_stus
}, video_stus.id);
o.removeClass("video-parse-img").addClass("video-play-img");
}
});
$(".video-btn-next").off("click").on("click",function(){
var o = $(this);
$(".video-progress_btn").show();
if(o.hasClass('video-next-img')){return;}
next()
ONEMAP.C.publisher.publish({
action:'next',
data:video_stus
}, video_stus.id);
});
$(".video-query-btns").off("click").on("click",function(){
dataInit();
ONEMAP.C.publisher.publish({
action:'query',
data:video_stus
}, video_stus.id);
});
$(".title-right-close").off("click").on("click",function(){
$("#"+video_stus.id).hide();
clearInterval(video_stus.timer);
ONEMAP.C.publisher.publish({
action:'close',
data:video_stus
}, video_stus.id);
});
$(".video-progress_btn").off("mousedown").on("mousedown",function(event){
clearInterval(video_stus.timer);
$(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img");
var o = $(this)
var yuanleft = 0;
var leftVal = event.clientX - this.offsetLeft;
var op = $(".video-progress")
document.onmousemove = function(event){
var event = event || window.event;
yuanleft = event.clientX - leftVal;
if(yuanleft < 0){
yuanleft =-12;
}else if(yuanleft > op.width()-12){
yuanleft = op.width()-12;
}
o.css("left",yuanleft);
$(".video-progress-tip").css("left",yuanleft-22).show();
video_stus.x = yuanleft;
//接近时间段的值
var pos =Math.floor(Math.abs((yuanleft)%(video_stus.perTime*video_stus.t)));
// measureNowTime();
var index = Math.floor((yuanleft+12)/(video_stus.perTime*video_stus.t));
video_stus.nowPage = (index<0?0:index);
if(pos==0){
ONEMAP.C.publisher.publish({
action:'onmousemove',
data:video_stus
}, video_stus.id);
}
measureNowTime();
if(video_stus.nowPage==video_stus.dataCount){
$(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+"");
}else{
var nowdate = new Date(video_stus.startT);
nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
$(".video-progress-tip").html(getTimeStr(nowdate,1))
$(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+"");
}
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function(){
document.onmousemove = null; //弹起鼠标不做任何操作
}
})
$(".video-progress_btn").off("mouseenter").on("mouseenter",function(e){
var o = $(this);
var nowdate = new Date(video_stus.startT);
nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
// var x = $(".video-progress_btn").css("left");
$(".video-progress-tip").html(getTimeStr(nowdate,1));
// $(".video-progress-tip").css("left",x+20);
// $(".video-progress-tip").show()
});
$(".video-progress_btn").off("mouseleave").on("mouseleave",function(e){
var nowdate = new Date(video_stus.startT);
// var x = $(".video-progress_btn").css("left");
// $(".video-progress-tip").css("left",x-12);
nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
$(".video-progress-tip").html(getTimeStr(nowdate,1));
$(".video-progress-tip").hide()
})
// $(".video-progress_btn").off("mouseup").on("click",function(e){
// console.info(e.offsetX)
// console.info($(this).is(':hidden'))
// if($('.video-progress-tip').is(':hidden')){
// $(".video-progress-tip").css("left",e.offsetX-45).show();
// }else{
// $(".video-progress-tip").css("left",e.offsetX-45).hide();
// }
// })
// $(".video-progress").off("click").on("click",function(e){
// video_stus.x=e.offsetX;
// $(".video-progress_btn").css("left",e.offsetX-12);
// measureNowTime();
// if(video_stus.nowPage==video_stus.dataCount){
// $(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+"");
// }else{
// var nowdate = new Date(video_stus.startT);
// nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
// $(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+"");
// }
// ONEMAP.C.publisher.publish({
// action:'progressClick',
// data:video_stus
// }, video_stus.id);
// })
}
function play(){
$(".video-progress-tip").hide();
time();
}
function time(){
video_stus.timer = window.setInterval(timeStart,1000);
}
//开始事件启动定时器
function timeStart(){
video_stus.StartTime ++;
var proWidth = $(".video-progress").width();
video_stus.x += video_stus.perTime;
if(video_stus.StartTime >= video_stus.totalTime){
video_stus.StartTime = video_stus.totalTime;
clearInterval(video_stus.timer);
stop();
return;
}
if(isNaN(video_stus.StartTime)){
video_stus.StartTime = 1;
}
var per = video_stus.t;
var now = (video_stus.StartTime - video_stus.StartTime%per)/per;
if(now > video_stus.totalTime){
now = video_stus.totalTime;
}
if(now>video_stus.dataCount){
now=video_stus.dataCount;
}
$(".video-progress-nowtime").empty();
$(".video-progress-nowtime").text(now);
video_stus.nowPage=now;
$(".video-progress_btn").css("left",(video_stus.x>388?388:video_stus.x));
var tip_left = $(".video-progress_btn").css("left");
$(".video-progress-tip").css("left",tip_left);
//每video_stus.t秒平播放一次
if((video_stus.StartTime%video_stus.t) == 0){
ONEMAP.C.publisher.publish({
action:'show',
data:video_stus
}, video_stus.id);
if(video_stus.nowPage==video_stus.dataCount){
$(".title-left-c").html("北斗用户分布态势-"+video_stus.endT+"");
}else{
var nowdate = new Date(video_stus.startT);
nowdate = nowdate.setHours(nowdate.getHours()+video_stus.nowPage);
$(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+"");
}
}
btnDisabled();
}
function getTimeStr(d,type){
var now = new Date(d);
var year = now.getFullYear();
var month = (now.getMonth()+1) < 10 ? '0'+(now.getMonth()+1) : (now.getMonth()+1);
var date = now.getDate() < 10 ? '0' + now.getDate() : now.getDate();
var hours = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
var minutes = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
var seconds = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
if(type==1){
return hours +':'+ minutes+':'+seconds;
}else if(type==2){
return year + '-' + month +'-' + date + ' ' +hours +':'+ minutes+':'+seconds;
}else{
return year + '/' + month +'/' + date + ' ' +hours +':'+ minutes+':'+seconds;
}
}
function btnDisabled(){
if(video_stus.dataCount>0){
$(".video-btn-next").removeClass("video-next-img").addClass("video-next-img-blue");
if(video_stus.StartTime==0){
$(".video-btn-back").removeClass("video-back-img-blue").addClass("video-back-img");
$(".video-btn-stop").removeClass("video-stop-img-blue").addClass("video-stop-img");
$(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img");
}else if(video_stus.StartTime>0){
if(video_stus.nowPage>=video_stus.dataCount){
$(".video-btn-next").removeClass("video-next-img-blue").addClass("video-next-img");
}
$(".video-btn-back").removeClass("video-back-img").addClass("video-back-img-blue");
$(".video-btn-stop").removeClass("video-stop-img").addClass("video-stop-img-blue");
}
}else{
$(".video-btn-next").removeClass("video-next-img").addClass("video-next-img-blue");
$(".video-btn-back").removeClass("video-back-img-blue").addClass("video-back-img");
$(".video-btn-stop").removeClass("video-stop-img-blue").addClass("video-stop-img");
$(".video-btn-play").removeClass("video-parse-img").addClass("video-play-img");
}
}
function stop(){
clearInterval(video_stus.timer);
video_stus.StartTime = 0;
video_stus.x = 0;
$(".video-progress_btn").css("left",video_stus.x-12);
measureNowTime();
btnDisabled();
}
function next(){
$(".video-progress-tip").hide();
var per = video_stus.t;
if(video_stus.StartTime == video_stus.totalTime-per){
video_stus.StartTime = video_stus.totalTime;
video_stus.x = $(".video-progress").width()-12;
$(".video-progress_btn").css("left",$(".video-progress").width()-12);
var tip_left = $(".video-progress_btn").css("left");
$(".video-progress-tip").css("left",tip_left-20);
}else{
video_stus.StartTime += per;
video_stus.x += video_stus.perTime*per;
$(".video-progress_btn").css("left",video_stus.x>388?388:video_stus.x);
var tip_left = $(".video-progress_btn").css("left");
$(".video-progress-tip").css("left",tip_left-20);
}
measureNowTime();
btnDisabled();
var nowdate = new Date(video_stus.startT);
nowdate = nowdate.setHours(nowdate.getHours()+(video_stus.nowPage+1));
$(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+"");
}
function back(){
$(".video-progress-tip").hide();
var per = video_stus.t;
if(video_stus.StartTime < per){
video_stus.StartTime = 0;
video_stus.x = 0;
}else{
video_stus.StartTime -= per;
video_stus.x -= video_stus.perTime*per;
}
$(".video-progress_btn").css("left",(video_stus.x==0?video_stus.x-12:video_stus.x));
var tip_left = $(".video-progress_btn").css("left");
$(".video-progress-tip").css("left",tip_left-20);
measureNowTime();
btnDisabled();
var nowdate = new Date(video_stus.startT);
nowdate = nowdate.setHours(nowdate.getHours()-(video_stus.nowPage-1));
$(".title-left-c").html("北斗用户分布态势-"+getTimeStr(nowdate)+"");
}
//计算当前页数
function measureNowTime(){
var tmp = video_stus.x/($(".video-progress").width()-12);
video_stus.StartTime = Math.floor(video_stus.totalTime * tmp);
var per = video_stus.t;
var now = (video_stus.StartTime - video_stus.StartTime%per)/per;
if(now >= video_stus.dataCount){
now = video_stus.dataCount;
}
$(".video-progress-nowtime").empty();
$(".video-progress-nowtime").text((now<0?0:now));
video_stus.nowPage=now;
}
function measurTotalTime(){
var total = video_stus.dataCount*video_stus.t;
var totMin = Math.floor(total/60);
var totSecond = total%60;
var totTime = pad(totMin) + ":" + pad(totSecond);
var totTime = pad(totMin) + ":" + pad(totSecond);
$(".video-progress-lasttime").empty();
$(".video-progress-lasttime").val(totTime);
$(".video-progress-lasttime").text(video_stus.dataCount);
if(video_stus.dataCount > 0){
$(".video-progress-nowtime").text(0);
video_stus.nowPage=1;
}
meaurePerTime();
}
//计算圆点每隔一秒前进的像素数
function meaurePerTime(){
var totString = $(".video-progress-lasttime").val();
var totArr = totString.split(":");
var totMin = parseInt(totArr[0]);
var totSecond = parseInt(totArr[1]);
var proWidth = $(".video-progress").width();
video_stus.totalTime = totMin*60 + totSecond;
video_stus.perTime = (proWidth-12)/video_stus.totalTime;
}
function pad(m){
if(m.length<2){
m="0"+m;
return pad(m)
}else{
return m
}
}
function clearTimer(){
clearInterval(video_stus.timer);
}
return ONEMAP.M.video={
init:init,
dataInit:dataInit,
clearTimer:clearTimer,
videoData:video_stus
}
})