/*jslint onevar: false*/
/*global $, document, setTimeout, Image, navigator*/

$(document).ready(function () {
    //Unobtrusive. If you don't have javascript show contact details
    $('#contact-details').hide();
    $('#contact').click(function (e) {
        $('#contact-details').fadeIn('slow');
        e.preventDefault();
    });
    
    //Unobtrusive. We want hide-me-soon to be shown if no javascript is on
                      
    $('.hide-me-soon').addClass('hidden');
    
    function createWaitingListForm() {
        var jsonRpcUrl = document.location.protocol + "//" + document.location.host + "/functions/",
        nr = 0,
        disable = function () {
            $('#try-button').attr("disabled", "yes");            
        },
        enable = function () {
            $('#try-button').removeAttr("disabled");            
        },
        submitClick = function () {
            var email = $('#e-mail').val();
            nr = nr + 1;
            var methodCall = {
                method: "waitinglist",
                params: [email],
                id: nr                
            };
            var mcJson = JSON.stringify(methodCall);
            var done = function (response) {
                if (response) {
                    var jsonRpcResponse = JSON.parse(response);
                    $('#response-message').html(jsonRpcResponse.result);
                }
            };
            if ($.trim(email) !== "") {
                disable();
                $.post(jsonRpcUrl, {json: mcJson}, done);
            }
            return false;
        },
        keyup = function () {
            var email = $('#e-mail').val();
            if ($.trim(email) !== "") {
                enable();
            } else {
                disable();
            }
        };
        $('#place-for-waiting-list').html(
            '<form id="waiting-list">' + 
            '  <input id="e-mail" type="text" name="email" value="" />' + 
            '  <input id="try-button" type="submit" disabled="" value="I want to try" />' +
            '  <img id="in-progress" src="st/img/sp/inprogress-4.gif"/>' + 
            '</form>' +
            '<div id="response-message" class="emphi"></div>');
        $('#in-progress').css({visibility: "hidden"});
        $('#try-button').ajaxComplete(function () {
            $('#in-progress').css({visibility: "hidden"});
            enable();
        });
        $('#response-message').ajaxStart(function () {
            $('#in-progress').css({visibility: "visible"});                                             
            $(this).html("");
        }).ajaxError(function () {
            $(this).html("An unexpected error ocurred.");
        });
        $('#try-button').click(submitClick);
        var defaultText = "Write your email-adress.";
        $('#e-mail').val(defaultText).addClass('quiet').focus(function () {
            if ($(this).val() === defaultText) {
                $(this).val("").removeClass('quiet');
            }
            $('#response-message').empty();
        }).keyup(keyup);
    }
    createWaitingListForm();
                      
    var total = 52;
    var usedPics = 24;
                      
    function showSomeText() {
        var elements = $('.hidden');
        if (elements.length === 0) {
            return;
        }
        var firstOne = elements.eq(0);
        firstOne.removeClass('hidden').addClass('visible');
        setTimeout(showSomeText, 700);
    }
                      
    var counter = 0;
    function hideImage() {
        var element = $(this);
        element.attr('className', 'disappear');
        counter = counter + 1;
        if (counter === usedPics - 2) {
            counter = 0;
            $('#random-pictures').hide();
            setTimeout(showSomeText, 500);        
        }
    }
    function startAutoHideImages() {
        var hit = $('.shown');
        if (hit.length !== 0) {
            var nr = Math.floor(Math.random() * hit.length);
            hit.eq(nr).each(hideImage);
            setTimeout(startAutoHideImages, 300);
        }
    }
                      
    function addImages($where, options) {
        var used = {
        };
        for (var i = usedPics; i > 0 ; i = i - 1) {
            var id;
            var neverEndless = false;
            id = Math.floor(Math.random() * options.randomNr);
            while (used[id]) {
                id = id + 1;
                if (id >= options.randomNr) {
                    if (neverEndless) {
                        break;
                    }
                    neverEndless = true;
                    id = 0;
                }
            }
            used[id] = true;
            id = id + options.randomBase;

            var src = options.fileStart + id + options.fileEnd;
            var el = $('<img/>').css({
                zIndex: id
            }).attr('src', src);
            el.addClass("many-pic").addClass('shown').mouseover(hideImage).appendTo($where);
        }
    }
                      
    var maybeFixIe6 = function () {
        if ($.fn.supersleight) {
            $('#random-pictures').supersleight({shim: '/st/img/x.gif'});
        }
    };
                        
    //Move in from the page
    addImages($('#random-pictures'), {
        fileStart: "st/img/sp/stixpic-",
        fileEnd: ".png",
        randomBase: 1,
        randomNr: usedPics
    });
    maybeFixIe6();
    
    setTimeout(startAutoHideImages, 4000);
});