simpleBox.relValue = 'gallery';
simpleBox.contentWidth = 840;
simpleBox.contentHeight = 548;
simpleBox.firstStart = true;
simpleBox.disableLinks = false;
simpleBox.galleries = new Array();
simpleBox.photos = new Array();
simpleBox.currentPhotoNum = 0;

simpleBox.onOpen = function(){
    if (this.firstStart) {
        new XHR({method: 'get', async: true, onSuccess: this.onLoadMenu.bind(this)}).send('/defa/ajax/gallery.php');
    }
    return false;
}

// Обработка аяксового запроса списка галерей
simpleBox.onLoadMenu = function(response) {
    if (response.length>0) {
        try {
            var response = eval('(' + response + ')');
            this.galleries = response.galleries;
            this.currentGallery = response.galleries[0].id;
            this.rebuildGalleryMenu();
        }
        catch (e) {
                // do nothing
        }
    }
    this.firstStart = false;
    this.onStartChangeGallery();
}
simpleBox.galleryOnClick = function(e){
    if (this.disableLinks){
        return false;
    }
    var targ;
    if (typeof(e) == 'undefined') {
        var e = window.event;
    }

    if (typeof(e.target) != 'undefined') {
        targ = e.target;
    }
    else if (typeof(e.srcElement) != 'undefined') {
        targ = e.srcElement;
    }
    this.currentGallery = targ.id.substring(4);
    this.onStartChangeGallery();
    this.rebuildGalleryMenu();
    this.disableLinks = true;
    return false;
}
simpleBox.onStartChangeGallery = function() {
    
    this.thumbsHolder.parentNode.parentNode.className = 'g-thumb-plug';
    this.thumbsHolder.style.display = 'none';
    while (this.thumbsHolder.childNodes.length > 0) {
        this.thumbsHolder.removeChild(this.thumbsHolder.childNodes[0]);
    }
    new XHR({method: 'get', async: true, onSuccess: this.onSuccessChangeGallery.bind(this)}).send('/defa/ajax/get_photo.php?id='+this.currentGallery);
}
simpleBox.onSuccessChangeGallery = function(response) {
    if (response.length > 0) {
        try {
            var response = eval('(' + response + ')');
            this.photos = response.photo;
            this.photos.each(function(item, index){
                var a = new Element('a', {href: '#', id: 'photo_'+item.id}).injectInside(new Element('li').injectInside(this.thumbsHolder));
                a.onclick = this.photoOnClick.bind(this);
                a.setHTML('<img src="'+item.preview+'" width="43" height="43" alt="" />');
            }, this);
        }
        catch (e) {
                // do nothing
        }
    }
    this.thumbsHolder.parentNode.parentNode.className = 'g-thumb';
    this.thumbsHolder.style.display = '';
    this.disableLinks = false;
//    alert(this.scrollable.clientHeight);
    this.currentPhotoNum = 0;
//    if (this.detailImage.parentNode.className == 'plug') {
        this.preload = new Image();
        this.preload.onload = this.onChangePhoto.bind(this);
        this.preload.src = this.photos[0].detail;
        this.prev.className = 'g-arr-left-d';
        this.next.className = 'g-arr-right';
        this.prev.id = '';
        this.next.id = 'next__'+this.photos[this.currentPhotoNum+1].id;
//    }
}

simpleBox.photoOnClick = function(e){
    if (this.disableLinks){
        return false;
    }
    var targ;
    if (typeof(e) == 'undefined') {
        var e = window.event;
    }

    if (typeof(e.target) != 'undefined') {
        targ = e.target;
    }
    else if (typeof(e.srcElement) != 'undefined') {
        targ = e.srcElement;
    }
    // photo_, prev__, next__
    var strId = targ.id;
    if (strId == ''){
        strId = targ.parentNode.id;
        if (strId == '') {
            return false;
        }
    }
    this.currentPhoto = strId.substring(6);

    this.detailImage.parentNode.className = 'plug';
    this.detailImage.style.display = 'none';
    for(var i in this.photos) {
        if (this.photos[i].id == this.currentPhoto) {
            this.currentPhotoNum = i;
            break;
        }
    }
    this.preload = new Image();
    this.preload.onload = this.onChangePhoto.bind(this);
    this.preload.src = this.photos[this.currentPhotoNum].detail;
    return false;
}
simpleBox.onChangePhoto = function() {
    this.detailImage.src = this.photos[this.currentPhotoNum].detail;
    this.detailTitle.setHTML(this.photos[this.currentPhotoNum].title);
    this.number.setHTML('<b>'+(parseInt(this.currentPhotoNum)+1)+'</b>');
    this.detailImage.style.display = '';
    this.detailImage.className = '';

    if (this.currentPhotoNum == 0) {
        this.prev.className = 'g-arr-left-d';
        this.prev.id = '';
    }
    else {
        this.prev.className = 'g-arr-left';
        this.prev.id = 'prev__'+this.photos[parseInt(this.currentPhotoNum)-1].id;
    }
    if (this.currentPhotoNum == this.photos.length-1) {
        this.next.className = 'g-arr-right-d';
        this.next.id = '';
    }
    else {
        this.next.className = 'g-arr-right';
        this.next.id = 'next__'+this.photos[parseInt(this.currentPhotoNum)+1].id;
    }
}

