(function(){

    var fitImageToContainer = function(container, img){
       var ic = img.getCoordinates();
       var fc = container.getCoordinates();
       var fx = ic.width / fc.width;
       var fy = ic.height / fc.height;
       var f = fx < fy ? fx : fy;
       var w = img.width / f;
       var h = img.height / f;
       img.setStyles({
           width: w,
           height: h
       });
       return img;  
    };

    var sizeBackground = function(){
        var cont = document.id(document.body);
        var bgimg = document.id('background');

        if(bgimg.complete){
            fitImageToContainer(cont, bgimg)
            bgimg.fade('show');
        }
        else{
            bgimg.addEvent('load',
                function(){ fitImageToContainer(cont, bgimg); 
                bgimg.fade('show');
            })
        }
    };

    var initSearch = function(){
        // toggle search box;
        var search = document.id('search');
        search.set('morph', {duration: 'short',
            onComplete: function(){
                console.log('hela');
                search.toggleClass('exposed');
            }
        });
        var startWidth = search.getCoordinates().width;

        var toggle = search.getElement('.image');
        toggle.addEvent('click', function(evt){
            evt.stop();
            if(search.hasClass('exposed')){
                search.morph('.hidden');
            }
            else{
                search.morph('.exposed');
            }
        })

        var input = search.getElement('.input');
        input.addEvent('keydown', function(evt){
            if(evt.key === 'enter') search.submit();
        });
        input.addEvent('click', function(evt){
            if(input.getProperty('value') == 'search'){
                input.setProperty('value', '');
            }
        });
        
    };

    var init = function(){
        sizeBackground();
        initSearch();
    };

    window.addEvent('domready', init);
    window.addEvent('resize', init);

 })()