var HDDGallery = new Class({
    initialize: function(tags) {
        this.intro = $('introcontainer');
        this.container = $('maincontainer');
        this.index = 0;
        this.pagesize = 16;
    },
    
    show: function(category, tag, deck) {
        this.category = category;
        this.tag = tag;
        this.intro.setStyle('display', 'none');
        this.container.empty();
        if (this.category.ID == 0) {
            this.showPageSizeOptions();
            new Element('div', { 'class': 'gallerytitle' }).setText('My Favourite Decks').injectInside(this.container);
            this.decks = tags.FavoriteDecks;
            this.index = 0;
            this.decks.length == 0 ? new Element('div', { 'styles': { 'margin-top': '10px' }}).setText('You have not added any decks to your favourites list.').injectInside(this.container) : this.showThumbnails();
        }
        else if (!this.tag) {
            // show category level information
            new Element('div', { 'class': 'gallerytitle' }).setText(category.Name).injectInside(this.container);
            var postbody = "category=" + this.category.ID;
            new Ajax("../data/randomphoto.aspx", { "postBody": postbody, "onSuccess": function(result) {
                    var subcontainer = new Element('div', { 'styles': { 'margin': '30px 0 0 60px' }}).injectInside(this.container);
                    new Element('div', { 'styles': { 'margin-bottom': '10px' }}).setText('Please click on a category on the left or below to view photos.').injectInside(subcontainer);
                    new Element('img', { 'style': { 'border': 'none' }, 'src': '../picture.aspx?s=m&id=' + result }).injectInside(subcontainer);
                    category.Tags.each(function(tag) {
                        new Element('br').injectInside(subcontainer);
                        subcontainer.appendText('· ');
                        new Element('a', { 'styles': { 'cursor': 'pointer', 'color': '#555' }, 'events': { 'click': function() {
                                this.show(category, tag);
                            }.bind(this)}}).setText(tag.Name).injectInside(subcontainer);
                    }.bind(this));
                }.bind(this), "onFailure": function() {} }).request();
        }
        else {  
            // show gallery images
            this.showPageSizeOptions();
            if (this.tag.hasLogo)
                new Element('img', { 'style': { 'border': 'none' }, 'src': '../logo.aspx?id=' + tag.ID }).injectInside(this.container);
            else
                new Element('div', { 'class': 'gallerytitle' }).setText(tag.Name).injectInside(this.container);
            var postbody = "tag=" + this.tag.ID;
            new Ajax("../data/decks.aspx", { "postBody": postbody, "onSuccess": function(result) {
                    this.decks = eval('(' + result + ')');
                    this.index = 0;
                    
                    var deck_index = -1;
                    if (deck) {
                        for (var i=0; i<this.decks.length; i++) {
                            if (this.decks[i].ID == deck) {
                                deck_index = i;
                                break;
                            }
                        }
                    }
                    
                    deck_index == -1 ? this.showThumbnails() : this.showDeck(deck_index);
                }.bind(this), "onFailure": function() {} }).request();
        }
    },

    changePageSize: function() {
        this.pagesize = parseInt(this.pageSizeSelect.value);
        this.moveTo(0);
    },
    
    showPageSizeOptions: function() {
        this.pageSizeSelect = new Element('select', { 'styles': { 'float': 'right' }, 'events': { 'change': function() {
                this.changePageSize();
            }.bind(this)}}).injectInside(this.container);
        new Element('option', { 'value': '16' }).setText('16').injectInside(this.pageSizeSelect);
        new Element('option', { 'value': '24' }).setText('24').injectInside(this.pageSizeSelect);
        new Element('option', { 'value': '32' }).setText('32').injectInside(this.pageSizeSelect);
        new Element('option', { 'value': '5000' }).setText('all').injectInside(this.pageSizeSelect);
        this.pageSizeSelect.value = this.pagesize;
        
        new Element('span', { 'styles': { 'float': 'right', 'margin-right': '4px' }}).setText('Pictures Per Page:').injectInside(this.container);
    },
    
    showThumbnails: function() {
        var container = $('thumbnails');
        if (container) container.remove();

        container = new Element('div', { 'id': 'thumbnails', 'styles': { 'margin': '30px 0 0 60px' }}).injectInside(this.container);

        if (this.index < 0 || this.index > this.decks.length) this.index = 0;
        var last_index = this.index + this.pagesize;
        if (last_index > this.decks.length) last_index = this.decks.length;
        
        new Element('div', { 'styles': { 'font-style': 'italic' }}).setText('Please click on an image to view larger').injectInside(container);

        for (var i=this.index; i<last_index; i++) {
            var deck = this.decks[i];
            new Element('img', { 'src': '../picture.aspx?s=s&id=' + deck.PictureID, 'styles': { 'float': 'left', 'border': 'none', 'height': '73px', 'width': '110px', 'margin': '1px', 'cursor': 'pointer' }, 'events': { 'click': 
                (function(index) { 
                    return function() { this.showDeck(index); }; }
                )(i).bind(this)}}).injectInside(container);
        };
        new Element('br', { 'clear': 'all', 'styles': { 'height': '0px' }}).injectInside(container);
        
        var bottom = new Element('div', { 'styles': { 'background': 'url(../images/photo_blank.jpg)', 'float': 'left', 'height': '18px', 'width': '100px' }}).injectInside(container);
        if (this.index > 0)
            new Element('a', { 'class': 'whitebold', 'styles': { 'float': 'left', 'padding': '2px' }, 'events': { 'click': function() {
                    this.moveTo(this.index - this.pagesize);
                }.bind(this)}}).setText('◄ PREVIOUS').injectInside(bottom);

        bottom = new Element('div', { 'styles': { 'padding-top': '2px', 'text-align': 'center', 'background': 'url(../images/photo_blank.jpg)', 'float': 'left', 'height': '16px', 'width': '248px' }}).injectInside(container);
        new Element('a', { 'class': 'whitebold', 'events': { 'click': function() {
                this.startSlideshow(0);
            }.bind(this)}}).setText('VIEW AS SLIDESHOW').injectInside(bottom);
        
        bottom = new Element('div', { 'styles': { 'background': 'url(../images/photo_blank.jpg)', 'float': 'left', 'height': '18px', 'width': '100px' }}).injectInside(container);
        if (this.index + this.pagesize < this.decks.length)
            new Element('a', { 'class': 'whitebold', 'styles': { 'float': 'right', 'padding': '2px' }, 'events': { 'click': function() {
                    this.moveTo(this.index + this.pagesize);
                }.bind(this)}}).setText('NEXT ►').injectInside(bottom);
    },
    
    moveTo: function(index) {
        if (index < 0 || index > this.decks.length) index = 0;
        this.index = index;
        this.showThumbnails();
    },
    
    showDeck: function(index, is_slideshow) {
        var deck = this.decks[index];
        this.deckIndex = index;
        
        // title
        var title = $('decktitle');
        if (!title) {
            this.container.empty();
            title = new Element('div', { 'id': 'decktitle', 'styles': { 'color': '#006732', 'font-size': '16px', 'font-weight': 'bold' }}).injectInside(this.container);
        }
        title.setText((this.category.ID == 0 ? 'My Favourites' : this.tag.Name) + ' - Deck ID H' + deck.ID);
        
        // image
        var deckimage = $('deckimage');
        if (deckimage) {
            deckimage.removeEvents();
            
            // apply fade between images
            var position = deckimage.getPosition();
            var previmage = new Element('img', { 'src': deckimage.getAttribute('src'), 'styles': { 'float': 'left', 'position': 'absolute', 'top': position.y + 'px', 'left': position.x + 'px', 'border': 'none', 'height': '284px', 'width': '420px'} }).injectInside(document.body);
            
            deckimage.setStyle('opacity', 0);
            deckimage.setAttribute('src', '../picture.aspx?s=m&id=' + deck.PictureID);
            
            deckimage.effect('opacity', { 'duration': 2000 }).start(1);
            previmage.effect('opacity', { 'duration': 2000 }).start(0);
        }
        else
            deckimage = new Element('img', { 'id': 'deckimage', 'src': '../picture.aspx?s=m&id=' + deck.PictureID, 'styles': { 'cursor': 'pointer', 'float': 'left', 'border': 'none', 'margin-top': '10px', 'height': '284px', 'width': '420px'} }).injectInside(this.container);
        deckimage.addEvent('click', function() { this.showLargeImage(deck); }.bind(this));
        

        // utilities
        var deckutils = $('deckutils');
        deckutils ? deckutils.empty() : deckutils = new Element('div', { 'id': 'deckutils', 'styles': { 'float': 'left', 'margin': '10px 0 0 1px', 'width': '141px', 'overflow': 'hidden' }}).injectInside(this.container);
        new Element('img', { 'src': '../images/decks/email.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }, 'events': {
                'mouseover': function() { this.src = '../images/decks/email_ov.png'; },
                'mouseout': function() { this.src = '../images/decks/email.png'; },
                'click': function() {
                    this.backing = new Element('div', { 'styles': { 'position': 'absolute', 'top': 0, 'left': 0, 'height': '100%', 'width': '100%', 'background-color': '#ccc', 'opacity': '0.7', 'z-index': 50 }}).injectInside(document.body);
                    var top = (window.getHeight()-300)/2;
                    var left = (window.getWidth()-400)/2;
                    this.dialogcontainer = new Element('div', { 'styles': { 'position': 'absolute', 'cursor': 'pointer', 'top': top, 'left': left, 'height': '300px', 'width': '400px', 'z-index': 60, 'background-color': '#fff', 'padding': '0px', 'border': 'solid 4px #277a60' }}).injectInside(document.body);
                    new Element('div', { 'styles': { 'background-color': '#277a60', 'padding': '2px', 'color': '#fff', 'font-weight': 'bold' }}).setText('EMAIL TO FRIEND').injectInside(this.dialogcontainer);
                    new Element('iframe', { 'frameborder': 'no', 'styles': { 'width': '400px', 'height': '280px', 'border': 'none' }, 'src': 'sendtofriend.aspx?deck=' + deck.ID }).injectInside(this.dialogcontainer);
                }.bind(this)
            }}).injectInside(deckutils);
        new Element('img', { 'src': '../images/decks/inquire.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }, 'events': {
                'mouseover': function() { this.src = '../images/decks/inquire_ov.png'; },
                'mouseout': function() { this.src = '../images/decks/inquire.png'; },
                'click': function() {
                    this.backing = new Element('div', { 'styles': { 'position': 'absolute', 'top': 0, 'left': 0, 'height': '100%', 'width': '100%', 'background-color': '#ccc', 'opacity': '0.7', 'z-index': 50 }}).injectInside(document.body);
                    var top = (window.getHeight()-400)/2;
                    var left = (window.getWidth()-400)/2;
                    this.dialogcontainer = new Element('div', { 'styles': { 'position': 'absolute', 'cursor': 'pointer', 'top': top, 'left': left, 'height': '400px', 'width': '400px', 'z-index': 60, 'background-color': '#fff', 'padding': '0px', 'border': 'solid 4px #277a60' }}).injectInside(document.body);
                    new Element('div', { 'styles': { 'background-color': '#277a60', 'padding': '2px', 'color': '#fff', 'font-weight': 'bold' }}).setText('INQUIRE ABOUT THIS DECK').injectInside(this.dialogcontainer);
                    new Element('iframe', { 'frameborder': 'no', 'styles': { 'width': '400px', 'height': '380px', 'border': 'none' }, 'src': 'inquire.aspx?deck=' + deck.ID }).injectInside(this.dialogcontainer);
                }.bind(this)
            }}).injectInside(deckutils);
        if (this.category.ID == 0) {
            new Element('img', { 'src': '../images/decks/removefavorites.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }, 'events': {
                    'mouseover': function() { this.src = '../images/decks/removefavorites_ov.png'; },
                    'mouseout': function() { this.src = '../images/decks/removefavorites.png'; },
                    'click': function() {
                        tags.removeFavorite(deck);
                        this.show(tags.Favorites);
                    }.bind(this)
                }}).injectInside(deckutils);
        }
        else {
            new Element('img', { 'src': '../images/decks/favorites.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }, 'events': {
                    'mouseover': function() { this.src = '../images/decks/favorites_ov.png'; },
                    'mouseout': function() { this.src = '../images/decks/favorites.png'; },
                    'click': function() {
                        tags.addFavorite(deck);
                        alert('The deck has been added to your favourites list');
                    }
                }}).injectInside(deckutils);
        }
        new Element('img', { 'src': '../images/decks/bookmark.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }, 'events': {
                'mouseover': function() { this.src = '../images/decks/bookmark_ov.png'; },
                'mouseout': function() { this.src = '../images/decks/bookmark.png'; },
                'click': function() {
                    title = 'HICKORY DICKORY DECKS - DECK H' + deck.ID;
                    url = 'http://www.hickorydickorydecks.com/decks/?tag=' + this.tag.ID + '&deck=' + deck.ID;
                    if (window.sidebar) // Mozilla
                        window.sidebar.addPanel(title, url, "");
                    else if( window.external ) // IE
                       window.external.AddFavorite( url, title);
                }.bind(this)
            }}).injectInside(deckutils);
        if (deck.DeckPlan)
            new Element('img', { 'src': '../images/decks/deckplans.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }, 'events': {
                    'mouseover': function() { this.src = '../images/decks/deckplans_ov.png'; },
                    'mouseout': function() { this.src = '../images/decks/deckplans.png'; },
                    'click': function() {
                        this.backing = new Element('div', { 'styles': { 'position': 'absolute', 'top': 0, 'left': 0, 'height': '100%', 'width': '100%', 'background-color': '#ccc', 'opacity': '0.7', 'z-index': 50 }}).injectInside(document.body);
                        var top = (window.getHeight()-400)/2;
                        var left = (window.getWidth()-480)/2;
                        this.dialogcontainer = new Element('div', { 'styles': { 'position': 'absolute', 'cursor': 'pointer', 'top': top, 'left': left, 'height': '400px', 'width': '480px', 'z-index': 60, 'background-color': '#fff', 'padding': '0px', 'border': 'solid 4px #277a60' }}).injectInside(document.body);
                        new Element('div', { 'styles': { 'background-color': '#277a60', 'padding': '2px', 'color': '#fff', 'font-weight': 'bold' }}).setText('PURCHASE DECK PLANS').injectInside(this.dialogcontainer);
                        new Element('iframe', { 'frameborder': 'no', 'styles': { 'width': '480px', 'height': '380px', 'border': 'none' }, 'src': 'deckplan.aspx?tag=' + this.tag.ID + '&deck=' + deck.ID }).injectInside(this.dialogcontainer);
                    }.bind(this)
                }}).injectInside(deckutils);
        else
            new Element('img', { 'src': '../images/decks/blank.png', 'styles': { 'height': '55px', 'width': '139px', 'margin': '0px', 'border': 'solid 1px #bbb', 'cursor': 'pointer' }}).injectInside(deckutils);
        
        // navigation
        var decknavbar = $('decknavbar');
        decknavbar ? decknavbar.empty() : decknavbar = new Element('div', { 'id': 'decknavbar', 'styles': { 'clear': 'both', 'background-color': '#277a60', 'height': '18px', 'width': '558px', 'padding': '4px 2px 2px 2px' }}).injectInside(this.container);
        
        if (index == 0)
            new Element('div', { 'styles': { 'float': 'left', 'width': '150px', 'height': '16px' }}).injectInside(decknavbar);
        else
            new Element('a', { 'class': 'whitebold', 'styles': { 'font-size': '10pt' }, 'events': { 'click': function() {
                    this.showDeck(index - 1);
                }.bind(this)}}).setText('◄ PREVIOUS').injectInside(new Element('div', { 'styles': { 'float': 'left', 'width': '150px' }}).injectInside(decknavbar));
        
        if (is_slideshow)
            new Element('a', { 'class': 'whitebold', 'styles': { 'font-size': '10pt' }, 'events': { 'click': function() {
                    this.slideTimer = clearTimeout(this.slideTimer);
                    this.showDeck(this.deckIndex, false);
                }.bind(this)}}).setText('STOP SLIDESHOW').injectInside(new Element('div', { 'styles': { 'float': 'left', 'width': '258px', 'text-align': 'center' }}).injectInside(decknavbar));
        else
            new Element('a', { 'class': 'whitebold', 'styles': { 'font-size': '10pt' }, 'events': { 'click': function() {
                    this.startSlideshow(index + 1);
                }.bind(this)}}).setText('VIEW AS SLIDESHOW').injectInside(new Element('div', { 'styles': { 'float': 'left', 'width': '258px', 'text-align': 'center' }}).injectInside(decknavbar));
            
        if (index >= this.decks.length-1)
            new Element('div', { 'styles': { 'float': 'left', 'width': '150px', 'height': '16px' }}).injectInside(decknavbar);
        else
            new Element('a', { 'class': 'whitebold', 'styles': { 'float': 'right', 'font-size': '10pt' }, 'events': { 'click': function() {
                    this.showDeck(index + 1);
                }.bind(this)}}).setText('NEXT ►').injectInside(new Element('div', { 'styles': { 'float': 'left', 'width': '150px' }}).injectInside(decknavbar));
        
        // options
        var optionbar1 = $('optionbar1');
        optionbar1 ? optionbar1.empty() : optionbar1 = new Element('div', { 'id': 'optionbar1', 'styles': { 'background-color': '#B5AF63', 'height': '18px', 'width': '558px', 'margin': '2px 0 0 0', 'padding': '4px 2px 2px 2px' }}).injectInside(this.container);
        new Element('a', { 'class': 'greenbold', 'styles': { 'float': 'left', 'font-size': '10pt' }, 'events': { 'click': function() {
                this.container.empty();
                this.showThumbnails();
            }.bind(this)}}).setText('◄ BACK TO THUMBNAILS').injectInside(optionbar1);
        new Element('a', { 'class': 'greenbold', 'styles': { 'float': 'right', 'font-size': '10pt' }, 'events': { 'click': function() {
                this.showLargeImage(deck);
            }.bind(this)}}).setText('VIEW IMAGE LARGER').injectInside(optionbar1);
        
                
        // additional photos
        var deckadditionalphotos = $('deckadditionalphotos');
        if (deck.HasAdditionalPhotos) {
            if (!deckadditionalphotos) {
                new Element('div', { 'id': 'deckadditionaltitle', 'styles': { 'height': '18px', 'width': '558px', 'background-color': '#191718', 'color': '#B5AF61', 'font-size': '10pt', 'font-weight': 'bold', 'text-align': 'center', 'padding': '4px 2px 2px 2px', 'border-bottom': 'solid 1px #000', 'margin-top': '2px' }}).setText('MORE PICTURES OF THIS DECK').injectInside(this.container);
                deckadditionalphotos = new Element('div', { 'id': 'deckadditionalphotos', 'styles': { 'height': '80px', 'text-align': 'center', 'margin': '2px 0 0 0' }}).injectInside(this.container);
            }
            this.showAdditionalPhotos(deckadditionalphotos);
        }
        else if (deckadditionalphotos) {
            $('deckadditionaltitle').remove();
            deckadditionalphotos.remove();
        }

        // description
        var deckdescription = $('deckdescription');
        if (deckdescription) {
            // fade out old description
            var position = deckdescription.getPosition();
            var prevdescription = new Element('div', { 'styles': { 'color': '#555', 'position': 'absolute', 'top': position.y + 'px', 'left': position.x + 'px', 'width': '558px', 'padding': '2px' } }).setText(deckdescription.getText()).injectInside(document.body);
            prevdescription.effect('opacity', { 'duration': 2000 }).start(0);
            deckdescription.remove();
        }
        if (deck.Description && deck.Description.length > 0) {
            // fade in new description
            deckdescription = new Element('div', { 'id': 'deckdescription', 'styles': { 'opacity': 0, 'clear': 'both', 'margin': '10px 0 10px 0px', 'width': '558px', 'padding': '2px' }}).setText(deck.Description).injectInside(this.container);
            deckdescription.effect('opacity', { 'duration': 2000}).start(1);
        }
        
        // pre-load next photo
        var ondeck = this.deckIndex+1;
        if (ondeck == this.decks.length) ondeck = 0;
        new Asset.images('../picture.aspx?s=m&id=' + this.decks[ondeck].PictureID);

        // continue slideshow
        if (is_slideshow) {
            this.slideTimer = setTimeout(function() {
                (this.deckIndex >= this.decks.length-1) ? this.showDeck(0) : this.showDeck(parseInt(this.deckIndex)+1, true);
            }.bind(this), 7000);
        }
        else
            this.slideTimer = clearTimeout(this.slideTimer);
    },

    showLargeImage: function(deck) {
        // create background to dim page
        this.backing = new Element('div', { 'styles': { 'position': 'absolute', 'top': 0, 'left': 0, 'height': '100%', 'width': '100%', 'background-color': '#ccc', 'opacity': '0.7', 'z-index': 50 }}).injectInside(document.body);
        // show image
        var img_width = 960; var img_height = 643;
        var top = Math.max(0, (window.getHeight() - img_height - 40) / 2);
        var left = (window.getWidth() - img_width - 4) / 2;
        this.largecontainer = new Element('div', { 'styles': { 'position': 'absolute', 'cursor': 'pointer', 'top': top, 'left': left, 'height': 'auto', 'width': '960px', 'z-index': 60, 'background-color': '#fff', 'padding': '0px', 'border': 'solid 4px #277a60' }}).injectInside(document.body);
        new Drag.Move(this.largecontainer);
        var largetitle = new Element('div', { 'styles': { 'height': '20px', 'width': 'auto', 'background-color': '#277a60', 'padding': '0 0 2px 6px', 'color': '#fff', 'font-weight': 'bold', 'font-size': '12pt' }}).injectInside(this.largecontainer);
        new Element('div', { 'styles': { 'float': 'left' }}).setText('# H' + deck.ID).injectInside(largetitle);
        
        new Element('a', { 'styles': { 'float': 'right', 'margin': '2px 6px 0 0', 'color': '#fff', 'cursor': '#fff' }, 'events': { 'click': function() {
                this.backing.remove();
                this.largecontainer.remove();
            }.bind(this)}}).setText('Click here to return to the Hickory Dickory Decks photo gallery').injectInside(largetitle);
        new Element('img', { 'src': $('deckimage').src.replace('s=m', 's=l'), 'styles': { 'border': 'none' }}).injectInside(this.largecontainer);
    },
        
    startSlideshow: function(index) {
        if (index >= this.decks.length) index = 0;
        this.showDeck(index, true);
    },
    
    closeDialog: function() {
        if (this.backing) this.backing.remove();
        if (this.dialogcontainer) this.dialogcontainer.remove();
    },
    
    showAdditionalPhotos: function(container) {
        var deck = this.decks[this.deckIndex];
        if (!deck.HasAdditionalPhotos) return;
        if (!deck.AdditionalPhotos || deck.AdditionalPhotos.length == 0) {
            var postbody = "deck=" + deck.ID;
            new Ajax("../data/additionalphotos.aspx", { "postBody": postbody, "onSuccess": function(result) {
                    if (result == "none" || result.length == 0)
                        deck.HasAdditionalPhotos = false;
                    else {
                        deck.AdditionalPhotos = new Array();
                        deck.AdditionalPhotos[0] = deck.PictureID;
                        var parts = result.split(',');
                        parts.each(function(p) {
                            deck.AdditionalPhotos[deck.AdditionalPhotos.length] = parseInt(p);
                        });
                        this.showAdditionalPhotos(container);
                    }
                }.bind(this), "onFailure": function() {} }).request();
        }
        else {
            this.scrollAdditionalPhotos(container, 0);
        }
    },
    
    scrollAdditionalPhotos: function(container, index) {
        container.empty();
        
        var deck = this.decks[this.deckIndex];
        var end = Math.min(index + 4, deck.AdditionalPhotos.length);

        // add left scroller
        var scroll_left = new Element('img', { 'src': '../images/decks/left.png', 'styles': { 'border': 'none', 'cursor': 'pointer' }}).injectInside(container);
        if (index > 0) scroll_left.addEvents({
            'mouseover': function() { this.src = '../images/decks/left_ov.png'; },
            'mouseout': function() { this.src = '../images/decks/left.png'; },
            'click': function() { this.scrollAdditionalPhotos(container, index-1);}.bind(this)
        });
        
        // add images        
        for (var i=index; i<end; i++) {
            new Element('img', { 'src': '../picture.aspx?id=' + deck.AdditionalPhotos[i], 'styles': { 'margin': '0 1px 0 1px', 'border': 'none', 'cursor': 'pointer', 'width': '110px', 'height': '74px' }, 'events': {
                    'click': (function(index) { return function() {
                        var el = $('deckimage');
                        if (el) el.src = '../picture.aspx?s=m&id=' + deck.AdditionalPhotos[index];
                    }; })(i)
                }}).injectInside(container);
        }
        
        // add right scroller
        var scroll_right = new Element('img', { 'src': '../images/decks/right.png', 'styles': { 'border': 'none', 'cursor': 'pointer' }}).injectInside(container);
        if (index < deck.AdditionalPhotos.length-4) scroll_right.addEvents({
            'mouseover': function() { this.src = '../images/decks/right_ov.png'; },
            'mouseout': function() { this.src = '../images/decks/right.png'; },
            'click': function() { this.scrollAdditionalPhotos(container, index+1);}.bind(this)
        });
    }
});

function closeDialog() {
    gallery.closeDialog();
}