function getElementsByClass(searchClass, node, tag){
    var classElements = new Array();
    if (node == null) 
        node = document;
    if (tag == null) 
        tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp('(^|\\\\s)' + searchClass + '(\\\\s|$)');
    for (i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className)) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}
function insertAfter(parent, node, referenceNode) {
  parent.insertBefore(node, referenceNode.nextSibling);
}
var piPop = {
	/*properties*/
	boxHead: new String(),
	width: '600px',
	setImagesClass: new String(),
	box: document.getElementById('contentBox'),
	contentBox: document.createElement('div'),
    boxInner: document.createElement('div'),
	dark: document.createElement('div'),
	blueTab: document.createElement('div'),
    boxHeader: document.createElement('div'),
    closeButton: document.createElement('div'),
    closeButtonA: document.createElement('a'),
	roundcont: document.createElement('div'),
	roundcontB: document.createElement('div'),
	nextImage: document.createElement('a'),
	prevImage: document.createElement('a'),
	img: document.createElement('img'),
	loading: document.createElement('img'),
	defaultImageClass: 'imagesBoxed',
	arrayOfImages: new Array(),
	interval: new Number(),
	scrollWY: (window.innerHeight) ? document.documentElement.offsetHeight : document.body.offsetHeight,
    scrollWX: (window.innerWidth) ? document.documentElement.scrollWidth : document.body.scrollWidth,
	/*properties*/
	init: function(type,event){
		if(piPop.box == null){
			var contentBox = piPop.contentBox;
	        var boxInner = piPop.boxInner;
	        var dark = piPop.dark;
	        var boxHeader = piPop.boxHeader;
	        var closeButton = piPop.closeButton;
	        var closeButtonA = piPop.closeButtonA;
	        document.getElementById('container').appendChild(dark);
	        contentBox.appendChild(boxInner);
	        boxInner.appendChild(closeButton);
	        document.getElementById('container').appendChild(contentBox);
	        closeButton.appendChild(closeButtonA);
	        contentBox.style.opacity = 0;
	        dark.style.opacity = 0;
	        contentBox.id = 'contentBox';
	        dark.id = 'dark';
	        boxInner.className = 'boxInner';
	        boxHeader.className = 'boxHeader';
	        boxHeader.innerHTML = piPop.boxHead;
	        closeButton.className = 'closeButton';
	        closeButtonA.id = 'close';
			closeButtonA.onclick = function(){
				piPop.closeContentBox();
				return false;
			}
        	closeButtonA.href = '#close';
			piPop.image('imagesBoxed',event);
			setTimeout(
				function(){
					dark.style.opacity = 1;
					contentBox.style.opacity = 1;
				},200);
			dark.onmousedown = function(){
				piPop.closeContentBox();
			}
	        dark.style.position = 'absolute';
			dark.style.zIndex = '0';
	        dark.style.top = '0px';
	        dark.style.left = '0px';
	        dark.style.width = piPop.scrollWX + 'px';
	        dark.style.height = piPop.scrollWY + 126 + 'px';
			if (type == 'image') {
				if ((piPop.img.complete === false) || (piPop.img.src === '')) {
					piPop.loading.src = '/images/ajax-loader.gif';
					piPop.loading.style.padding = '150px 260px 100px'
					piPop.loading.style.display = 'block';
					piPop.img.style.display = 'none';
					insertAfter(piPop.boxInner,piPop.loading,piPop.closeButton);
					piPop.contentBoxPos();
					piPop.interval = setInterval(function(){
						if (piPop.img.complete === true) {
							piPop.loading.style.display = 'none';
							piPop.img.style.display = 'block';
							piPop.contentBoxPos();
							clearInterval(piPop.interval);
						}
					}, 100);
				}
				else{
					piPop.loading.src = '/images/ajax-loader.gif';
					piPop.loading.style.padding = '150px 260px 100px';
					piPop.loading.style.display = 'none';
					insertAfter(piPop.boxInner,piPop.loading,piPop.closeButton);
					piPop.contentBoxPos();
				}
			}
			else {
				piPop.contentBoxPos();
			}
	        return false;
		}
	},
	
	image: function(setImagesClass,event){
		var e = (window.event) ? window.event.srcElement : event.target;
		var img = piPop.img;
		var boxInner = piPop.boxInner;
		img.src = e.parentNode.href;
		img.alt = e.alt;
		var nextImage = piPop.nextImage;
		var prevImage = piPop.prevImage;
		    setImagesClass =(!setImagesClass)? this.defaultImageClass : setImagesClass;
		var arrayOfImages = piPop.arrayOfImages;
		var arrayOfAnchors = getElementsByClass(setImagesClass);
		var preLoadPrev = new Image();
		var preLoadNext = new Image();
			for(var i=0; i< arrayOfAnchors.length;i++){
				arrayOfImages.push(arrayOfAnchors[i]);
			}
		for (var i = 0; i < arrayOfImages.length; i++) {
	        arrayOfImages[i].index = i;
	    }
		if (e.parentNode.index == 0) {
		    delete prevImage.href;
		}
		else {
	        prevImage.style.display ='block';
		    prevImage.href = arrayOfImages[e.parentNode.index - 1].href;
			preLoadPrev.src = prevImage.href;
		    prevImage.index = e.parentNode.index - 1;
		}
		if (e.parentNode.index == arrayOfImages.length - 1) {
		    delete nextImage.href;
		}
		else {
		    nextImage.href = arrayOfImages[e.parentNode.index + 1].href;
			preLoadNext.src = nextImage.href;
		    nextImage.index = e.parentNode.index + 1;
		}
		prevImage.onclick = function(event){
			piPop.prevImageClick(event);
			return false;
		}
		nextImage.onclick = function(event){
			piPop.nextImageClick(event);
			return false;
		}
		nextImage.className = 'nextImage';
		prevImage.className = 'prevImage';
		piPop.contentBox.style.width = piPop.width;
		piPop.contentBox.style.height = 'auto';
		piPop.boxInner.style.width = piPop.contentBox.offsetWidth - 60 +'px'
		img.style.width = piPop.boxInner.offsetWidth - 60 + 'px';
		piPop.boxHeader.innerHTML = img.alt;
		piPop.boxInner.appendChild(img);
		piPop.boxInner.appendChild(prevImage);
		piPop.boxInner.appendChild(piPop.boxHeader);
		piPop.boxInner.appendChild(nextImage);
		return false;
	},
	
	nextImageClick:function(event){
		var e = (window.event) ? window.event.srcElement : event.target;
		var arrayOfImages = piPop.arrayOfImages;
		var img = piPop.img;
		var newImg = new Image();
		var loading = piPop.loading;
		var nextImage = piPop.nextImage;
		var prevImage = piPop.prevImage;
		var preLoadPrev = new Image();
		var preLoadNext = new Image();
		if (e.href == '#') return false;
        img.src = e.href;
		img.index = e.index;
		newImg.src = e.href;
        if (img.index == 0) {
    		delete prevImage.href;
			delete prevImage.title;
        }
        else{
            prevImage.style.display ='block';
            prevImage.href = arrayOfImages[e.index - 1].href;
			preLoadPrev.src = prevImage.href;
            prevImage.index = e.index - 1;
            }
        if (e.index == arrayOfImages.length - 1) {
			delete nextImage.href;
			delete nextImage.title;
        }
        else {
            nextImage.style.display ='block';
            nextImage.href = arrayOfImages[e.index + 1].href;
			preLoadNext.src = nextImage.href;
            nextImage.title = arrayOfImages[e.index].getElementsByTagName('img')[0].alt; 
            nextImage.index = e.index + 1;
        }
		if(newImg.complete === false){
			img.style.display = 'none';
			loading.style.display = 'block';
			piPop.interval = setInterval(function(){
				if (newImg.complete === true) {
					img.style.display = 'block';
					loading.style.display = 'none';	
					piPop.contentBoxPos();	
					clearInterval(piPop.interval);
				}
			}, 100);
		}
		else{
			img.style.display = 'block';
			loading.style.display = 'none';	
		}
        piPop.boxHeader.innerHTML = nextImage.title;
		piPop.contentBoxPos();
    	return false;
	},
	
	prevImageClick: function(event){
		var e = (window.event) ? window.event.srcElement : event.target;
		var arrayOfImages = piPop.arrayOfImages;
		var img = piPop.img;
		var newImg = new Image();
		var loading = piPop.loading;
		var nextImage = piPop.nextImage;
		var prevImage = piPop.prevImage;
		var preLoadPrev = new Image();
		var preLoadNext = new Image();
		if (e.href == '#') return false;
		piPop.tmp = arrayOfImages[e.index]
		img.src = e.href;
		img.index = e.index;
		newImg.src = e.href;
		if (img.index == 0) {
			delete prevImage.href;
			delete prevImage.title;
		}
		else {
		    prevImage.style.display ='block';
		    prevImage.href = arrayOfImages[e.index - 1].href;
			preLoadPrev.src = prevImage.href;
		    prevImage.title = arrayOfImages[e.index].getElementsByTagName('img')[0].alt; 
		    prevImage.index = e.index - 1;
		}
		if (e.index == arrayOfImages.length - 1) {
		    delete nextImage.href;
			delete nextImage.title;
		}
		else {
		    nextImage.style.display ='block';
		    nextImage.href = arrayOfImages[img.index + 1].href;
			preLoadNext.src = nextImage.href;
		    nextImage.index = e.index + 1;
		}
		if(newImg.complete === false){
			img.style.display = 'none';
			loading.style.display = 'block';
			piPop.interval = setInterval(function(){
				if (newImg.complete === true) {
					img.style.display = 'block';
					loading.style.display = 'none';
					piPop.contentBoxPos();		
					clearInterval(piPop.interval);
				}
			}, 100);
		}
		else{
			img.style.display = 'block';
			loading.style.display = 'none';	
		}
		piPop.boxHeader.innerHTML = prevImage.title;
		piPop.contentBoxPos();
		return false;
	},
	
	closeContentBox: function(){
		piPop.arrayOfImages = [];
		piPop.img.src = '';
        document.getElementById('container').removeChild(document.getElementById('contentBox'));
        document.getElementById('container').removeChild(document.getElementById('dark'));
	},
	
	contentBoxPos: function(){
		var contentBoxWidth = piPop.contentBox.offsetWidth;
        var contentBoxHeight = piPop.contentBox.offsetHeight;
        var scrollPositionY = (self.pageYOffset) ? window.pageYOffset:document.documentElement.scrollTop;
        var scrollx = (window.innerHeight) ? (window.innerWidth/2 - contentBoxWidth/2) : (document.body.clientWidth/2 - contentBoxWidth/2);
        var scrolly = (window.innerHeight) ? (window.innerHeight/2 - contentBoxHeight/2 + scrollPositionY) : (document.body.clientHeight/2 - contentBoxHeight/2 + scrollPositionY);
        piPop.contentBox.style.top = scrolly + 'px';
        piPop.contentBox.style.left = scrollx  + 'px';
	}
}