|
Server : Apache/2.4.43 (Win64) OpenSSL/1.1.1g PHP/7.4.6 System : Windows NT USER-PC 6.1 build 7601 (Windows 7 Professional Edition Service Pack 1) AMD64 User : User ( 0) PHP Version : 7.4.6 Disable Function : NONE Directory : C:/Program Files/CyberLink/PowerDirector/skin/1024x768/MagicMotion/ |
<html>
<script type="text/javascript">
var MotionStyleArray = new Array(22);
MotionStyleArray[0] = "MM_Path00.gif";
MotionStyleArray[1] = "MM_Path01.gif";
MotionStyleArray[2] = "MM_Path02.gif";
MotionStyleArray[3] = "MM_Path03.gif";
MotionStyleArray[4] = "MM_Path04.gif";
MotionStyleArray[5] = "MM_Path05.gif";
MotionStyleArray[6] = "MM_Path06.gif";
MotionStyleArray[7] = "MM_Path07.gif";
MotionStyleArray[8] = "MM_Path08.gif";
MotionStyleArray[9] = "MM_Path09.gif";
MotionStyleArray[10] = "MM_Path10.gif";
MotionStyleArray[11] = "MM_Path11.gif";
MotionStyleArray[12] = "MM_Path12.gif";
MotionStyleArray[13] = "MM_Path13.gif";
MotionStyleArray[14] = "MM_Path14.gif";
MotionStyleArray[15] = "MM_Path15.gif";
MotionStyleArray[16] = "MM_Path16.gif";
MotionStyleArray[17] = "MM_Path17.gif";
MotionStyleArray[18] = "MM_Path18.gif";
MotionStyleArray[19] = "MM_Path19.gif";
MotionStyleArray[20] = "MM_Path20.gif";
MotionStyleArray[21] = "MM_Path_user.gif";
var m_nTotalStyle = 22;
var StyleNameArray = new Array(22);
var StyleNameToolTipsArray = new Array(22);
var m_nWindowWidth = 0;
var m_nWindowHeight = 0;
var m_nStyleInWidth = 0;
var m_nVisableStartY = 0;
var m_nCellSpacing = 0.1;
var m_strSelectedDiv = '-1';
var m_ScrollHeight = 0;
var m_strFontName = 'arial';
var m_bHideUserDefineStyle = false;
function SetMotionStyleTootips(strStyleNum, strMotionStyle)
{
var nStyleNum = parseInt(strStyleNum);
StyleNameToolTipsArray[nStyleNum] = strMotionStyle;
}
function SetMotionStyleString(strStyleNum, strMotionStyle)
{
var nStyleNum = parseInt(strStyleNum);
StyleNameArray[nStyleNum] = strMotionStyle;
}
function SetFont(strFontName)
{
m_strFontName = strFontName;
}
function InitMotionStyleTable()
{
updateTableWH();
CreateMotionStyleTable();
//setTimeout("SetScrollHeight();",5000);
SetScrollHeight();
// Reset motion Style when resize
if(m_strSelectedDiv != '-1')
{
var selectedDiv = document.getElementById(m_strSelectedDiv);
selectedDiv.style.backgroundImage = "url('Mask_Grid_4_3_Selected.png')";
}
}
function updateTableWH()
{
m_nWindowHeight = document.body.clientHeight;
var height = m_nWindowHeight;
m_nWindowWidth = document.body.clientWidth;
var width = m_nWindowWidth;
for(var i=1; i<23; i++)
{
var CurStyleWidth = (i*97)+((i+1)*5);
if(m_nWindowWidth<CurStyleWidth)
{
m_nStyleInWidth = i-1;
var nTotalSpacing = m_nWindowWidth - (m_nStyleInWidth * 97);
m_nCellSpacing = (nTotalSpacing/(m_nStyleInWidth + 1))-5;
break;
}
}
}
function ScrollBarScroll(strNewStartY)
{
var nNewStartY = parseInt(strNewStartY);
document.body.scrollTop = nNewStartY;
}
function onClick(this_style)
{
if(m_strSelectedDiv != this_style.id )
{
if(m_strSelectedDiv != "-1")
{
var selectedDiv = document.getElementById(m_strSelectedDiv);
//selectedDiv.style.backgroundColor = '';
selectedDiv.style.backgroundImage = '';
}
}
m_strSelectedDiv = this_style.id;
//this_style.style.backgroundColor = '#fcfc00';
this_style.style.backgroundImage = "url('Mask_Grid_4_3_Selected.png')";
var ref = "SetStyle:"+ this_style.id;
location = ref;
}
function SetScrollPos()
{
// Reset scrollbar position to current selection item
var offsetTop = 0;
if(m_strSelectedDiv != "-1")
{
var CurrentDiv = document.getElementById(m_strSelectedDiv);
var offsetTop = CurrentDiv.parentNode.offsetTop;
}
var ref = "SetScrollPos:"+ offsetTop;
location = ref;
document.body.scrollTop = offsetTop;
}
function SetMotionStyle(strMotionStyle)
{
if(m_strSelectedDiv != strMotionStyle)
{
if(m_strSelectedDiv != "-1")
{
var previousDiv = document.getElementById(m_strSelectedDiv);
previousDiv.style.backgroundImage = '';
}
m_strSelectedDiv = strMotionStyle;
if(strMotionStyle != "-1")
{
var CurrentDiv = document.getElementById(m_strSelectedDiv);
CurrentDiv.style.backgroundImage = "url('Mask_Grid_4_3_Selected.png')";
}
}
}
function HideMotionStyle(strMotionStyle)
{
if(m_strSelectedDiv != "-1")
{
var previousDiv = document.getElementById(m_strSelectedDiv);
previousDiv.style.backgroundImage = '';
m_strSelectedDiv = -1;
}
var nStyleID = parseInt(strMotionStyle);
if(nStyleID < m_nTotalStyle)
{
var CurrentDiv = document.getElementById(strMotionStyle);
CurrentDiv.style.display = "none";
}
if(StyleNameToolTipsArray[nStyleID]=="User Defined")
HideUserDefineStyle();
}
function SetAlwaysRandom()
{
// only append random style into table
m_nTotalStyle = 1;
}
function HideUserDefineStyle()
{
m_bHideUserDefineStyle = true;
}
function IsMotionStyleSelected()
{
if(m_strSelectedDiv == '-1')
{
var ref = "IsMotionStyleSelectedCB:"+ "0";
location = ref;
}
else
{
var ref = "IsMotionStyleSelectedCB:"+ "1";
location = ref;
}
}
function SetScrollHeight()
{
if(m_ScrollHeight != document.body.scrollHeight)
{
m_ScrollHeight = document.body.scrollHeight;
var ref = "SetScrollHeight:"+ m_ScrollHeight;
location = ref;
setTimeout("SetScrollHeight();",100);
}
}
function CreateMotionStyleTable()
{
//alert(typeof(document.createElement("MotionStyleTable")));
var body = document.getElementById("bkArea");
//body.innerHTML = "<table id='MotionStyleTable'></table>";
body.innerHTML = "<table id='MotionStyleTable' cellspacing='" + m_nCellSpacing.toString() + "'></table>";
//body.innerHTML = "<table id='MotionStyleTable' cellspacing='20'></table>";
var tbl = document.getElementById("MotionStyleTable");
tbl.setAttribute('cellspacing', m_nCellSpacing);
var tblBody = document.createElement("tbody");
var nCount = 0;
var row = document.createElement("tr");
var nCount = 0;
for(var i=0; i<m_nTotalStyle; i++)
{
// Check need to hide User-Define style or not
if(m_bHideUserDefineStyle && MotionStyleArray[i]=="MM_Path_user.gif")
continue;
if(nCount>m_nStyleInWidth-1)
{
nCount = 0;
row = document.createElement("tr");
}
nCount++;
var cell = document.createElement("td");
var div = document.createElement('div');
div.setAttribute('class','maindiv');
//div.setAttribute('width', 90);
//div.setAttribute('height', 100);
div.setAttribute('align','center');
div.setAttribute('id', i.toString());
div.style.backgroundRepeat = "no-repeat";
var divImage = document.createElement('div');
//divImage.setAttribute('width', 80);
//divImage.setAttribute('height', 60);
divImage.setAttribute('align','center');
var image = document.createElement('img');
image.setAttribute('src', MotionStyleArray[i]);
image.setAttribute('id', i.toString());
image.setAttribute('tooltips', StyleNameToolTipsArray[i]);
image.setAttribute('title', StyleNameToolTipsArray[i]);
image.onclick = function()
{
//this.style.cursor= 'hand';
}
image.onmouseover = function()
{
this.style.cursor= 'hand';
}
divImage.appendChild(image);
var divStyleName = document.createElement('div');
var StyleName = document.createElement('font');
StyleName.setAttribute('fac', m_strFontName);
//StyleName.setAttribute('size', '2');
StyleName.style.fontSize="12px";
StyleName.setAttribute('color', '#FFFFFF');
var textNode = document.createTextNode(StyleNameArray[i]);
StyleName.appendChild(textNode);
divStyleName.appendChild(StyleName);
div.appendChild(divImage);
div.appendChild(divStyleName);
div.onmouseover = function()
{
if(this.id != m_strSelectedDiv)
{
//this.style.backgroundColor = '#b4b4b4';
//this.style.border="1px solid #FFFFFF";
this.style.backgroundImage = "url('Mask_Grid_4_3_Pressed.png')";
}
}
div.ondragstart = function()
{
return false;
}
div.onmouseout = function()
{
if(this.id != m_strSelectedDiv)
{
//this.style.backgroundColor = '';
this.style.backgroundImage = '';
}
}
div.onclick = function()
{
//this.style.backgroundColor = '#fcfc00';
onClick(this);
}
cell.appendChild(div);
row.appendChild(cell);
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
//alert(typeof(document.MotionStyleTable));
}
</script>
<HEAD>
<STYLE type="text/css">
BODY
{
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
scrollbar-face-color: #303030;
scrollbar-highlight-color: white;
scrollbar-shadow-color: #000000;
scrollbar-3dlight-color: #000000;
scrollbar-arrow-color: white;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
}
div
{
width: 97px;
text-align: center;
padding: 2px;
}
</STYLE>
</HEAD>
<body BACKGROUND="Motion_HtmlCtrl_BK.bmp" id='bkArea' scroll="no" onload = "InitMotionStyleTable()">
<!--font face="Segoe UI">
<form name="myForm">
</form>
<div style="OVERFLOW:hidden" id="resultArea">
</div>
</font-->
<!--table id='MotionStyleTable' cellspacing='20'></table-->
</body>
</html>