var galleryOldOnload = window.onContentLoad;
window.onContentLoad = function()
{
    if (typeof galleryOldOnload == 'function')
    {
         galleryOldOnload();
    }
    window.galleryInstance = new gallery();
    galleryInstance.init();
}

gallery = function ()
{
    this.drawings = {};
}

gallery.prototype.init = function()
{
    this.initDrawings();
    this.initVoting();
}


gallery.prototype.initVoting = function()
{
    for (key in this.drawings)
    {
        this.drawings[key].initVoting();
    }
}

gallery.prototype.initDrawings = function()
{
    var drawingBoxes = this.getDrawingBoxes();

    for (var i=0; i<drawingBoxes.length; i++)
    {
        var box = drawingBoxes[i];
        var drawing = new galleryDrawing(box);
        if (!drawing.id)
        {
            continue;
        }
        this.drawings[drawing.id] = drawing;
    }
}

gallery.prototype.getDrawingBoxes = function()
{
    var container = document.getElementById('galleryContent');
    return gallery.getElementsByTagAndClass(container, 'li', 'drawing');
}

galleryDrawing = function (box)
{
    // element references
    this.box = box;
    this.voteBox = null;
    this.votingForms = null;
    this.messageBox = null;

    // properties
    this.rating = null;
    this.clearPreviewTimer = null;

    // constructor action
    if (!this.loadFromBox())
    {
        return;
    }
}

galleryDrawing.prototype.loadFromBox = function()
{
    if (!this.box)
    {
        return false;
    }
    var boxId = this.box.id;
    if (!boxId)
    {
        return false;
    }
    var idParts = boxId.split('_');
    if (idParts.length != 2)
    {
        return false;
    }
    this.id = idParts[1];
    return true;
}

galleryDrawing.prototype.initVoting = function()
{
    var voteBox = this.getVoteBox();
    if (!voteBox)
    {
        return false;
    }

    var votingForms = this.getVotingForms();
    var drawing = this;
    for (formValue in votingForms)
    {
        var form = votingForms[formValue];

        form.onmouseover = function()
        {
            return drawing.showRatingPreview(this.formValue);
        }
        form.onmouseout = function()
        {
            return drawing.clearRatingPreview(true);
        }
        form.onsubmit = function()
        {
            return drawing.submitVote(this);
        }
    }
    this.readRating(voteBox);
}

galleryDrawing.prototype.getVoteBox = function()
{
    if (!this.voteBox)
    {
        var voteBoxId = 'voteBox_'.concat(this.id);
        var voteBox = document.getElementById(voteBoxId);
        if (voteBox)
        {
            this.voteBox = voteBox;
        }
    }
    return this.voteBox;
}

galleryDrawing.prototype.showRatingPreview = function(formValue)
{
    window.clearTimeout(this.clearPreviewTimer);
    var forms = this.getVotingForms();
    if (!forms[formValue])
    {
        return false;
    }

    for (formKey in forms)
    {
        var form = forms[formKey];
        if (!form.baseClassName)
        {
            form.baseClassName = form.className;
        }
        var previewClass = (formKey <= formValue) ? ' activePreview' : ' inactivePreview';
        form.className = form.baseClassName.concat(previewClass);
    }
    return true;
}

galleryDrawing.prototype.clearRatingPreview = function(delay)
{
    if (delay)
    {
        var drawing = this;
        this.clearPreviewTimer = window.setTimeout(function() { drawing.clearRatingPreview(false) }, 300);
        return;
    }

    var forms = this.getVotingForms();
    if (!forms[formValue])
    {
        return false;
    }

    for (formKey in forms)
    {
        var form = forms[formKey];

        if (form.baseClassName)
        {
            form.className = form.baseClassName;
            form.baseClassName = false;
        }
    }
    return true;
}

galleryDrawing.prototype.getRating = function()
{
    if (this.rating === null)
    {
        var voteBox = this.getVoteBox();
        if (!voteBox)
        {
            return null;
        }
        this.readRating(voteBox);
    }
    return this.rating;
}

