$(document).ready(function(){
       
    //creates full screen textarea for user input
    $(".focus_big").focus(function() {       
        var original;
        var save ;
        var overlay;
        var textarea;
        var cancel;
        var undo;
        var text;
        var lang_texts;
        var form_holder;
        //keep track of what is going to be changed
        original = this;
        text = $(this).val();
        
        //retrieve multilingual values
        
        
        //create transparent overlay
        overlay = document.createElement('div');
        $(overlay).css({
            position:"absolute",
            "z-index":200,
            left:0,//(  - $('.overlayBox').width() )/2,
            top:$(window).scrollTop(),//(  - $('.overlayBox').height() )/2 -20,
            width: $(window).width(),
            height: $(window).height(),
            'background-color':'black',
            opacity: '0.5'
        });
    
        //create holder for elements
        form_holder = document.createElement('div');
        $(form_holder).css({
            position:"absolute",
            "z-index":202,
            left:0,//(  - $('.overlayBox').width() )/2,
            top:$(window).scrollTop(),//(  - $('.overlayBox').height() )/2 -20,
            width: $(window).width(),
            height: $(window).height(),
            'background-color':'transparent'
        });
        
        //create large textarea
        textarea = document.createElement('textarea');
        $(textarea).text(text);        
        $(textarea).css({
            width:$(window).width()*0.6,
            height:$(window).height()*0.8,
            'left':$(window).width()*0.2,
            'top':$(window).height()*0.1,
            position:'absolute',
            background:'#f8f8f8',
            border:'1px solid #020202'
        });
        
        //preselect text
        $(textarea).focus(function() {
            if(this.value == $(original).text())//get by ajax or hidden variable
            {
                this.select();
            }
        });


        //create buttons
        buttons = document.createElement('div');        
        $(buttons).addClass("overlay_buttons").css({
            position:"absolute",
            width: $(window).width()*0.2,
            bottom:$(window).height()*0.1
        });;
        
        save = document.createElement('input');
        $(save).attr({
           type: "button",
           value: $('#save').val() //will need to get via ajax from text_texts, or from hidden content in page.
        }).css({width:'45%'});
        
        cancel = document.createElement('input');
        $(cancel).attr({
           type: "button",
           value: $('#cancel').val() //will need to get via ajax from text_texts, or from hidden content in page.
        }).css({width:'45%'});
        
        undo = document.createElement('input');
        $(undo).attr({
           type: "button",
           value: $('#undo').val() //will need to get via ajax from text_texts, or from hidden content in page.
        }).css({width:'93%'});
    
        //add elements to document
        $(buttons).append(undo);
        $(buttons).append(cancel);
        $(buttons).append(save);
        $(form_holder).append(buttons);
        $(form_holder).append(textarea);
        $("body").append(overlay);
        $("body").append(form_holder); 
        if(/MSIE 6/i.test(navigator.userAgent))
        {
            $('select').css({visibility:'hidden'});
        }
        $(textarea).focus();  
        //disable  clicks on anything else. but how?
        $('*').click(disable);
        $('*').focus(disable);
        $('*').dblclick(disable);
        $('*').select(disable);
        //make sure stays visible even when scrolling
        $(window).scroll(function () { 
             $(overlay).css({
                 top:$(window).scrollTop(),
                 height:$(window).height()
             });
             $(textarea).css({                
                'top':$(window).height()*0.1,
                height:$(window).height()*0.8
             });
             $(form_holder).css({
                'top':$(window).scrollTop(),
                height:$(window).height()
            });                 
        });
    
        //handle button clicks
        $(cancel).click(function() {
            $(overlay).remove();
            $(form_holder).remove();
            if(/MSIE 6/i.test(navigator.userAgent))
            {
                $('select').css({visibility:'visible'});
            }
            $('*').unbind('click',disable);
            $('*').unbind('focus',disable);
            $('*').unbind('dblclick',disable);
            $('*').unbind('select',disable);
        });   
        $(save).click(function() {
            $(original).val($(textarea).val());
            $(overlay).remove();
            $(form_holder).remove();
            if(/MSIE 6/i.test(navigator.userAgent))
            {
                $('select').css({visibility:'visible'});
            }
            $('*').unbind('click',disable);
            $('*').unbind('focus',disable);
            $('*').unbind('dblclick',disable);
            $('*').unbind('select',disable);
        });
        
        $(undo).click(function() {
            $(textarea).val(text);
            $(textarea).focus(function() {
                if(this.value == $(original).text())//get from hidden
                {
                    this.select();
                }
            });
            $(textarea).focus(); 
        }); 
        
        function disable() {
            if(((this !== textarea) &&(this !== save ))&&((this !== undo) &&(this !== cancel )))
                {
                    return false;
                }
        };       
    });
});