/* js for www.1000felder.de               */
/*                                        */
/* author:	click solutions GmbH          */
/*          Thomas Langemann              */
/*                                        */





var maxSelectedSquares = 40;
var medals = [1,2,3];






Array.prototype.removeByValue = function(val) {
    for(var i=0; i<this.length; i++) {
        if(this[i] == val) {
            this.splice(i, 1);
            break;
        }
    }
}





function rank(squareCount){
    if (0 == squareCount) return null;
    if (medals[2] <= squareCount) return 'Gold';
    if (medals[1] <= squareCount) return 'Silber';
    if (medals[0] <= squareCount) return 'Bronze';
}

function giftsCSS(squareCount){
    if (0 == squareCount) return '';
    if (medals[2] <= squareCount) return '#gifts li.bronze, #gifts li.silver, #gifts li.gold';
    if (medals[1] <= squareCount) return '#gifts li.bronze, #gifts li.silver';
    if (medals[0] <= squareCount) return '#gifts li.bronze';
}

function squareCSS(squareCount){
    if (0 == squareCount) return '';
    if (medals[2] <= squareCount) return 'gold';
    if (medals[1] <= squareCount) return 'silver';
    if (medals[0] <= squareCount) return 'bronze';
}


function updateData(){
    
    var squareCount = squares.selectedSquares.length;
    if (squareCount == 0) {
        $('#no-choice').show();
        $('#some-choice').hide();
    } 
    else {
        $('#no-choice').hide();
        $('#some-choice').show();
    }
    
    $('#square-count').html(squareCount);
    $('#square-title').html(squareCount == 1 ? 'Feld' : 'Felder');
    $('#sum').html(squareCount*25);
    $('#rank').html(rank(squareCount));
    $('#gifts li').removeClass('checked');
    $(giftsCSS(squareCount)).addClass('checked');
    $('#field .background-square.selected').removeClass('gold silver bronze').addClass(squareCSS(squareCount));
    $('#squares-input').val(squares.selectedSquares.join(','));
       
}


function markInvalidFormField(){
    if ($(this).val() == ''){
        $('label[for="'+$(this).attr('name')+'"]').addClass('invalid');
        $('#contact-form-text').hide();
        $('#contact-form-invalid-text').show();
    }
    else {
        $('label[for="'+$(this).attr('name')+'"]').removeClass('invalid');
        if($('#sidenotes form label.invalid').size() == 0){
            $('#contact-form-text').show();
            $('#contact-form-invalid-text').hide();
        }
    }
}


function validateForm(){
    var valid = true;
    $('input.mandatory').each(function(){
        if (!validateFormField(this))
            valid = false;
    });
    return valid;
}

function validateFormField(field){
    var element = $('input[name="'+field+'"]');
    if ($(field).val() != '')
        return true;
    else {
        markInvalidFormField.call(field);
        return false;
    }
}

function sidebarShow(view){
    $('.tab-content').hide();
    $('#'+view).show();
}







