/* for Mozilla */
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", imgGallery, false);
}

// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
    imgGallery(); // call the onload handler
}
};
/*@end @*/

if (/WebKit/i.test(navigator.userAgent)) { // sniff
    var _timer = setInterval(function() {
        if (/loaded|complete/.test(document.readyState)) {
            clearInterval(_timer);
            imgGallery(); // call the onload handler
        }
    }, 10);
}

/* for other browsers */
window.onload = imgGallery;

function imgGallery(){
    
    var loadarea = document.getElementById('loadarea');
    var thumbFolder = 'thmb';
    var previewFolder = 'prev';
    var fullFolder = 'full';
    
    var thumbs = getThumbs(loadarea);
    var fullImageViewer = new largeImageBox();
    
    function getThumbs(mainImg){
        var tns = Array();
        var galleryElements = mainImg.parentNode.childNodes;
        for(i=0;i<galleryElements.length;i++){
            if(galleryElements[i].nodeName == 'A'){
                var tn = new thumb(galleryElements[i],i);
                tns.push(tn);
            }
        }
        return tns;
    }
    
    function thumb(element,arrayPosition){
        
        this.position = arrayPosition;
        var position = this.position;
        
        var prev = element.childNodes[0].src.split(thumbFolder).join(previewFolder);
        var full = element.childNodes[0].src.split(thumbFolder).join(fullFolder);
        
        //Create and preload preview image
        var previewImage = new Image();
        previewImage.src = prev;
        previewImage.setAttribute('alt',element.childNodes[0].getAttribute('alt'));
        
        //Create and preload fullsize image
        var fullImage = new Image();
        fullImage.srcText = full;
        fullImage.setAttribute('alt',element.childNodes[0].getAttribute('alt'));
        this.full = fullImage;
        
        element.onmouseover = function(){
            fullImage.src = full;
            var loadareaImage = loadarea.childNodes[0];
            loadarea.removeChild(loadareaImage);
            loadarea.appendChild(previewImage);
        }
        
        element.onclick = function(){
            fullImageViewer.show(fullImage,position);
            return false;
        }
    }
    
    function largeImageBox(){
        
        var current = '';
        this.current = current;
        
        //Create page covering
        var cover = document.createElement('div');
        cover.setAttribute('id','whiteOut');
        if(document.getElementsByTagName('body')[0].offsetHeight < window.innerHeight){
            cover.style.height = window.innerHeight;
        }
        
        //Create popup box
        var popupBox = document.createElement('div');
        this.popupBox = popupBox;
        popupBox.setAttribute('id','popup');
        
        //create image container
        var imageContainer = document.createElement('div');
        imageContainer.className = 'imageContainer';
        
        //create next arrow
        var next = new Image();
        next.className = 'nextArrow';
        next.src = '/image/products/next.gif';
        
        //create close button
        var closeButton = document.createElement('a');
        closeButton.className = 'closeButton';
        var closeImg = new Image();
        closeImg.src = '/image/misc/close_button.jpg';
        closeButton.appendChild(closeImg);
        
        //create print button
        var printButton = document.createElement('a');
        printButton.className = 'printButton';
        printButton.setAttribute('href','javascript:void(0);');
        var printImage = new Image();
        printImage.src = '/image/common/printer.png';
        printButton.appendChild(printImage);
        var printText = document.createTextNode('Print Image');
        printButton.appendChild(printText);
        
        //add them together
        imageContainer.appendChild(next);
        popupBox.appendChild(imageContainer);
        popupBox.appendChild(closeButton);
        popupBox.appendChild(printButton);
        
        this.show = function(img,currentPosition){
            for(i=0;i<thumbs.length;i++){
                thumbs[i].full.src = thumbs[i].full.srcText;
            }
            current = currentPosition;
            var body = document.getElementsByTagName('body')[0];
            cover.style.height = body.offsetHeight+'px';
            popupBox.style.marginLeft = (img.width != 0) ? '-'+((img.width/2)+20)+'px' : '-200px';
            popupBox.style.marginTop = (img.height != 0) ? '-'+((img.height/2)+40)+'px' : '-200px';
            popupBox.style.width = (img.width != 0) ? img.width+2+'px' : '600px';
            imageContainer.appendChild(img);
            body.appendChild(cover);
            body.appendChild(popupBox);
        }
        
        closeButton.onclick = function closeFull(){
            cover.parentNode.removeChild(cover);
            popupBox.parentNode.removeChild(popupBox);
            clearImage(imageContainer);
        }
        
        function clearImage(imageContainer){
            for(i=0;i<imageContainer.childNodes.length;i++){
                if(imageContainer.childNodes[i].className != 'nextArrow'){
                    imageContainer.removeChild(imageContainer.childNodes[i]);
                }
            }
        }
        
        printButton.onclick = function(){
            var win = window.open();
            
            var imageToPrint = imageContainer.childNodes[1];               
            var imageToPrintURL = imageToPrint.src;    
            var imageToPrintFileName = imageToPrintURL.split(fullFolder+'/')[1];
            
            win.location = 'http://www.portlandbolt.com/image/products/full/printpage.php?img='+imageToPrintFileName;
        }
        
        imageContainer.onmouseover = function showNextArrow(){
            next.style.display = 'block';
        }
        
        imageContainer.onmouseout = function hideNextArrow(){
            next.style.display = 'none';
        }
        
        imageContainer.onclick = function cycle(){
            if(current < thumbs.length-1){
                current++;
            }else{
                current = 0;
            }
            var newImg = thumbs[current].full;
            
            clearImage(imageContainer);
            
            popupBox.style.marginLeft = '-'+((newImg.width/2)+20)+'px';
            popupBox.style.marginTop = '-'+((newImg.height/2)+40)+'px';
            popupBox.style.width = newImg.width+2+'px';
        
            imageContainer.appendChild(newImg);
        }
    }
}