var reasonImageArray = new Array( {src: "../images/100Reason/Thumbs/reasons100.jpg", alt: "100 Reasons"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00026.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00027.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00001.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00002.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00003.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00004.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00005.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00006.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00007.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00008.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00009.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00010.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00011.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00012.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00013.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Abuja%20Model%20City_Nigeria/Image00001.jpg", alt: "Abuja Model City, Nigeria"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Galadima_Nigeria/Image0001.jpg", alt: "Galadima, Nigeria"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Aklan_Philippines/Image00001.jpg", alt: "Aklan, Philippines"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Aklan_Philippines/Image00002.jpg", alt: "Aklan, Philippines"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Aklan_Philippines/Image00003.jpg", alt: "Aklan, Philippines"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Al%20Najmi_Iraq/Image00001.jpg", alt: "Al Najmi, Iraq"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Al%20Najmi_Iraq/Image00002.jpg", alt: "Al Najmi, Iraq"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Al%20Najmi_Iraq/Image00003.jpg", alt: "Al Najmi, Iraq"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Altiplano_Bolivia/Image00001.jpg", alt: "Altiplano, Bolivia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ban%20Samkha_Thailand/Image00001.jpg", alt: "Ban Samkha, Thailand"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ban%20Samkha_Thailand/Image00002.jpg", alt: "Ban Samkha, Thailand"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ban%20Samkha_Thailand/Image00003.jpg", alt: "Ban Samkha, Thailand"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ban%20Samkha_Thailand/Image00004.jpg", alt: "Ban Samkha, Thailand"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ban%20Samkha_Thailand/Image00005.jpg", alt: "Ban Samkha, Thailand"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Bangalore_India/Image00001.jpg", alt: "Bangalore, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Bangalore_India/Image00002.jpg", alt: "Bangalore, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Bangalore_India/Image00003.jpg", alt: "Bangalore, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Bangalore_India/Image00004.jpg", alt: "Bangalore, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Bangalore_India/Image00005.jpg", alt: "Bangalore, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00001.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00002.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00003.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00004.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00005.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00006.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00007.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00008.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00009.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00010.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00011.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00012.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00013.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00014.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00015.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00016.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00017.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Batuna_Solomon%20Islands/Image00018.jpg", alt: "Batuna, Solomon Islands"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ceibal_Uruguay/Image00001.jpg", alt: "Ceibal, Uruguay"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ceibal_Uruguay/Image00002.jpg", alt: "Ceibal, Uruguay"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ceibal_Uruguay/Image00003.jpg", alt: "Ceibal, Uruguay"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ceibal_Uruguay/Image00004.jpg", alt: "Ceibal, Uruguay"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Villa-Cardal_Uruguay/Image00001.jpg", alt: "Villa Cardal, Uruguay"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Chincha%20Alta_Peru/Image00001.jpg", alt: "Chincha Alta, Peru"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Chincha%20Alta_Peru/Image00002.jpg", alt: "Chincha Alta, Peru"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Chincha%20Alta_Peru/Image00003.jpg", alt: "Chincha Alta, Peru"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Chincha%20Alta_Peru/Image00004.jpg", alt: "Chincha Alta, Peru"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Chincha%20Alta_Peru/Image00005.jpg", alt: "Chincha Alta, Peru"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Cudinmarca_Colombia/Image00001.jpg", alt: "Cudinmarca, Colombia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Cudinmarca_Colombia/Image00002.jpg", alt: "Cudinmarca, Colombia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Fundaciyn%20Marina%20Orth_Columbia/Image00001.jpg", alt: "Fundaciyn Marina Orth, Columbia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Fundaciyn%20Marina%20Orth_Columbia/Image00002.jpg", alt: "Fundaciyn Marina Orth, Columbia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Fundaciyn%20Marina%20Orth_Columbia/Image00003.jpg", alt: "Fundaciyn Marina Orth, Columbia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Fundaciyn%20Marina%20Orth_Columbia/Image00004.jpg", alt: "Fundaciyn Marina Orth, Columbia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Fundaciyn%20Marina%20Orth_Columbia/Image00005.jpg", alt: "Fundaciyn Marina Orth, Columbia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Fundaciyn%20Marina%20Orth_Columbia/Image00006.jpg", alt: "Fundaciyn Marina Orth, Columbia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Haiti/Image00001.jpg", alt: "Haiti"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Kathmandu_Nepal/Image00001.jpg", alt: "Kathmandu, Nepal"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00001.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00002.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00003.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00004.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00005.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00006.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00007.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00008.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00009.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00010.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00011.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00012.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00013.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00014.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00015.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00016.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00017.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00018.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00019.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00020.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Khairat_India/Image00021.jpg", alt: "Khairat, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Korea/Image00001.jpg", alt: "Korea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Korea/Image00002.jpg", alt: "Korea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Korea/Image00003.jpg", alt: "Korea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Mumbai_India/Image00001.jpg", alt: "Mumbai, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Mumbai_India/Image00002.jpg", alt: "Mumbai, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Mumbai_India/Image00003.jpg", alt: "Mumbai, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Mumbai_India/Image00004.jpg", alt: "Mumbai, India"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00001.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00002.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00003.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00004.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00005.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00006.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00007.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00008.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Papua%20New%20Guinea/Image00009.jpg", alt: "Papua New Guinea"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Rwanda/Image00001.jpg", alt: "Rwanda"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Rwanda/Image00002.jpg", alt: "Rwanda"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Rwanda/Image00003.jpg", alt: "Rwanda"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Rwanda/Image00004.jpg", alt: "Rwanda"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00014.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00015.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00016.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00017.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00018.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00019.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00020.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00021.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00022.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00023.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00024.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00025.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00028.jpg", alt: "Ulaanbaatar, Mongolia"}, {src: "../images/100Reason/Thumbs/OLPC%20images/Ulaanbaatar_Mongolia/Image00029.jpg", alt: "Ulaanbaatar, Mongolia"} ); function AdvancedImageManager() { this.id = null; this.imageRotationBox = null; this.imageTapeBox = null; this.descrBox = null; this.imageArray = null; this.current = 0; this.total = null; this.imagesCount = 0; this.transition = false; // --------------- Images Tape -----------------------// this.imageBoxStringId = ""; this.leftTapeArrow = null; this.rightTapeArrow = null; this.tapeInterval = null; this.tapeWidth = 0; this.firstBox = null; this.firstBoxWidth = 0; this.firstBoxCount = 0; this.secondBox = null; this.secondBoxWidth = 0; this.secondBoxCount = 0; this.thumbWidth = 55; this.thumbSpacing = 4; this.blockWidth = this.thumbWidth + this.thumbSpacing; this.visibleThumbsCount = 0; this.offsetTapePosition = 0; this.tapeShiftValue = 20; // ------------------ Image Rotation ----------------- // this.leftArrow = null; this.leftArrowActive = false; this.rightArrow = null; this.rightArrowActive = false; this.imageArrayOld = null; this.imageBox = null; this.hideArrowsAfterClick = false; this.clicked = false; this.descrBox = null; // ------------------- End Image Rotation ----------- // this.init = function(id, incomeImagesArray) { this.id = id; this.imageRotationBox = $("advancedRotationBox" + this.id); this.imageTapeBox = $("fotoTapeBox" + this.id); this.descrBox = $("fotoDescriptionBox" + this.id); this.imageArray = incomeImagesArray; this.total = this.imageArray.length; this.imageBoxStringId = "imageBox"+this.id; this.bigImageBoxStringId = "bigImage"+this.id; this.initImagesTape(); this.initImageRotation(); //addEvent(window, "onload", this.preloadImages, this); //addEvent(window, "onload", this.preloadImages, this); this.preloadImages(); this.preloadImages(); //allow preload 4 images (2 small and 2 bug) in one time; } this.initImagesTape = function() { this.tapeWidth = this.imageTapeBox.offsetWidth; this.leftTapeArrow = $("fotoTapeLeft" + this.id); this.rightTapeArrow = $("fotoTapeRight" + this.id); this.visibleThumbsCount = Math.ceil(this.tapeWidth/(this.thumbWidth+this.thumbSpacing)); this.offsetTapePosition = Math.ceil(this.tapeWidth/2 - (this.thumbWidth+this.thumbSpacing)/2); this.firstBox = document.createElement("div"); this.secondBox = document.createElement("div"); this.firstBoxCount = Math.floor(this.total/2) + Math.ceil(this.total%2); this.secondBoxCount = Math.floor(this.total/2); this.firstBoxWidth = this.firstBoxCount * this.blockWidth; this.firstBox.style.width = this.firstBoxWidth + "px"; this.secondBoxWidth = this.secondBoxCount * this.blockWidth; this.secondBox.style.width = this.secondBoxWidth + "px"; this.firstBox.setAttribute("relativePosition", "right"); this.secondBox.setAttribute("relativePosition", "left"); this.firstBox.style.position = this.secondBox.style.position = "absolute"; this.firstBox.style.top = this.secondBox.style.top = "0px"; this.firstBox.style.left = this.offsetTapePosition + "px"; this.secondBox.style.left = (this.offsetTapePosition - this.secondBoxWidth) + "px"; this.imageTapeBox.appendChild(this.firstBox); this.imageTapeBox.appendChild(this.secondBox); this.makeTapeImageBoxes(); this.initTapeEvents(); } this.initImageRotation = function() { this.imageBox = this.imageRotationBox; this.leftArrow = $("imageButtonLeft" + this.id); this.rightArrow = $("imageButtonRight" + this.id); if(!this.leftArrow || !this.leftArrow) { alert("Parts of slide show was not Initialized"); return false; } this.hideArrowsAfterClick = true; this.clicked = (this.imageRotationBox.getAttribute("clicked")) ? true : false; //if(descrBoxId) this.descrBox = $(descrBoxId); this.imageArrayOld = this.imageBox.getElementsByTagName("img"); this.initRotationEvents(); } this.getShiftArrayId = function(shiftCount) { var pos = this.current + shiftCount; if(pos >= this.total) { return (pos - this.total); } else if (pos < 0) { return (this.total + pos); } else { return pos; } } this.makeTapeImageBoxes = function() { for(var i=0; i= this.total) return; var id = this.getId(this.imagesCount); var imageSrc = this.imageArray[id].src; var thumbSrc = imageSrc.slice(0, imageSrc.lastIndexOf(".")) + "_thumb" + imageSrc.slice(imageSrc.lastIndexOf("."), imageSrc.length); var bigImageAlt = this.imageArray[id].alt; //var bigImageSrc = thumbSrc.replace("100Reason/Thumbs/", "blog_entries/bloh_enttry_100reaons/"); var bigImageSrc = imageSrc; var thumbImage = document.createElement("img"); thumbImage.src = thumbSrc; var thumbImageBox = $(this.imageBoxStringId+id); thumbImageBox.appendChild(thumbImage); var bigImage = document.createElement("img"); bigImage.src = bigImageSrc; if(bigImageAlt != "") bigImage.alt = bigImageAlt; //bigImage.style.display = (id) ? "none" : "block"; //bigImage.id = "bigImage"+id; //bigImage.setAttribute("boxId", id) if(this.imagesCount < this.imageArray.length - 1) { var imageManagerInstance = this; bigImage.onload = function() { addClass(this.parentNode, "noLoadingBackground") if(imageManagerInstance.current == Number(this.parentNode.getAttribute("boxId"))) { this.parentNode.style.display = "block"; if(this.alt != "") imageManagerInstance.descrBox.innerHTML = this.alt; } imageManagerInstance.preloadImages(); } this.imagesCount++; } var bigImageBox = document.createElement("div"); bigImageBox.style.display = (id) ? "none" : "block"; bigImageBox.id = this.bigImageBoxStringId+id; bigImageBox.setAttribute("boxId", id); if(bigImageAlt != "") bigImageBox.setAttribute("alt", bigImageAlt); bigImageBox.className = "imageBox"; bigImageBox.appendChild(bigImage); this.imageRotationBox.appendChild(bigImageBox); } this.getId = function(count) { var imageDirection = this.getDirectionByCount(count); // left:right; return ((imageDirection) ? this.imageArray.length - (Math.floor(count/2)+1) : count/2); } this.getDirectionByCount = function(count) { return ((count%2)?1:0); // left:right; } this.changeImage = function(newId) { if(this.current == newId) return; removeClass($(this.imageBoxStringId+this.current), "fotoThumbActive"); addClass($(this.imageBoxStringId+newId), "fotoThumbActive"); var curImg = $(this.bigImageBoxStringId + this.current); var nextImg = $(this.bigImageBoxStringId + newId); if(nextImg) { nextImg.style.display = "block"; if(nextImg.childNodes[0].offsetHeight < 364) { nextImg.childNodes[0].style.top = (364/2 - nextImg.childNodes[0].offsetHeight/2) + "px"; } if(nextImg.getAttribute("alt")) this.descrBox.innerHTML = nextImg.getAttribute("alt"); nextImg.style.zIndex = 1; changeOpac(100, nextImg); } if(curImg) { //curImg.style.display = "none"; curImg.style.zIndex = 2; var imageBoxAnim = getAnimationManager().add(curImg); imageBoxAnim.setAction({method: "fadeOut", alpha: 0, duration: 400}); var imageManagerInstance = this; imageBoxAnim.setCallBack(imageManagerInstance.hideImageBox, imageManagerInstance) imageBoxAnim.play(); } this.current = newId; } this.hideImageBox = function(imageBox) { imageBox.style.display = "none"; } /*============================================ Images TAPE functions ============================= */ this.initTapeEvents = function() { var imageManagerInstance = this; this.leftTapeArrow.onmousedown = function() { return imageManagerInstance.startMoveTape("right"); } this.leftTapeArrow.onmouseup = function() { this.blur(); return imageManagerInstance.stopMoveTape(); } this.leftTapeArrow.onclick = function() { return false; } this.leftTapeArrow.onmouseover = function() { imageManagerInstance.checkTapeRight(); var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 50, duration: 300}); arrowButton.play(); } this.leftTapeArrow.onmouseout = function() { imageManagerInstance.stopMoveTape(); var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 0, duration: 300}); arrowButton.play(); } this.rightTapeArrow.onmousedown = function() { return imageManagerInstance.startMoveTape("left"); } this.rightTapeArrow.onmouseup = function() { this.blur(); return imageManagerInstance.stopMoveTape(); } this.rightTapeArrow.onclick = function() { return false; } this.rightTapeArrow.onmouseover = function() { var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 50, duration: 300}); arrowButton.play(); } this.rightTapeArrow.onmouseout = function() { imageManagerInstance.stopMoveTape(); var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 0, duration: 300}); arrowButton.play(); } } this.checkTapeRight = function() { var arrowButton = getAnimationManager().add(this.rightTapeArrow); arrowButton.setAction({method: "fade", alpha: 0, duration: 300}); arrowButton.play(); } this.setActiveImg = function(imageBox) { if(this.transition) return; var id = Number(imageBox.getAttribute("boxId")); //this.manageBoxPosition(); this.changeImage(id); this.completeShift(id); } this.manageBoxPosition = function() { var firstBoxLeftX = parseInt(this.firstBox.style.left); var firstBoxRightX = firstBoxLeftX + this.firstBoxWidth; if(firstBoxLeftX < this.tapeWidth && firstBoxRightX > 0) { var relativePosition = this.firstBox.getAttribute("relativePosition"); var firstBoxMiddleX = firstBoxLeftX + this.firstBoxWidth/2; if(relativePosition == "right" && firstBoxMiddleX < this.offsetTapePosition) { this.firstBox.setAttribute("relativePosition", "left"); this.secondBox.setAttribute("relativePosition", "right"); this.secondBox.style.left = firstBoxRightX + "px"; } else if(relativePosition == "left" && firstBoxMiddleX > this.offsetTapePosition) { this.firstBox.setAttribute("relativePosition", "right"); this.secondBox.setAttribute("relativePosition", "left"); this.secondBox.style.left = (firstBoxLeftX - this.secondBoxWidth) + "px"; } } else { var secondBoxLeftX = parseInt(this.secondBox.style.left); var secondBoxRightX = secondBoxLeftX + this.secondBoxWidth; var relativePosition = this.secondBox.getAttribute("relativePosition"); var secondBoxMiddleX = secondBoxLeftX + this.secondBoxWidth/2; if(relativePosition == "right" && secondBoxMiddleX < this.offsetTapePosition) { this.secondBox.setAttribute("relativePosition", "left"); this.firstBox.setAttribute("relativePosition", "right"); this.firstBox.style.left = secondBoxRightX + "px"; } else if(relativePosition == "left" && secondBoxMiddleX > this.offsetTapePosition) { this.secondBox.setAttribute("relativePosition", "right"); this.firstBox.setAttribute("relativePosition", "left"); this.firstBox.style.left = (secondBoxLeftX - this.firstBoxWidth) + "px"; } } } this.startMoveTape = function(direction) { var shiftDirection = (direction=="left") ? -1 : 1; var imageManagerInstance = this; this.tapeInterval = window.setInterval("imageManager"+imageManagerInstance.id+".moveTape(" + shiftDirection + ")", 40); } this.stopMoveTape = function() { if(this.tapeInterval != null) { clearInterval(this.tapeInterval); this.tapeInterval = null; } } this.moveTape = function(direction) { this.manageBoxPosition(); var firstBoxLeftX = parseInt(this.firstBox.style.left); var firstBoxRightX = firstBoxLeftX + this.firstBoxWidth; if(firstBoxLeftX < this.tapeWidth && firstBoxRightX > 0) { var firstBoxPosX = firstBoxLeftX + this.tapeShiftValue*direction; var firstBoxRelativePos = this.firstBox.getAttribute("relativePosition"); if(firstBoxRelativePos == "right") { var secondBoxPosX = firstBoxPosX - this.secondBoxWidth; } else { var secondBoxPosX = firstBoxPosX + this.firstBoxWidth; } } else { var secondBoxLeftX = parseInt(this.secondBox.style.left); var secondBoxPosX = secondBoxLeftX + this.tapeShiftValue*direction; var secondBoxRelativePos = this.secondBox.getAttribute("relativePosition"); if(secondBoxRelativePos == "right") { var firstBoxPosX = secondBoxPosX - this.firstBoxWidth; } else { var firstBoxPosX = secondBoxPosX + this.secondBoxWidth; } } this.firstBox.style.left = firstBoxPosX + "px"; this.secondBox.style.left = secondBoxPosX + "px"; } this.shiftTapeImages = function(shiftId) { this.completeShift(shiftId); } this.completeShift = function(shiftId) { this.manageBoxPosition(); var nextBox = $(this.imageBoxStringId+shiftId); var offsetPos = nextBox.offsetLeft; if(shiftId < this.firstBoxCount) { var firstBoxPosX = this.offsetTapePosition - offsetPos; var firstBoxRelativePos = this.firstBox.getAttribute("relativePosition"); if(firstBoxRelativePos == "right") { var secondBoxPosX = firstBoxPosX - this.secondBoxWidth; } else { var secondBoxPosX = firstBoxPosX + this.firstBoxWidth; } } else { var secondBoxPosX = this.offsetTapePosition - offsetPos; var secondBoxRelativePos = this.secondBox.getAttribute("relativePosition"); if(secondBoxRelativePos == "right") { var firstBoxPosX = secondBoxPosX - this.firstBoxWidth; } else { var firstBoxPosX = secondBoxPosX + this.secondBoxWidth; } } var firstBoxAnim = getAnimationManager().add(this.firstBox); firstBoxAnim.setAction({method: "moveTo", x: firstBoxPosX, duration: 400}); var imageManagerInstance = this; firstBoxAnim.setCallBack(imageManagerInstance.transitionEnd, imageManagerInstance); var secondBoxAnim = getAnimationManager().add(this.secondBox); secondBoxAnim.setAction({method: "moveTo", x: secondBoxPosX, duration: 400}); this.transition = true; firstBoxAnim.play(); secondBoxAnim.play(); } this.transitionEnd = function() { this.transition = false; } /*============================================ Image Rotation Func ============================= */ this.initRotationEvents = function() { /* Events Init */ var imageManagerInstance = this; this.imageRotationBox.onmouseout = function() { if(imageManagerInstance.hideArrowsAfterClick && !imageManagerInstance.clicked) { if(imageManagerInstance.leftArrowActive == false && imageManagerInstance.rightArrowActive == false) { var arrowButton = getAnimationManager().add(imageManagerInstance.rightArrow); arrowButton.setAction({method: "fade", alpha: 50, duration: 300}); arrowButton.play(); } } } this.leftArrow.onclick = function() { if(imageManagerInstance.hideArrowsAfterClick && !imageManagerInstance.clicked) { imageManagerInstance.clicked = true; imageManagerInstance.imageRotationBox.setAttribute("clicked", true); } this.blur(); return imageManagerInstance.shiftImage("left"); } this.leftArrow.onmouseover = function() { imageManagerInstance.leftArrowActive = true; imageManagerInstance.checkRight(); var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 50, duration: 300}); arrowButton.play(); } this.leftArrow.onmouseout = function() { imageManagerInstance.leftArrowActive = false; var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 0, duration: 300}); arrowButton.play(); } this.rightArrow.onclick = function() { if(imageManagerInstance.hideArrowsAfterClick && !imageManagerInstance.clicked) { imageManagerInstance.clicked = true; imageManagerInstance.imageRotationBox.setAttribute("clicked", true); } this.blur(); return imageManagerInstance.shiftImage("right"); } this.rightArrow.onmouseover = function() { imageManagerInstance.rightArrowActive = true; var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 50, duration: 300}); arrowButton.play(); } this.rightArrow.onmouseout = function() { imageManagerInstance.rightArrowActive = false; if(!imageManagerInstance.hideArrowsAfterClick || (imageManagerInstance.hideArrowsAfterClick && imageManagerInstance.clicked)) { var arrowButton = getAnimationManager().add(this); arrowButton.setAction({method: "fade", alpha: 0, duration: 300}); arrowButton.play(); } } } this.checkRight = function() { var arrowButton = getAnimationManager().add(this.rightArrow); arrowButton.setAction({method: "fade", alpha: 0, duration: 300}); arrowButton.play(); this.rightArrowActive = false; } this.shiftImage = function(direction) { if(this.transition) return false; var shiftDirection = (direction=="left") ? -1 : 1; var maxShift = Math.ceil((this.visibleThumbsCount+2-1)/2); var firstBoxLeftX = parseInt(this.firstBox.style.left); var firstBoxRightX = firstBoxLeftX + this.firstBoxWidth; if(firstBoxLeftX < this.offsetTapePosition && firstBoxRightX > this.offsetTapePosition) { var visiblePosition = firstBoxLeftX - this.offsetTapePosition; var visibleShiftId = Math.ceil(Math.abs(visiblePosition)/this.blockWidth)+shiftDirection; if(visibleShiftId<0) visibleShiftId = this.total - 1; } else { var secondBoxLeftX = parseInt(this.secondBox.style.left); var secondBoxRightX = secondBoxLeftX + this.secondBoxWidth; var visiblePosition = secondBoxLeftX - this.offsetTapePosition; var visibleShiftId = Math.ceil(Math.abs(visiblePosition)/this.blockWidth)+shiftDirection+this.firstBoxCount; if(visibleShiftId > this.total-1) visibleShiftId = 0; } var shiftId = this.getShiftArrayId(shiftDirection); if(Math.abs(visibleShiftId-shiftId)>maxShift) shiftId = visibleShiftId; //this.manageImagesTape(imgShift); this.changeImage(shiftId); this.shiftTapeImages(shiftId); //if(this.descrBox) this.descrBox.innerHTML = imgAlt; return false; } } //var IMAGE_MANAGER = new AdvancedImageManager();