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;
}
//vertical align of side button
/*function questionAlign(){
    var question = document.createElement('div');
    var anchorQ = document.createElement('a');
    anchorQ.href = '#';
    question.id = 'question';
    question.appendChild(anchorQ);
    question.onclick = function(){
         feedbackCall('form','Задать вопрос','',null,document.getElementById('form').innerHTML
                );
                
        return false;
    }
    document.getElementById('wrapper').appendChild(question);
}    */
    var arrayOfImages;
    


/*
 * feedbacCall - lightbox
 * typeOfPopUp:
 *                          1. 'mapList' - create site map other options 'boxHead' 
 *                          2. 'form' - create form , other options boxHead and textIn
 *                          3.'imageBox' - create lightbox withi img boxHead= null, textIn = null, width - set ups width of lightbox , 
 *                                                       setImagesClass - class of clicked anchor, event
 */
function feedbackCall(typeOfpopUp, boxHead, textIN, width, feedbackFormText, setImagesClass, event){
    var box = document.getElementById('contentBox');
    if(box == null){
        var contentBox = document.createElement('div');
        var boxInner = document.createElement('div');
        var dark = document.createElement('div');
        var blueTab = document.createElement('div');
        var blueTabIn = document.createElement('div');
        var boxHeader = document.createElement('div');
        var closeButton = document.createElement('div');
        var closeButtonA = document.createElement('a');
        document.getElementById('wrapper').appendChild(dark);
        contentBox.appendChild(boxInner);
        boxInner.appendChild(blueTab);
        blueTab.appendChild(blueTabIn);
        boxInner.appendChild(boxHeader);
        boxInner.appendChild(closeButton);
        document.getElementById('wrapper').appendChild(contentBox);
        closeButton.appendChild(closeButtonA);
        contentBox.style.opacity = 0;
        dark.style.opacity = 0;
        contentBox.id = 'contentBox';
        dark.id = 'dark';
        boxInner.className = 'boxInner';
        blueTab.className = 'blueTab';
        boxHeader.className = 'boxHeader';
        boxHeader.innerHTML = boxHead;
        closeButton.className = 'closeButton';
        closeButtonA.id = 'close';
        function closeContentBox(){
            document.getElementById('wrapper').appendChild(document.getElementById('form'));
            document.getElementById('wrapper').removeChild(contentBox);
            document.getElementById('form').style.display = 'none';
            document.getElementById('wrapper').removeChild(dark);
        }
        closeButtonA.onclick = function(){closeContentBox();return false;}
        closeButtonA.href = '#close';
        if (typeOfpopUp == 'form') {
            var text = document.createElement('div');
            var feedbackForm = document.createElement('div');
            var tabBottom = document.createElement('div');
            boxInner.appendChild(text);
            boxInner.appendChild(feedbackForm);
            boxInner.appendChild(tabBottom);
            text.className = 'text';
            text.innerHTML = textIN;
            feedbackForm.className = 'feedbackForm';
            var form = document.getElementById('form');
            feedbackForm.appendChild(form);
            
            form.style.display = 'block'
            tabBottom.className = 'tabBottom';
            
        }
        if(typeOfpopUp == 'imageBox'){
          var e = (window.event) ? window.event.srcElement : event.target;
          var img = document.createElement('img');
          
          img.src = e.href;
          img.alt = e.parentNode.getElementsByTagName('img')[0].alt;
      
          var nextImage = document.createElement('a');
          var prevImage = document.createElement('a');
                defaultImageClass = 'imagesBoxed';
                setImagesClass =(!setImagesClass)? defaultImageClass : setImagesClass 
          var arrayOfImages = getElementsByClass(setImagesClass,e.parentNode.parentNode);
                for (var i = 0; i < arrayOfImages.length; i++) {
                    arrayOfImages[i].index = i;
                }
            if (e.index == 0) {
                prevImage.style.display ='none';
            }
            else {
                    prevImage.style.display ='block';
                prevImage.href = arrayOfImages[e.index - 1].href;
                prevImage.index = e.index - 1;
    
            }
            
            if (e.index == arrayOfImages.length - 1) {
                nextImage.href = '#';
            }
            else {
                nextImage.href = arrayOfImages[e.index + 1].href;
                nextImage.index = e.index + 1;
            }
            
      nextImage.onclick = function() {
                if (this.href == '#') return false;
                
                img.src = this.href;
                
                if (this.index == 0) {
                prevImage.style.display ='none';
                }
                else {
                        prevImage.style.display ='block';
                        prevImage.href = arrayOfImages[this.index - 1].href;
                        prevImage.index = this.index - 1;
                    }
                    
                    if (this.index == arrayOfImages.length - 1) {
                        nextImage.style.display ='none';
                        nextImage.sub = arrayOfImages[this.index].parentNode.getElementsByTagName('img')[0];
                        nextImage.title = nextImage.sub.alt; 
                    }
                    else {
                        nextImage.style.display ='block';
                        nextImage.href = arrayOfImages[this.index + 1].href;
                        nextImage.sub = arrayOfImages[this.index].parentNode.getElementsByTagName('img')[0];
                        nextImage.title = nextImage.sub.alt; 
                        nextImage.index = this.index + 1;
                    }
                    boxHeader.innerHTML = nextImage.title; 
            return false;
                };
            
      prevImage.onclick = function() {
                if (this.href == '#') return false;
                
                img.src = this.href;
                
                if (this.index == 0) {
                prevImage.style.display ='none';
                    prevImage.sub = arrayOfImages[this.index].parentNode.getElementsByTagName('img')[0];
                    prevImage.title = prevImage.sub.alt; 
            }
            else {
                    prevImage.style.display ='block';
                    prevImage.href = arrayOfImages[this.index - 1].href;
                    prevImage.sub = arrayOfImages[this.index].parentNode.getElementsByTagName('img')[0];
                    prevImage.title = prevImage.sub.alt; 
                    prevImage.index = this.index - 1;
                }
                
                if (this.index == arrayOfImages.length - 1) {
                    nextImage.style.display ='none';
                }
                else {
                    nextImage.style.display ='block';
                    nextImage.href = arrayOfImages[this.index + 1].href;
                    nextImage.index = this.index + 1;
                }
                boxHeader.innerHTML = prevImage.title; 
                return false;
            };
            nextImage.innerHTML = '>';
      prevImage.innerHTML = '<';
      contentBox.style.width = width + 'px';
      boxInner.style.width = width - 12 +'px'
      img.style.width = boxInner.offsetWidth - 64 + 'px';
      img.style.height = (boxInner.offsetHeight*2) / 3 + 'px';
      img.style.marginLeft = 32 +'px';
      img.style.marginTop = 22 +'px';
      boxHeader.innerHTML = img.alt;
      boxInner.appendChild(img);
      boxInner.appendChild(nextImage);
      boxInner.appendChild(prevImage);
      
    }
        setTimeout(function(){dark.style.opacity = 1;contentBox.style.opacity = 1;},200)
        function contentBoxPos(){
            var contentBoxWidth = contentBox.offsetWidth;
            var contentBoxHeight = contentBox.offsetHeight;
            var scrollPositionY = (self.pageYOffset) ? window.pageYOffset:document.documentElement.scrollTop;
            var scrollx = (window.innerHeight) ? (window.innerWidth/2 - contentBoxHeight/2) : (document.body.clientWidth/2 - contentBoxHeight/2);
            var scrolly = (window.innerHeight) ? (window.innerHeight/2 - contentBoxHeight/2 + scrollPositionY) : (document.body.clientHeight/2 - contentBoxHeight/2 + scrollPositionY/2);
            contentBox.style.top = scrolly + 'px';
            contentBox.style.left = scrollx  + 'px';
        }
        contentBoxPos();
        var scrollWY = (window.innerHeight) ? document.documentElement.scrollHeight : document.body.scrollHeight;
        var scrollWX = (window.innerHeight) ? document.documentElement.scrollWidth : document.body.scrollWidth;
        
        
        dark.style.position = 'absolute';
        dark.style.top = '0px';
        dark.style.left = '0px';
        dark.style.width = scrollWX + 'px';
        dark.style.height = scrollWY + 'px';
        return false;
    }
}
// search for anchor that must have an lightbox
function searchAndInitImages(className){
    var links = getElementsByClass(className);
    if (links[0] != undefined) {
    for (var k = 0; k < links.length; k++) {
        links[k].onclick = function(event){
                var evt = event;
                feedbackCall('imageBox', null, null, 640, className,evt);
                return false;
        }
    }
  }
}
window.onload = function(){
    /*questionAlign();*/
    searchAndInitImages('imagesBoxed handGlass');
}