galleryDrawing.prototype.setRating = function(rating)
{
    // this.rating = rating;
    this.clearRatingPreview(false);
    var forms = this.getVotingForms();
    if (!forms[formValue])
    {
        return false;
    }

    for (formKey in forms)
    {
        var form = forms[formKey];

        var classNameParts = form.className.split(' ');
        var baseClassNameParts = [];
        for (var i=0; i<classNameParts.length; i++)
        {
            if (classNameParts[i] != 'active')
            {
                baseClassNameParts[baseClassNameParts.length] = classNameParts[i];
            }
        }
        if (form.formValue <= rating)
        {
            baseClassNameParts[baseClassNameParts.length] = 'active';
        }
        var baseClassName = baseClassNameParts.join(' ');
        form.className = baseClassName;
    }
}

galleryDrawing.prototype.readRating = function(voteBox)
{
    // scan through voting forms, find the largest vote that is marked as active
    var votingForms = this.getVotingForms();
    var currentHighestRating = 0;
    for (formValue in votingForms)
    {
        var form = votingForms[formValue];
        if (
            (formValue < currentHighestRating) || (formValue < 1)
        )
        {
            continue;
        }
        // formValue >= currentHighestRating. check wether it is active

        if (gallery.hasClass(form, 'active'))
        {
            currentHighestRating = formValue;
        }
    }
    this.rating = currentHighestRating;
}

galleryDrawing.prototype.getFormValue = function(form)
{
    return parseInt(form.vote.value);
}

galleryDrawing.prototype.getVotingForms = function()
{
    if (!this.votingForms)
    {
        var voteBox = this.getVoteBox();
        if (!voteBox)
        {
            return null;
        }
        this.votingForms = {};

        var forms = gallery.getElementsByTagAndClass(voteBox, 'form', 'votingForm');
        var i=0;
        var form = null;
        while (form = forms[i])
        {
            i++;
            var formValue = this.getFormValue(form);
            form.formValue = formValue;
            this.votingForms[formValue] = form;
        }
    }
    return this.votingForms;
}

galleryDrawing.prototype.submitVote = function( form )
{
    var drawing = this;
    Blocks.submitFormAsBlock (
        form,
        'vote',
        function(xmlhttp, params)
        {
            drawing.processVoteResponse( xmlhttp, params );
        },
        null
    );
    return false;
}
galleryDrawing.prototype.processVoteResponse = function (xmlhttp, params)
{
    var text = xmlhttp.responseText;
    textParts = text.split('|');

    if (textParts.length != 2)
    {
        return false;
    }
    var newRating = textParts[0];
    var message = textParts[1];

    this.setRating( newRating );
    this.showMessage( message );

}
galleryDrawing.prototype.showMessage = function(message)
{
    var messageBox = this.getMessageBox();
    if (!messageBox)
    {
        return false;
    }
    messageBox.innerHTML = message;
    messageBox.style.display = 'block';
    var drawing = this;
    window.setTimeout(function(){drawing.hideMessageBox();}, 7000);

    return true;
}
galleryDrawing.prototype.hideMessageBox = function()
{
    var messageBox = this.getMessageBox();
    if (!messageBox)
    {
        return false;
    }
    messageBox.style.display = 'none';
}

galleryDrawing.prototype.getMessageBox = function(message)
{
    if (!this.messageBox)
    {
        var thumbBoxes = gallery.getElementsByTagAndClass( this.box, 'div', 'thumbBox');
        if (thumbBoxes.length != 1)
        {
            return null;
        }
        var thumbBox = thumbBoxes[0];

        var messageBox = document.createElement('div');
        messageBox.className = 'messageBox';
        thumbBox.appendChild( messageBox );
        this.messageBox =  messageBox;
    }
    return this.messageBox;
}

// utility functions
gallery.hasClass = function(el, className)
{
    var elementClassName = ' '.concat(el.className, ' ');
    if (elementClassName.indexOf(' '.concat(className, ' ')) == -1)
    {
        return false;
    }
    return true;
}
gallery.getElementsByTagAndClass = function(container, tagName, className)
{
    if (!container)
    {
        return false;
    }
    var elements = container.getElementsByTagName(tagName);
    var i = 0;
    var element = null;
    var matchingElements = [];
    var elementClassName = '';
    var testClassName = ' '.concat(className, ' ');
    while (element = elements[i])
    {
        i++;
        elementClassName = ' '.concat(element.className, ' ');
        if (elementClassName.indexOf(testClassName) == -1)
        {
            continue;
        }
        matchingElements[matchingElements.length] = element;
    }
    return matchingElements;
}