// JScript source code

//****************Global variables****************************************************
var VIDEO_POS_X = 50;
var VIDEO_POS_Y = 150;
var DIA_POS_X = 500;
var DIA_POS_Y = 150;
var DEFAULT_VIDEO_WIDTH = 300;
var VIDEO_RATIO = 1.33333;
var DEFAULT_DIA_WIDTH = 284;
var DIA_RATIO = 1.28125;
var Z_INDEX_DRAG = 3;
var Z_INDEX_STAY = 2;
var HANDLE_OFFSET = 10;
var BACK_OFFSET = 10;

//****************Sizing and placing functions****************************************

//Placing all elements when the page is loaded
function LoadPage()
{
    SetOriginalSizeToVideoAndDia();
    PlaceVideoAndDia();
    PlaceHandle();
}
//return a one dimension table with x,y coordonate of the upper left size of an element designed by his ID
function GetPositionFromId(id)
{
    return GetPosition(GetElement(id));
}
//return a one dimension table with width,height of an element designed by his ID
function GetSizeFromId(id)
{
    var element = GetElement(id);
    if(element == null || element==undefined) return [0,0];
    return [Number(myReplace(element.style.width,"px","")),Number(myReplace(element.style.height,"px",""))];
}
//return a one dimension table with x,y coordonate of the upper left size of an element
function GetPosition(element)
{
    if(element == null || element==undefined) return [0,0];
    return [Number(myReplace(element.style.left,"px","")),Number(myReplace(element.style.top,"px",""))];
}
//Place video and dia elements
function PlaceVideoAndDia()
{
    var dia = GetElement('dia');
    var video = GetElement('video');
    
    dia.style.top = DIA_POS_Y + "px";
    dia.style.left = DIA_POS_X + "px";
    
    video.style.top = VIDEO_POS_Y + "px";
    video.style.left = VIDEO_POS_X + "px";
}
//Place the bottom div
function PlaceBottom()
{
    diaSize = GetSizeFromId('dia');
    diaPosition = GetPositionFromId('dia');
    videoSize = GetSizeFromId('video');
    videoPosition = GetPositionFromId('video');
    dragVideoSize = GetSizeFromId('dragVideo');
    dragDiaSize = GetSizeFromId('dragDia');
    
    bot = GetElement('bottom');
    bot.style.top = diaSize[1] >= videoSize[1]? (GetPositionFromId('dia')[1] + diaSize[1] + HANDLE_OFFSET + dragDiaSize[1] + BACK_OFFSET) + "px" : (GetPositionFromId('video')[1] + videoSize[1] + HANDLE_OFFSET + dragVideoSize[1] + BACK_OFFSET) + "px";
    bot.style.width = diaPosition[0] > videoPosition[0] ? (diaPosition[0] + diaSize[0]) + "px" : (videoPosition[0] + videoSize[0]) + "px";
    
    subTitle = GetElement('subtitle');
    subTitle.style.width = bot.style.width;
}
//affect original sizes to video and dia
function SetOriginalSizeToVideoAndDia()
{
    var dia = GetElement('dia');
    var video = GetElement('video');
    
    dia.style.width = DEFAULT_DIA_WIDTH + "px";
    dia.style.height = GetHeightFromRatio(DEFAULT_DIA_WIDTH,DIA_RATIO) + "px";
    
    video.style.width = DEFAULT_VIDEO_WIDTH + "px";
    video.style.height = GetHeightFromRatio(DEFAULT_VIDEO_WIDTH,VIDEO_RATIO) + "px";
}
//Place handles
function PlaceHandle()
{
    var hDia = GetElement('dragDia');
    var hVideo = GetElement('dragVideo');
    
    hDiaSize = GetSizeFromId('dragDia');
    hVideoSize = GetSizeFromId('dragVideo');
    
    diaSize = GetSizeFromId('dia');
    videoSize = GetSizeFromId('video');
    
    diaPosition = GetPositionFromId('dia');
    videoPosition = GetPositionFromId('video');
    
    //Place the video handle at the right bottom of the video
    hVideo.style.left = (videoPosition[0] + videoSize[0] - hVideoSize[0]) + "px"; 
    hVideo.style.top = (videoPosition[1] + videoSize[1] + HANDLE_OFFSET) + "px";
    
    //Place the dia handle at the left bottom of the video
    hDia.style.left = (diaPosition[0]) + "px"; 
    hDia.style.top = (diaPosition[1] + diaSize[1] + HANDLE_OFFSET) + "px";
    
    var imgResizeVideo = GetElement('resizeVideo');
    var imgResizeDia = GetElement('resizeDia');
    imgResizeVideo.releaseCapture();
    imgResizeDia.releaseCapture();
    
}
//***************Util functions*********************************************************
//return a string where the search term was replaced by the replace term in the original string
function myReplace(original, search, replace)
{
    var reg = new RegExp("(" + search + ")", "g");
    return original.replace(reg,replace);
}
//Test the browser type
function IsIE()
{
    return document.all?true:false;
}
//return height from width and ratio
function GetHeightFromRatio(height, ratio)
{
    return height * (1/ratio);
}
function GetElement(id)
{
    return document.getElementById(id);
}
//******************Drag functions**********************************************************
//******************Drag global variables***************************************************
var currentX = 0;
var currentY = 0;
var btnClickX = 0;
var btnClickY = 0;
var dragDia = false;
var dragVideo = false;
//******************Events******************************************************************
if (!IsIE()) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
if (!IsIE()) document.captureEvents(Event.MOUSEUP)
document.onmouseup = mouseUp;