simpleBox.rebuildGalleryMenu = function() {
    while (this.galleryMenuHolder.childNodes.length > 0) {
        this.galleryMenuHolder.removeChild(this.galleryMenuHolder.childNodes[0]);
    }
    this.galleries.each(function(item, index){
        if (item.id != this.currentGallery) {
            var a = new Element('a', {'href': '#', 'id': 'gal_'+item.id}).injectInside(new Element('li').injectInside(this.galleryMenuHolder));
            a.onclick = this.galleryOnClick.bind(this);
            a.setHTML(item.name);
        }
        else {
            new Element('li').injectInside(this.galleryMenuHolder).setHTML('<b>'+item.name+'</b>');
        }
    }, this);

}

simpleBox.scrollUpMouseDown = function() {
    this.scrollDirection = 'u';
}

simpleBox.scrollDownMouseDown = function() {
    this.scrollDirection = 'd';
}

simpleBox.scrollMouseUp = function() {
    this.scrollDirection = '';
}

simpleBox.makeContainer = function() {
    var holder = new Element('div', {'class': 'galholder'}).injectInside(this.center);
    var dl = new Element('dl', {'class': 'g-imgholder'}).injectInside(holder);
    this.detailImage = new Element('img', {'src': '/defa/images/photo.jpg', 'width': '644', 'height': '483', 'alt': ''}).injectInside(new Element('dt').injectInside(dl));
    this.detailTitle = new Element('dd').injectInside(dl)
    
    this.detailImage.parentNode.className = 'plug'
    this.detailImage.style.display = 'none';

    this.galleryMenuHolder = new Element('ul', {'class': 'g-menu'}).injectInside(holder);

    var thumbHolder = new Element('div', {'class': 'g-thumbholder'}).injectInside(holder);

    var scrollUp = new Element('div', {'class': 'g-arr-up'}).injectInside(thumbHolder);
    
    this.scrollable = new Element('div').injectInside(new Element('div', {'class': 'g-thumb'}).injectInside(thumbHolder));
    this.thumbsHolder = new Element('ul', {'class': 'g-thumblist clear'}).injectInside(this.scrollable);

    var scrollDown = new Element('div', {'class': 'g-arr-down'}).injectInside(thumbHolder);

    var numHolder = new Element('div', {'class': 'g-numholder clear'}).injectInside(holder);
    
    this.prev = new Element('div', {'class': 'g-arr-left'}).injectInside(numHolder);
    this.prev.onclick = this.photoOnClick.bind(this)

    this.number = new Element('div', {'class': 'g-num'}).injectInside(numHolder);
    this.number.setHTML('<b>&nbsp;</b>');

    this.next = new Element('div', {'class': 'g-arr-right'}).injectInside(numHolder);
    this.next.onclick = this.photoOnClick.bind(this);

    new Element('div', {'class': 'g-close'}).injectInside(holder).onclick = this.overlay.onclick = this.close.bind(this);

/*    scrollUp.onmousedown = this.scrollUpMouseDown.bind(this);
    scrollDown.onmouseup = this.scrollUpMouseUp.bind(this);
    document.onmouseup = this.scrollMouseUp.bind(this);
    this.scrollDirection = '';*/
    /*--*/
    this.testArea = new Element('div').injectInside(holder).setHTML('');
    /*--*/

    new Element('div', {'class': 'g-top'}).injectInside(this.center);
    new Element('div', {'class': 'g-left'}).injectInside(this.center);
    new Element('div', {'class': 'g-right'}).injectInside(this.center);
    new Element('div', {'class': 'g-bot'}).injectInside(this.center);

    return holder;
}
window.addEvent('domready', simpleBox.init.bind(simpleBox));