Object.extend(Element, {
	getWidth: function(element) {
	   	element = $(element);
	   	return element.offsetWidth;
	},
	setWidth: function(element,w) {
	   	element = $(element);
    	element.style.width = w + "px";
	},
	setWidthPrecent: function(element,w) {
	   	element = $(element);
    	element.style.width = w + "%";
	},
	setHeight: function(element,h) {
   		element = $(element);
    	element.style.height = h +"px";
	},
	setTop: function(element,t) {
	   	element = $(element);
    	element.style.top = t +"px";
	},
	setLeft: function(element,t) {
	   	element = $(element);
    	element.style.left = t +"px";
	},
	setSrc: function(element,src) {
    	element = $(element);
    	element.src = src;
	},
	setHref: function(element,href) {
    	element = $(element);
    	element.href = href;
	},
	setInnerHTML: function(element,content) {
		element = $(element);
		element.innerHTML = content;
	}
});

function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop) {
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll)
	return arrayPageScroll;

}

function getPageSize(){

	var xScroll, yScroll;

	if (window.innerHeight && window.scrollMaxY) {
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) {
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else {
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}

	var windowWidth, windowHeight;
	if (self.innerHeight) {
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) {
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}

	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else {
		pageHeight = yScroll;
	}

	if(xScroll < windowWidth){
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
	return arrayPageSize;

}

function initVizualDock() {
    var objBody = document.getElementsByTagName("body").item(0);

    var objOverlay = document.createElement("div");
    objOverlay.setAttribute('id','vizualdock_overlay');
    objOverlay.setAttribute('align','center');
    objOverlay.style.display = 'none';
    objOverlay.onclick = function() { VizualDock_finish(); return false; }
    objBody.appendChild(objOverlay);

    var objLayerLoading = document.createElement("div");
    objLayerLoading.setAttribute('id','vizualdock_layer_loading');
    objLayerLoading.setAttribute('align','center');
    objLayerLoading.style.display = 'none';
    objLayerLoading.onclick = function() { VizualDock_finish(); return false; }
    objBody.appendChild(objLayerLoading);

    var objLayerContent = document.createElement("div");
    objLayerContent.setAttribute('id','vizualdock_layer_content');
    objLayerContent.setAttribute('align','center');
    objLayerContent.style.display = 'none';
    objLayerContent.onclick = function() { VizualDock_finish(); return false; }
    objBody.appendChild(objLayerContent);

    var objLayerLoadingFix = document.createElement("div");
    objLayerLoadingFix.setAttribute('id','vizualdock_layer_loading_fix');
    objLayerLoadingFix.style.display = 'block';
    objLayerLoading.appendChild(objLayerLoadingFix);

    var objLayerContentFix = document.createElement("div");
    objLayerContentFix.setAttribute('id','vizualdock_layer_content_fix');
    objLayerContentFix.style.display = 'block';
    objLayerContent.appendChild(objLayerContentFix);

    var objLoadingContainer = document.createElement("div");
    objLoadingContainer.setAttribute('id','vizualdock_loading');
    objLoadingContainer.style.display = 'none';
    objLayerLoadingFix.appendChild(objLoadingContainer);

    var objLoadingContainerBox = document.createElement("div");
    objLoadingContainerBox.setAttribute('id','vizualdock_loading_content');
    objLoadingContainerBox.onclick = function() { VizualDock_finish(); return false; }
    objLoadingContainer.appendChild(objLoadingContainerBox);

    var objLoadingTable = document.createElement("table");
    objLoadingTable.setAttribute('border','0');
    objLoadingTable.setAttribute('cellPadding','0px');
    objLoadingTable.setAttribute('cellSpacing','0px');
    objLoadingTable.setAttribute('width','92');
    objLoadingTable.setAttribute('height','50');
    objLoadingContainerBox.appendChild(objLoadingTable);

    var objLoadingTableBody = document.createElement("tbody");
    objLoadingTable.appendChild(objLoadingTableBody);

    var objLoadingTableTR = document.createElement("tr");
    objLoadingTableBody.appendChild(objLoadingTableTR);

    var objLoadingTableTD01 = document.createElement("td");
    objLoadingTableTD01.setAttribute('width','50');
    objLoadingTableTD01.setAttribute('height','50');
    objLoadingTableTD01.setAttribute('align','center');
    objLoadingTableTD01.setAttribute('id', 'vizualdock_loading_content_table');
    objLoadingTableTR.appendChild(objLoadingTableTD01);

    var objLoadingTableTD02 = document.createElement("td");
    objLoadingTableTD02.setAttribute('width','42');
    objLoadingTableTD02.setAttribute('height','50');
    objLoadingTableTD02.setAttribute('align','left');
    objLoadingTableTD02.setAttribute('id', 'vizualdock_loading_content_table');
    objLoadingTableTR.appendChild(objLoadingTableTD02);

    var objLoadingImage = document.createElement("img");
    objLoadingImage.setAttribute('width','32');
    objLoadingImage.setAttribute('height','32');
    objLoadingImage.setAttribute('src','/@img/vizualdock/loading.gif');
    objLoadingImage.onclick = function() { VizualDock_finish(); return false; }
    objLoadingTableTD01.appendChild(objLoadingImage);

    var objLoadingTextBox = document.createElement("div");
    objLoadingTextBox.onclick = function() { VizualDock_finish(); return false; }
    objLoadingTextBox.innerHTML = "Töltés"
    objLoadingTableTD02.appendChild(objLoadingTextBox);

    var objContentContainer = document.createElement("div");
    objContentContainer.setAttribute('id','vizualdock_container');
    objContentContainer.style.display = 'none';
    objLayerContentFix.appendChild(objContentContainer);

    var objContentTable = document.createElement("table");
    objContentTable.setAttribute('border','0');
    objContentTable.setAttribute('cellPadding','0px');
    objContentTable.setAttribute('cellSpacing','0px');
    objContentTable.setAttribute('width','1');
    objContentTable.setAttribute('height','1');
    objContentContainer.appendChild(objContentTable);

    var objContentTableBody = document.createElement("tbody");
    objContentTable.appendChild(objContentTableBody);

    var objContentTableTR01 = document.createElement("tr");
    objContentTableBody.appendChild(objContentTableTR01);

    var objContentTableTR02 = document.createElement("tr");
    objContentTableBody.appendChild(objContentTableTR02);

    var objContentTableTR03 = document.createElement("tr");
    objContentTableBody.appendChild(objContentTableTR03);

    var objContentTableTD01 = document.createElement("td");
    objContentTableTD01.setAttribute('width','10');
    objContentTableTD01.setAttribute('height','10');
    objContentTableTR01.appendChild(objContentTableTD01);

    var objContentTableTD02 = document.createElement("td");
    objContentTableTD02.style.backgroundColor = "#ffffff";
    objContentTableTD02.setAttribute('height','10');
    objContentTableTR01.appendChild(objContentTableTD02);

    var objContentTableTD03 = document.createElement("td");
    objContentTableTD03.setAttribute('width','10');
    objContentTableTD03.setAttribute('height','10');
    objContentTableTR01.appendChild(objContentTableTD03);

    var objContentTableTD04 = document.createElement("td");
    objContentTableTD04.style.backgroundColor = "#ffffff";
    objContentTableTD04.setAttribute('width','10');
    objContentTableTR02.appendChild(objContentTableTD04);

    var objContentTableTD05 = document.createElement("td");
    objContentTableTD05.style.backgroundColor = "#ffffff";
    objContentTableTR02.appendChild(objContentTableTD05);

    var objContentTableTD06 = document.createElement("td");
    objContentTableTD06.style.backgroundColor = "#ffffff";
    objContentTableTD06.setAttribute('width','10');
    objContentTableTR02.appendChild(objContentTableTD06);

    var objContentTableTD07 = document.createElement("td");
    objContentTableTD07.setAttribute('width','10');
    objContentTableTD07.setAttribute('height','10');
    objContentTableTR03.appendChild(objContentTableTD07);

    var objContentTableTD08 = document.createElement("td");
    objContentTableTD08.style.backgroundColor = "#ffffff";
    objContentTableTD08.setAttribute('height','10');
    objContentTableTR03.appendChild(objContentTableTD08);

    var objContentTableTD09 = document.createElement("td");
    objContentTableTD09.setAttribute('width','10');
    objContentTableTD09.setAttribute('height','10');
    objContentTableTR03.appendChild(objContentTableTD09);

    var objContentCorner01 = document.createElement("img");
    objContentCorner01.setAttribute('width','10');
    objContentCorner01.setAttribute('height','10');
    objContentCorner01.setAttribute('src','/@img/vizualdock/corner01.png');
    objContentTableTD01.appendChild(objContentCorner01);

    var objContentCorner02 = document.createElement("img");
    objContentCorner02.setAttribute('width','10');
    objContentCorner02.setAttribute('height','10');
    objContentCorner02.setAttribute('src','/@img/vizualdock/corner02.png');
    objContentTableTD03.appendChild(objContentCorner02);

    var objContentCorner03 = document.createElement("img");
    objContentCorner03.setAttribute('width','10');
    objContentCorner03.setAttribute('height','10');
    objContentCorner03.setAttribute('src','/@img/vizualdock/corner03.png');
    objContentTableTD07.appendChild(objContentCorner03);

    var objContentCorner04 = document.createElement("img");
    objContentCorner04.setAttribute('width','10');
    objContentCorner04.setAttribute('height','10');
    objContentCorner04.setAttribute('src','/@img/vizualdock/corner04.png');
    objContentTableTD09.appendChild(objContentCorner04);

    var objContentImage = document.createElement("img");
    objContentImage.setAttribute('id','vizualdock_img');
    objContentImage.onclick = function() { VizualDock_finish(); return false; }
    objContentTableTD05.appendChild(objContentImage);
}

function doResize() {
    //var arrayPageSize = getPageSize();
    (document.body.scrollWidth > 970) ? Element.setWidthPrecent('vizualdock_overlay', 100) : Element.setWidth('vizualdock_overlay', document.body.scrollWidth);

    return
    //alert(document.body.scrollWidth);
    //alert(arrayPageSize[0] + " / " + arrayPageSize[1] + " / " + arrayPageSize[2] + " / " + arrayPageSize[3])
    alert(document.body.scrollWidth)
    return

  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
  }
  window.alert( 'Width = ' + myWidth );
  window.alert( 'Height = ' + myHeight );

  getScrollXY()


}

function getScrollXY() {
  var scrOfX = 0, scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
  } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
  } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
  }
  alert(scrOfX + " / " + scrOfY);
}