function getMouseXY(e) {
  if (IsIE()) { 
    currentX = event.clientX;
    currentY = event.clientY;
  } else {  
    currentX = e.pageX;
    currentY = e.pageY;
  }  
  // catch possible negative values in NS4
  if (currentX < 0){currentX = 0;}
  if (currentY < 0){currentY = 0;}  
  
  if(dragVideo)DragingVideo();
  else if(dragDia)DragingDia();
  
  return true;
}

function mouseUp(e)
{
    dragDia = false;
    dragVideo = false;
    
}
//*******************Functions*************************************************************
//Starting to drag the video field
function BeginDragVideo()
{
    dragVideo = true;
    
    btnClickX = currentX;
    btnClickY = currentY;
    
    var dia = GetElement('dia');
    var video = GetElement('video');
    
    dia.style.zIndex = Z_INDEX_STAY;
    video.style.zIndex = Z_INDEX_DRAG;
}
//Starting to drag the dia field
function BeginDragDia()
{
    dragDia = true;
    
    btnClickX = currentX;
    btnClickY = currentY;
    
    var dia = GetElement('dia');
    var video = GetElement('video');
    
    dia.style.zIndex = Z_INDEX_DRAG;
    video.style.zIndex = Z_INDEX_STAY;
}
//Draging video
function DragingVideo()
{
    var offsetH = getOffset(true);
    
    var video = GetElement('video');
    
    var width = Number(myReplace(video.style.width,'px','')) + offsetH;
    
    video.style.width = width + "px";
    video.style.height = GetHeightFromRatio(width,VIDEO_RATIO) + "px";
    
    PlaceHandle();
    PlaceBottom();
    
    btnClickX = currentX;
    btnClickY = currentY;
}
//Draging dia
function DragingDia()
{
    var offsetH = getOffset(false);
    
    var dia = GetElement('dia');
    
    var width = Number(myReplace(dia.style.width,'px','')) - offsetH;
    
    dia.style.width = width + "px";
    dia.style.height = GetHeightFromRatio(width,DIA_RATIO) + "px";
    
    var left = Number(myReplace(dia.style.left,'px','')) + offsetH;
    dia.style.left = left + 'px';
    
    PlaceHandle();
    PlaceBottom();
    
    btnClickX = currentX;
    btnClickY = currentY;
}
//get the offset
function getOffset(video)
{
    var offsetH = currentX - btnClickX;
    var offsetV = currentY - btnClickY;
    
    if(video) return Math.abs(offsetH) >= Math.abs(offsetV) ? offsetH : offsetV;
    else return Math.abs(offsetH) >= Math.abs(offsetV) ? offsetH : (offsetV * -1);
}
//called when the user click on the resize to original size button
function OriginalSize()
{
    LoadPage();
}
//display comments...
function outgoing_DoFSCommand(commande, args) {
	if(commande == 'subtitle')
	{
		document.getElementById(commande).innerHTML = args;
	}
}