var stateChart = {    

    state: '',
    
    handleEvent: function(event,parameter){
        var state = this.state;
        if (this[state] && this[state][event] && typeof this[state][event] == 'function')
            this[state][event](parameter);
        else {
            if (this[event] && typeof this[event] == 'function')
                this[event](parameter);
        }
    },
    
    goToState: function(state){
        var oldState = this.state;
        
        if (oldState == state) return;
        if (!this[state]) return;
        
        if (oldState && this[oldState].exitState && typeof this[oldState].exitState == 'function')
            this[oldState].exitState();
        
        this.state = state;
        
        if (this[state].enterState && typeof this[state].enterState == 'function')
            this[state].enterState();
    },
    

    showCourseDetails: function(){
        $('#course-details').show();
    },
    
    hideCourseDetails: function(){
        $('#course-details').hide();
    },
    
    hideMaxSelectionReached: function(){
        $('#max-selection-reached').hide()
    },
    
    showSupporters: function(){
        stateChart.goToState('supporters');
    },


    supporters: {
        
        enterState: function(){
            sidebarShow('supporters');
            $('#all-supporters').hide();
            $('#sidenotes-navi').removeClass('bySquares');
            $('#field').removeClass('show-reserved').addClass('show-sponsors');
        },
        
        clickSquare: function(id){
            squares.selectSquare(id);
            stateChart.goToState('bySquares');
        },
        
        bySquares: function(){
            stateChart.goToState('bySquares');
        },
        
        showAllSupporters: function(){
            stateChart.goToState('allSupporters');
        }
        
    },
    
    
    allSupporters: {
        enterState: function(){
            sidebarShow('supporters');
            $('#supporters').hide();
            $('#all-supporters').show();
            $('#sidenotes-navi').removeClass('bySquares');
            $('#field').removeClass('show-reserved').addClass('show-sponsors');
        },
        
        clickSquare: function(id){
            squares.selectSquare(id);
            stateChart.goToState('bySquares');
        },
        
        bySquares: function(){
            stateChart.goToState('bySquares');
        }
        
    },
    

    bySquares: {
        
        enterState: function(){
            sidebarShow('buy-squares');
            $('#sidenotes-navi').addClass('bySquares');
            $('#field').removeClass('show-sponsors').addClass('show-reserved');
        },
        
        clickSquare: function(id){
            squares.selectSquare(id);
        },
        
        goToContactForm: function(){
            stateChart.goToState('contactForm');
        }
        
    },
    
    
    contactForm: {
        enterState: function(){
            sidebarShow('enter-contact-info');
        },
        
        clickSquare: function(id){
            squares.selectSquare(id);
            stateChart.goToState('bySquares');
        },
        
        submitContactForm: function(){
            
            var formIsValid = validateForm();
            
            if (formIsValid){
                var url = "conterior/conterior/index.php";
            	var query = {
            		identifier : 'saveSponsor',
            		value : $('form#contact-form').serialize(),
            		exec : "custajax"
            	};

                stateChart.goToState('waitingForDidSubmitForm');

            	$.post(url, query, function(reply) {
            	    stateChart.handleEvent('didSubmitForm',reply);
            	});
            }
            
            else {
                $('#contact-form-text').hide();
                $('#contact-form-invalid-text').show();
            }
            
        }
    },
        
    
    waitingForDidSubmitForm: {
        enterState: function(){
            sidebarShow('waiting-for-reply');
            $('#field').removeClass('show-reserved').addClass('show-sponsors');
            squares.deselectAllSquares();
        },
        
        didSubmitForm: function(reply){
            if (reply.success)
                stateChart.goToState('thankYou');
            else {
                stateChart.goToState('error');
                stateChart.handleEvent('showErrorMessage',reply.error);
            }
                
        }
    },
    
    
    error: {
        enterState: function(){
            sidebarShow('error');
        },
        
        showErrorMessage: function(message){
            $('#error-message').html(message);
        }
    },
    
    
    thankYou: {
        enterState: function(){
            sidebarShow('thank-you');
        },
        
        clickSquare: function(id){
            squares.selectSquare(id);
            stateChart.goToState('bySquares');
        }
    }

};





var squares = {
    
    selectedSquares: [],
    
    selectSquare: function(id){
        if ($('#background-square-'+id+'.reserved').size() == 0){
            if (jQuery.inArray(id, this.selectedSquares) == -1){
                if (this.selectedSquares.length >= maxSelectedSquares) {
                    $('#max-selection-reached').show();
                    return;
                }
                this.selectedSquares.push(id);
                $('#background-square-'+id+', #square-'+id).addClass('selected');
            }
            else {
                this.selectedSquares.removeByValue(id);
                $('#background-square-'+id+', #square-'+id).removeClass('selected');
            }
            updateData();
        }
    },
    
    deselectAllSquares: function(){
        this.selectedSquares = [];
        $('.square.selected div.sponsor-popup').html('<div class="title">Dieses Feld ist reserviert.</div><p>Bitte w&auml;hlen Sie ein anderes Feld.</p>');
        $('.square.selected').removeClass('free').addClass('reserved');
        $('.background-square.selected').addClass('reserved');
        $('.background-square, .square').removeClass('selected');
        updateData();
    }
};




$(document).ready(function(){
    $('#no-script').hide();
    stateChart.goToState('supporters');
    $('input.mandatory').blur(markInvalidFormField);
    $('#course-details').click(function(){stateChart.handleEvent('hideCourseDetails')});
});