function VizualDock(img, width, height) {
    var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

    Element.setHeight('vizualdock_overlay', arrayPageSize[1]);
    Element.setHeight('vizualdock_layer_loading', arrayPageSize[1]);
    Element.setHeight('vizualdock_layer_content', arrayPageSize[1]);

    Element.setHeight('vizualdock_layer_loading_fix', arrayPageSize[1]);
    Element.setHeight('vizualdock_layer_content_fix', arrayPageSize[1]);

    Element.setTop('vizualdock_loading', arrayPageScroll[1] + ((arrayPageSize[3] - 50)/ 2));
    Element.setLeft('vizualdock_loading', (970 - 92) / 2);

    imgPreloader = new Image();

    enableImage = true;

    new Effect.Appear('vizualdock_overlay', { duration: 0.1, from: 0.0, to: 0.9,
	    afterFinish: function() {
	        Element.show('vizualdock_layer_loading');
            new Effect.Appear('vizualdock_loading', { duration: 0.3, from: 0.0, to: 1.0,
                afterFinish: function() {

                    imgPreloader.onload = function() {
                        if (enableImage) {
                            Element.hide('vizualdock_loading');
                            Element.hide('vizualdock_layer_loading');

                            Element.setSrc('vizualdock_img', imgPreloader.src);

                            Element.setTop('vizualdock_container', arrayPageScroll[1] + ((arrayPageSize[3] - (height + 20)) / 2));
                            Element.setLeft('vizualdock_container', (970 - (width + 20)) / 2);

                            Element.show('vizualdock_layer_content');
                            new Effect.Appear('vizualdock_container', { duration: 0.2, from: 0.0, to: 1.0 });
                        }
                    }

                    imgPreloader.src = img;

                }
            });
        }
    });
}

function VizualDock_finish() {
    enableImage = false;

    Element.hide('vizualdock_loading');
    Element.hide('vizualdock_layer_loading');

    new Effect.Fade('vizualdock_container', { duration: 0.1,
        afterFinish: function() {
            Element.hide('vizualdock_layer_content');
            new Effect.Fade('vizualdock_overlay', { duration: 0.1});
        }
    });
}