// $Id: nicewindow.js,v 1.10 2007/01/03 14:28:38 kcislo Exp $ // Janmedia Interactive /* ---------------------------------------------------------------------- PRODUCT POPUP IMAGE ---------------------------------------------------------------------- */ var lastSelectedTd = null; var imgSrc = null; function PopupImage(url,width,height,title) { var windowheight = height+40; var windowwidth = width+20; var left = (screen.width - windowwidth)/2; var top = (screen.height - windowheight)/2 - 18; var scrollbars = "no"; if (left<0) { scrollbars = "yes"; left = 32; windowwidth = screen.width - 2*left; } if (top<0) { scrollbars = "yes"; top = 32; windowheight = screen.height - 2*top - 18; top = top - 18; } var num = Math.round(Math.random()*10000000); var str = new String(num); var win = window.open("popup",str,"toolbar=no,location=no,directories=no,"+ "status=no,menubar=no,scrollbars=" + scrollbars + ",resizable=no,"+ "copyhistory=no, width="+windowwidth+",height="+windowheight+",left=" + left + ",top=" + top); win.document.write("\\\\"+title+"\<\/TITLE\>"); win.document.write("\<\/HEAD\>"); win.document.write("\

\

\\ Zamknij »<\/a>

\<\/BODY\><\/HTML\>"); } // default position in 3d var NiceWindowZIndex = 50; var currentNiceWindow = false; function NiceWindow( windowTitle ) { var imageArray = new Array(); // images array var currentImage; // current image var windowId = generateId(new Date); var isMoving = false; var zIndex = 100; var resetPosition = true; /* CONSTRUCTOR */ createWindow(windowTitle, windowId ); /*------------------- PUBLIC METHODS -------------------*/ /*--------------------------------------------------------- addImage params: - image: url ---------------------------------------------------------*/ this.addImage = function(image) { addImage(image); } /*--------------------------------------------------------- showImage params: - event: pass event - image: image URL - image - resetPos: reset window position (optional) - resetMode: 0 - no reset, 1 - stick to cursor, 2 - move window to center (optional) - offsetX/Y: used only if resetPos = 1 and resetMode = 1, distance from cursor (optional) ---------------------------------------------------------*/ this.showImage = function( event, image , resetPos, resetMode, offsetX, offsetY ) { var container = document.getElementById(windowId); if(resetPos || resetPosition) { if(!resetMode || resetMode == 1) { // if offset is undefined, set default values if(!offsetX) { offsetX = 10; } if(!offsetY) { offsetY = 10; } moveWindowToCursor(event, offsetX, offsetY); } else if(resetMode == 2) moveWindowToCenter(); resetPosition = false; } container.style.display = "block"; setImage(image); // create navigation only if there is at least 2 images if(imageArray.length > 1) { container.lastChild.style.display="block"; createNavigation(image); } else container.lastChild.style.display="none"; return false; } /*------------------- PRIVATE METHODS -------------------*/ function generateId(d) { var id = "window" + d.getSeconds() + d.getMilliseconds(); while(document.getElementById(id)) { id += "1"; } return id; } function addImage(image) { for(var i = 0; i < imageArray.length; i++) { if(imageArray[i] == image) return; } imageArray[imageArray.length] = image; } function setImage(image) { addImage(image); var imageDiv = document.getElementById(windowId).getElementsByTagName("div").item(1); imageDiv.style.backgroundColor = ""; imageDiv.style.backgroundPosition = "center"; imageDiv.style.backgroundRepeat = "no-repeat"; imageDiv.style.backgroundImage = "url('/converter?heightMax=" + (imageDiv.offsetHeight-20) + "&widthMax=" + (imageDiv.offsetWidth-20) + "&img="+ image +"')"; } function setImageByNo(no) { setImage(imageArray[no]); } function createWindow(windowTitle, windowId) { var container = document.createElement("div"); container.onmousedown = getWindowUp; container.onmouseup = dropWindowDown; container.onselectstart = new Function("return false"); container.setAttribute("id", windowId ); container.className = "nice_window"; var tmp = document.createElement("iframe"); tmp.setAttribute("frameBorder","0") container.appendChild(tmp); var tmp = document.createElement("h3"); tmp.innerHTML = windowTitle; container.appendChild(tmp); var tmp2 = document.createElement("span"); tmp2.innerHTML = "Zamknij"; tmp = document.createElement("p"); tmp.appendChild(tmp2); tmp.title = "Zamknij"; tmp.onmousemove = dontMoveWindow; tmp.onclick = hideWindow; container.appendChild(tmp); tmp2 = document.createElement("div"); tmp2.className = "nice_window_src"; tmp = document.createElement("div"); tmp.className = "nice_window_src_bg"; tmp.appendChild(tmp2); container.appendChild(tmp); tmp = document.createElement("div"); tmp.className = "nice_window_browse"; tmp.onmousemove = dontMoveWindow; container.appendChild(tmp); if(!document.getElementById("nicewindowparent")) return; document.getElementById("nicewindowparent").appendChild(container); // moving window document.getElementsByTagName("body").item(0).onmousemove = followWindowByCursor; return container; } // container event methods function dontMoveWindow(e) { e = e||event; e.cancelBubble = true; currentNiceWindow = false; return false; } function hideWindow() { document.getElementById(windowId).style.display = "none"; } // set window position function moveWindowToCursor(e, offsetX, offsetY) { containerStyle = document.getElementById(windowId).style; var mx = 0; var my = 0; //var algor = ''; if (e) { if (e.pageX || e.pageY) { mx = e.pageX; my = e.pageY + getScrollY(); } else if (e.clientX || e.clientY) { mx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft ; my = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } } //debug(e); containerStyle.top = ( my + offsetY ) + "px"; containerStyle.left = ( mx + offsetX ) + "px"; } function debug(obj) { var str = ''; for(var i in obj) str += i + " =>" + obj[i]+ "
"; document.write(str); } function moveWindowToCenter() { var container = document.getElementById(windowId); container.style.top = ( ( getScrollY() + (getScreenSize("height") / 2) ) - 200 ) + "px"; container.style.left = ( (getScreenSize("width") / 2) - 250 ) + "px"; } function getScreenSize(mode) { if (self.innerHeight) // all except Explorer { if(mode == 'width') return self.innerWidth; else return self.innerHeight; } else if (document.body) // other Explorers { if(mode == 'width') return ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ); else return document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight; } return 0; } // not working in IE !!! function getScrollY() { return parseInt( window.pageYOffset ? window.pageYOffset : ( document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) - 20 ); } // navigation function createNavigation(actualImage) { var browseDiv = document.getElementById(windowId).getElementsByTagName("div").item(2); // clear navi clearElement(browseDiv); if(imageArray.length < 5) { for(var i = 0; i < imageArray.length; i++) { var currentImage = imageArray[i]; var tmp = document.createElement("div"); tmp.className = "navi_img"; if(currentImage == actualImage) { tmp.className += " current" } tmp.img = currentImage; tmp.style.backgroundImage = "url('/converter?img="+currentImage+"&heightMax=20&widthMax=30')"; tmp.style.backgroundPosition = "center"; tmp.style.backgroundRepeat = "no-repeat"; tmp.onclick = setImageByEvent; // !! hmm :) tmp.onmouseover = function() { this.className += " hover"; } tmp.onmouseout = function() { this.className = this.className.replace(" hover",""); } browseDiv.appendChild(tmp); } } else { var tmp = document.createElement("div"); tmp.className = "navi_link"; if(imageArray[0] == actualImage) tmp.className += " disabled"; tmp.innerHTML = "poprzedni"; tmp.onclick = previousImage; tmp.onmouseover = function() { this.className += " hover"; } tmp.onmouseout = function() { this.className = this.className.replace(" hover",""); } browseDiv.appendChild(tmp); tmp = document.createElement("div"); tmp.className = "navi_link"; if(imageArray[imageArray.length - 1] == actualImage) tmp.className += " disabled"; tmp.innerHTML = "następny"; tmp.onclick = nextImage; tmp.onmouseover = function() { this.className += " hover"; } tmp.onmouseout = function() { this.className = this.className.replace(" hover",""); } browseDiv.appendChild(tmp); } setImageArrayIndex(actualImage); } function clearElement(el) { while( el.childNodes.length != 0 ) { el.removeChild ( el.childNodes.item(0) ); } } function setImageByEvent() { setImage(this.img); setImageArrayIndex(this.img); var browseImages = document.getElementById(windowId).getElementsByTagName("div").item(2).getElementsByTagName("div"); for(var i = 0; i < browseImages.length; i++) { browseImages[i].className = browseImages[i].className.replace(" current", ""); } this.className += " current"; } function setImageArrayIndex(image) { for(var i = 0; i < imageArray.length; i++) { if(imageArray[i] == image) { currentImage = i; break; } } } function previousImage() { if(currentImage == 0) return; var tmp = document.getElementById(windowId).getElementsByTagName("div").item(2); tmp.getElementsByTagName("div").item(1).className = tmp.getElementsByTagName("div").item(1).className.replace("disabled", ""); currentImage--; setImageByNo(currentImage); if(currentImage == 0) { tmp.getElementsByTagName("div").item(0).className += " disabled"; } } function nextImage() { if(currentImage == imageArray.length - 1) return; var tmp = document.getElementById(windowId).getElementsByTagName("div").item(2); tmp.getElementsByTagName("div").item(0).className = tmp.getElementsByTagName("div").item(0).className.replace(" disabled", ""); currentImage++; setImageByNo(currentImage); if(currentImage == imageArray.length - 1) { tmp.getElementsByTagName("div").item(1).className += " disabled"; } } // move window function getWindowUp(e) { currentNiceWindow = windowId; e = e||event; var container = document.getElementById(windowId); container.style.position = "absolute"; // alert(e.offsetY + container.offsetTop); container.cursorX = e.pageX ? e.pageX - container.offsetLeft : e.offsetX; container.cursorY = e.pageY ? e.pageY - container.offsetTop : e.offsetY; container.style.zIndex = NiceWindowZIndex++; setTimeout(function(){ if(currentNiceWindow) setOpacity(container,50) },100); } function dropWindowDown() { currentNiceWindow = false; var container = document.getElementById(windowId); setOpacity(container,100); } function addEvent(obj, evType, fn) { if(obj.addEventListener) { obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent) { var r = obj.attachEvent('on'+evType, fn); return r; } else { return false; } } function setOpacity(el, o) { el.style.opacity = o/100; el.style.filter = "alpha(opacity="+o+")"; } } // NiceWindow function followWindowByCursor(e) { e = e||event; if(currentNiceWindow != false) { var container = document.getElementById(currentNiceWindow); var leftOffset = (e.pageX ? e.pageX : e.clientX+(document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft)) - container.cursorX; var topOffset = (e.pageY ? e.pageY : e.clientY+(document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)) - container.cursorY; if(leftOffset >= 0) { container.style.left = leftOffset + "px"; } if(topOffset >= 0) { container.style.top = topOffset + "px"; } } }