/*
150216
oki_mslider 加上了指定圖庫群，可指定目前圖片的功能

150206
因不明因素 ver2在畫面過長時 slider置中會往下偏，所以先用此版固定在上面。

150205
oki_mslider , 如為單圖則不會有換圖效果，而且關掉左右換圖按紐



150121
1 slider的箭頭大小固定下來了。(使用圖片的情形下)

===============================
141222
1 img 的 transition會影響到javascript 所以盡量不要全開
2 關閉底色黑加了 $(window).trigger(resize);
3 這支有一個 oki_rwd_height 可依比例調區塊高度


===============================
140828
oki_rwd.js



*/






function oki_jqdrag(tgt,e){

    var node = $(tgt);//$(this)
    var position = node.offset();
    var initialized = {
        x : position.left - e.pageX,
        y : position.top - e.pageY
    };
    var handlers = {
        mousemove : function(e){
            node.css({
                left : ( initialized.x + e.pageX ) + 'px',
                top : ( initialized.y + e.pageY ) + 'px'
            });
        },
        mouseup : function(e){
            $(this).off(handlers);  
        }
    };
    $(document).on(handlers);

}











/*------------------------------------------------------------------------------------------------------*/

function oki_rwd_initial(){
  //console.log("oki_rwd initial!!");
/*Pane*/



/*Block*/

/*Title*/

/*Labels*/

/*Navibars*/
  //dropdown 



/*Tabs*/  
 
  $(".oki_tab li").each(function(){
    $(this).bind("click", function(){  $(this).parent(".oki_tab").find("li").css("opacity",0.6).removeClass("active");$(this).addClass("active").css("opacity",1)  });
    /*return ;// no effects */
    $(this).not(".active").css("opacity",0.6);   
    $(this).bind("mouseover", function(){  $(this).stop().stop().animate({"opacity":1},800,"")  });
    $(this).bind("mouseout", function(){  if( !$(this).hasClass("active") ) $(this).stop().stop().animate({"opacity":0.6},600,"").css("text-indent",0);   });
   
  });  


/*Buttons*/

/*Grid*/

/*Separator*/



/*other reseter*/
$("a[href='#']").attr("href","javascript:(function(){ })()");



/*united shadow [ oki_msgbox , oki_calendar ]*/

var oki_closeTarget=".oki_msgbox,.oki_calendar,.oki_mslider";

var oki_hideTarget=".content";//for open hide object


var oki_bgcloser=$("<div class='oki_bgcloser'>  </div>");
    $(oki_bgcloser).css("background-color","#000000").css("opacity",0.8).hide();
    $(oki_bgcloser).css("position","fixed").css("width","100%").css("top",0).css("left",0).css("z-index",9998);

    $(oki_bgcloser).bind("click",function(){ 
       $(oki_closeTarget).hide();
       $(oki_closeTarget).trigger("initial");
       $(this).stop().stop().fadeOut(300); 
      $("body,html").css("overflow","").css("height",""); 
      $(oki_hideTarget).show();
      $(window).trigger("resize");
       
    }).bind("open",function(){
       $(this).fadeIn(300);
       $("body,html").css("overflow","hidden").css("height",$(window).height());
        $(oki_hideTarget).hide();
    });



    $(oki_closeTarget).find(".closer").css("cursor","pointer").bind("click",function(){      
      $(".oki_bgcloser").trigger("click");
    });

    $("body").append( $(oki_bgcloser) );




/*oki_msgbox*/
$(".oki_msgbox_opener").bind("click",function(){  
  $(".oki_bgcloser").trigger("open");
  var tgt=$(this).attr("data-target");
  //console.log(tgt);
  $(tgt).delay(300).stop().stop().fadeIn(300);
});





/*oki_mslider*/
/*
example:
<div class="oki_mslider_opener" data-pics="a.jpg,b.jpg,c.jpg" data-now="b.jpg">
*/


$(".oki_mslider_opener").bind("click",function(){  
  $(this).css("cursor","pointer");

  var tgt=".oki_mslider";
  var pics=$(this).attr("data-pics").split(",");

 

  $(tgt).find("img").remove();
  for(var i=0;i<pics.length;i++){
	 if(pics[i]=='') continue;
	$(tgt).append("<img src='"+pics[i]+"' style='max-width:80%;max-height:80%;display:none' class='abs'>"); 
  }
  $(tgt).find("img").css("box-shadow","0px 0px 10px #000000");
  if($(this).attr("data-now")) {
      $(tgt).find("img[src='"+$(this).attr("data-now")+"']").show().addClass("active");
  }else{
     $(tgt).find("img").eq(0).show().addClass("active");
  }

  $(tgt).find("img").load( abs );
  $(tgt).find("img").load( function(){ $(this).css("top","8%")  } );
  
  
  	$(tgt).find("img").touchwipe({
			wipeLeft			: function() {
				 $(".oki_mslider .ctrl_r").trigger("click")	;//_navigate( 'right' );
			},
			wipeRight			: function() {
			     $(".oki_mslider .ctrl_l").trigger("click");//_navigate( 'left' );
			},
            min_move_x: 10,
            min_move_y: 10,     
		    preventDefaultEvents: false
	});//.on("touchstart",function(e){  oki_jqdrag($(this),e);    });// not workwell
  
    $(".oki_mslider ul").css("margin",0);//bootstrap will reset ul margin
  
     if(pics.length<=1) {
         $(".oki_mslider ul").find(".ctrl_l,.ctrl_r").css("opacity",0);
     }else{
         $(".oki_mslider ul").find(".ctrl_l,.ctrl_r").css("opacity",1);
     }

   $(".oki_bgcloser").trigger("open");  
  //console.log(tgt);
  $(tgt).delay(300).stop().stop().fadeIn(300);

  

});





tpl_oki_mslider=$("<div class='oki_mslider'> <ul class='ctrl_box'><li class='ctrl_l'> &lt; </li><li class='ctrl_closer'>close</li><li class='ctrl_r'> &gt; </li></ul> </div>");
$(tpl_oki_mslider).css("display","none").css("width","100%").css("height","100%").css("text-align","center");
$(tpl_oki_mslider).css("position","fixed").css("top",0).css("left",0).css("z-index","9999");//.css("background-color","#999999");
$(tpl_oki_mslider).css("overflow","hidden");

$(tpl_oki_mslider).find("ul").css("list-style","none").width("100%").css("position","fixed").css("bottom",0).css("background-color","#000000").css("z-index",10000).css("opacity",0.6).css("padding","20px 0px");
$(tpl_oki_mslider).find("ul li").css("float","left").css("color","white").css("width","33.3%").css("text-align","center").css("cursor","pointer");

/*customize slider lr button*/

$(tpl_oki_mslider).find('.ctrl_l,.ctrl_r').css("background-repeat","no-repeat").css("background-position","center").css("background-size","auto 30px").css("display","inline-block").html("&nbsp;");
$(tpl_oki_mslider).find('.ctrl_l').css("background-image","url(images/sldbtns_l.png)");
$(tpl_oki_mslider).find('.ctrl_r').css("background-image","url(images/sldbtns_r.png)");



//$("body").append("<div style='background-color:#ffffff;position:fixed;left:0px;top:0px'>111</div>");

$("body").append($(tpl_oki_mslider));

$(".oki_mslider .ctrl_closer").bind("click",function(){  $(".oki_bgcloser").trigger("click")   });

$(".oki_mslider .ctrl_l").bind("click",function(){   
    if( $(".oki_mslider img").length<=1) return;
    if($(".oki_mslider img.old").length>1) return;

    //console.log( $(".oki_mslider img.active").prev("img").length );
    if( $(".oki_mslider img.active").prev("img").length>0 ){
	   $(".oki_mslider img.active").addClass("old");	 
	   $(".oki_mslider img.active").prev("img").addClass("active");
	   $(".oki_mslider img.active:last").removeClass("active")
    }else{
	   $(".oki_mslider img.active").removeClass("active").addClass("old");	 
	   $(".oki_mslider img:last").addClass("active");
    }
      var old=  $(".oki_mslider img.old");
      var tgt=  $(".oki_mslider img.active");
      var ww=$(window).width();
      var wh=$(window).height();
      var tw=$(tgt).width();
      var th=$(tgt).height();

      var l=(ww-tw)/2;
      var t=(wh-th)/2;
  

      $(tgt).css("top","8%").css("left", -1*ww ).show(); // img 的 transition會影響到javascript 所以盡量不要全開
      //console.log( $(tgt).css("left"),-1*ww );

	  $(tgt).stop().stop().animate( {"left":l},300,function(){    });
      $(old).stop().stop().animate( {"left":ww},300,function(){  $(this).removeClass("old").hide()    });

});

$(".oki_mslider .ctrl_r").bind("click",function(){  
    if( $(".oki_mslider img").length<=1) return;
    if($(".oki_mslider img.old").length>1) return;

    if( $(".oki_mslider img.active").next("img").length>0 ){
	   $(".oki_mslider img.active").addClass("old");	 
	   $(".oki_mslider img.active").next("img").addClass("active");
	   $(".oki_mslider img.active").eq(0).removeClass("active");	 
    }else{
	   $(".oki_mslider img.active").removeClass("active").addClass("old");	
	   $(".oki_mslider img").eq(0).addClass("active");
    }
      var old=  $(".oki_mslider img.old");
      var tgt=  $(".oki_mslider img.active");
      var ww=$(window).width();
      var wh=$(window).height();
      var tw=$(tgt).width();
      var th=$(tgt).height();
      var l=(ww-tw)/2;
      var t=(wh-th)/2;
      $(tgt).css("top","8%").css("left",ww).show();
	  $(tgt).stop().stop().animate( {"left":l},300,function(){    });

      $(old).stop().stop().animate( {"left":ww*-1},300,function(){  $(this).removeClass("old").hide()   });
    
});

$(".oki_mslider").bind("resizer",function(){

	  var tgt=$(".oki_mslider img.active");
      var ww=$(window).width();
      var wh=$(window).height();
      var tw=$(tgt).width();
      var th=$(tgt).height();
      var l=(ww-tw)/2;
      var t=(wh-th)/2;
      $(tgt).css("top","8%").css("left",l).show();
  
	  
})



/*auto remake height by width*/

oki_rwd_height=function(){
  $("*[data-rwd-height!='']").each(function(){  
    $(this).height( $(this).width()*$(this).attr('data-rwd-height') ) ;
  });

    
  
}


/*united absmiddle*/
$(window).bind("resize",function(){
   $(".oki_bgcloser").height( $(window).height()*1.2 );
   
   $(oki_closeTarget).each(function(){

      var ww=$(window).width();
      var wh=$(window).height();
      var tw=$(this).width();
      var th=$(this).height();
      var l=(ww-tw)/2;
      var t=(wh-th)/2;
      (t<0)&&(t=0);
      (l<0)&&(l=0);
      $(this).css("position","fixed").css("top",t).css("left",l).css("z-index",9999);
       
   });

   $(".oki_mslider").trigger("resizer");
  /*oki rwd height*/
  oki_rwd_height();
   
}).trigger("resize");

function abs(){
	
	
	  var ww=$(window).width();
      var wh=$(window).height();
      var tw=$(this).width();
      var th=$(this).height();
      var l=(ww-tw)/2;
      var t=(wh-th)/2;
      (t<0)&&(t=0);
      (l<0)&&(l=0);
      $(this).css("position","fixed").css("top",t).css("left",l).css("z-index",9999);
       
	
}




}//end oki_rwd_initial



$(function(){
  $(".oki_button").each(function(){   
     
  });
  //oki_rwd_initial();
});

//for chrome initial
$(window).bind("load",function(){ 
  oki_rwd_initial() 
} );

/* msgbox -----------------------------------------------------------------------------------------------------------------------------------*/