var g_imgCurrent = null;
function ImageFocus(img){
if(g_imgCurrent){
g_imgCurrent.UnFocus();
}
g_imgCurrent = img;
g_imgCurrent.Focus();
}
function ImageContainer(imgElement, __ROOTDIR__){
if(! document.all)return false;
if(Page && Page.Initialized){
setTimeout(function(){ImageContainer(imgElement, __ROOTDIR__);}, 500);
return false;
}
var Dummy = imgElement.parentNode;
var Container = document.createElement("div");
var ImageData = imgElement;
var Grip = document.createElement("div");
var Layer = document.createElement("div");
var ImageContainerGlobalName = "ImageContainer[" + Math.random().toString() + "]";
// グリップの設定
Grip.Show = function(){
Grip.runtimeStyle.visibility = "visible";
Container.runtimeStyle.border = "1px solid #000000";
Container.runtimeStyle.top = (parseInt(Container.currentStyle.top )-1).toString()+"px";;
Container.runtimeStyle.left= (parseInt(Container.currentStyle.left)-1).toString()+"px";;
}
Grip.Hide = function(){
Grip.runtimeStyle.visibility = "hidden";
Container.runtimeStyle.border = "";
Container.runtimeStyle.top = (parseInt(Container.currentStyle.top )+1).toString()+"px";
Container.runtimeStyle.left= (parseInt(Container.currentStyle.left)+1).toString()+"px";
}
Grip.isVisible = function(){
return Grip.currentStyle.visibility == "visible";
}
Grip.Reset = function(){
Grip.runtimeStyle.visibility = "";
Container.runtimeStyle.border = "";
Container.runtimeStyle.top = "";
Container.runtimeStyle.left= "";
Grip.Aller.Reset();
}
// コンテナの設定
// 上からの相対位置で場所を設定する
Container.setPosition = function(x,y){
Container.runtimeStyle.top = y.toString() + "px";
Container.runtimeStyle.left = x.toString() + "px";
}
Container.Reset = function(){
Container.runtimeStyle.top = "";
Container.runtimeStyle.left = "";
}
Container.getX = function(){
return parseInt(Container.currentStyle.left);
}
Container.getY = function(){
return parseInt(Container.currentStyle.top);
}
Container.Focus = function(){
Container.runtimeStyle.zIndex=100;
ImageData.runtimeStyle.zIndex=100;
Grip.runtimeStyle.zIndex=100;
Layer.runtimeStyle.zIndex=100;
}
Container.UnFocus = function(){
Container.runtimeStyle.zIndex=0;
ImageData.runtimeStyle.zIndex=0;
Grip.runtimeStyle.zIndex=0;
Layer.runtimeStyle.zIndex=0;
}
// イメージの設定
ImageData.setPosition = function(x,y){
ImageData.runtimeStyle.top = y.toString() + "px";
ImageData.runtimeStyle.left = x.toString() + "px";
}
ImageData.Reset = function(){
ImageData.runtimeStyle.top = "";
ImageData.runtimeStyle.left = "";
}
// レイヤーの設定
Layer.setSize = function(w,h){
Grip.runtimeStyle.width = w.toString()+"px";
Layer.runtimeStyle.width = w.toString()+"px";
Layer.runtimeStyle.height = h.toString()+"px";
}
Layer.Reset = function(){
Grip.runtimeStyle.width = "";
Layer.runtimeStyle.width = "";
Layer.runtimeStyle.height = "";
}
function AllReset(){
Grip.Reset();
ImageData.Reset();
Layer.Reset();
Container.Reset();
}
// ドラッグでコンテナを動かす動作の開始
{// 外に持ち出す要素を作成/設定
Container.appendChild(Grip);
Container.appendChild(Layer);
Grip.style.height = "20px";
Grip.style.width = Dummy.currentStyle.width;
Grip.style.backgroundColor = "#000080";
// ドラッグで移動
Grip.Mover = new Image;
Grip.appendChild(Grip.Mover);
Grip.Mover.src = __ROOTDIR__ + "/files/imagecontainer/move.png";
Grip.Mover.ondrag = return_false;
Grip.Mover.onmousedown = function(e){
document.body.runtimeStyle.cursor="move";
return registerDragMove(Container,e||event, null, function(e){
document.body.runtimeStyle.cursor = "";
});
}
// クリックでポップアップ
Grip.PopUpper = new Image;
Grip.appendChild(Grip.PopUpper);
Grip.PopUpper.src = __ROOTDIR__ + "/files/imagecontainer/popup.png";
Grip.PopUpper.ondrag = return_false;
Grip.PopUpper.onclick = function(e){
var newwin = window.open( "about:blank", "ImageViewerWindow");
newwin.document.clear();
//newwin.document.writeln('');
//newwin.document.writeln('');
newwin.document.writeln(''/* xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">'*/);
newwin.document.writeln( '');
newwin.document.writeln( '');
newwin.document.writeln( 'ImageViewer');
//newwin.document.writeln( '');
newwin.document.writeln( '');
newwin.document.writeln( '
');
newwin.document.writeln('');
}
// クリックで巨大化
Grip.Aller = new Image;
Grip.appendChild(Grip.Aller);
Grip.Aller.src = __ROOTDIR__ + "/files/imagecontainer/all.png";
Grip.Aller.ondrag = return_false;
Grip.Aller.view_all_function = function(e){
ImageData.setPosition(0,0);
Layer.setSize(parseInt(ImageData.currentStyle.width),parseInt(ImageData.currentStyle.height));
Grip.Aller.src = __ROOTDIR__ + "/files/imagecontainer/reform.png";
Grip.Aller.onclick = Grip.Aller.view_a_part_function;
return true;
}
Grip.Aller.view_a_part_function = function(e){
ImageData.Reset();
Layer.Reset();
Grip.Aller.Reset();
}
Grip.Aller.Reset = function(){
Grip.Aller.src = __ROOTDIR__ + "/files/imagecontainer/all.png";
Grip.Aller.onclick = Grip.Aller.view_all_function;
}
Grip.Aller.onclick = Grip.Aller.view_all_function;
// クリックですべての状態を元に戻す
Grip.Backer = new Image;
Grip.appendChild(Grip.Backer);
Grip.Backer.src = __ROOTDIR__ + "/files/imagecontainer/back.png";
Grip.Backer.ondrag = return_false;
Grip.Backer.onclick = function(e){
AllReset();
return true;
}
// グリップを閉じる
Grip.Closer = new Image;
Grip.appendChild(Grip.Closer);
Grip.Closer.src = __ROOTDIR__ + "/files/imagecontainer/close.png";
Grip.Closer.ondrag = return_false;
Grip.Closer.onclick = function(e){
Grip.Hide();
return true;
}
Layer.style.height = Dummy.currentStyle.height;
Layer.style.width = Dummy.currentStyle.width;
Layer.style.overflow = Dummy.currentStyle.overflow;
Layer.style.position = "relative";
Layer.style.top = "0px";
Layer.style.left= "0px";
Layer.style.backgroundColor = "MintCream";
Container.style.position = "absolute";
Container.style.zIndex = "5";
Container.style.top = (Dummy.getClientRects()[0].top-MainLayer.getClientRects()[0].top-20).toString() + "px";
Container.style.left = (Dummy.getClientRects()[0].left-MainLayer.getClientRects()[0].left).toString() + "px";
Grip.style.visibility = "hidden";
ImageData.style.position = "relative";
ImageData.style.height = ImageData.height + "px";
ImageData.style.width = ImageData.width + "px";
}{// イベントの登録
// イメージレイヤーをダブルクリックすると、グリップの表示の有効/無効を切り替える
Layer.ondblclick = function(e){
if(Grip.isVisible()){
Grip.Hide();
}else{
Grip.Show();
}
return true;
}
Container.onmousedown = function(e){
ImageFocus(Container);
}
{// グリップをマウスダウン→マウスムーブ→マウスアップで、移動する。
Grip.onmousedown = function(e){
registerDragMove(Container,e||event);
}
}{// グリップをダブルクリックで初期位置に戻る
Grip.ondblclick = function(e){
AllReset();
return true;
}
}{// イメージをctrl+MouseDownでドラッグ
ImageData.onmousedown = function(e){
if(event.ctrlKey){
ImageData.ondrag = return_false;
registerDragMove(ImageData,e||event);
}
return true;
}
}
}{// イメージの追加
MainLayer.appendChild(Container);
Layer.appendChild(ImageData);
ImageData.style.top = Math.round((Layer.style.pixelHeight-ImageData.style.pixelHeight)/2).toString() + "px";
ImageData.style.left = Math.round((Layer.style.pixelWidth -ImageData.style.pixelWidth )/2).toString() + "px";
}
/// 指定の位置に動かす。もとあったところからの相対位置で指定
}