var TwuixeUI = function() {
    var $T = function(tag, clazz) {
            var t = $("<"+tag+"></"+tag+">");
            clazz && t.attr('class', clazz);
            return t;
    }
    
    var $I = function(src, clazz) {
            var img = $("<img/>");
            img.attr('src', src);
            clazz && img.attr('class', clazz);
            return img;
    }
    
    var $A = function(url, text, clazz) {
        var a = $T('a');
        a.attr('href', url);
        clazz && a.attr('class', clazz);
        text && a.html(text);
        return a;
    }
        
    var stylizeButton = function(button) {
        button.hover(
            function(){ 
                $(this).addClass("ui-state-hover");
            },
            function(){
                $(this).removeClass("ui-state-hover");
            }
        );
        button.mousedown(function(){
            $(this).addClass("ui-state-active"); 
        });
        button.mouseup(function(){
            $(this).removeClass("ui-state-active");
        });
    }
     
    var updateTips = function updateTips(t) {
        $("#validateTips").text(t).effect("highlight",{},1500);
    }
        
    var checkLength = function(o,n,min,max) {
        if ( o.val().length > max || o.val().length < min ) {
	    o.addClass('ui-state-error');
	    updateTips("Length of " + n + " must be between "+min+" and "+max+".");
	    return false;
	} else {
	    return true;
	}
    }
     
    var checkRegexp = function(o,regexp,n) {
        if ( !( regexp.test( o.val() ) ) ) {
                o.addClass('ui-state-error');
                updateTips(n);
                return false;
        } else {
                return true;
        }
    }
    
    var checkUser = function(username, password) {
        var valid = true;
        valid = valid && checkLength(username,"username",3,16);
        valid = valid && checkLength(password,"password",5,16);
        valid = valid && checkRegexp(username,/^[a-z]([0-9a-z_])+$/i,"Username may consist of a-z, 0-9, underscores, begin with a letter.");
        valid = valid && checkRegexp(password,/^([0-9a-zA-Z])+$/,"Password field only allow : a-z 0-9");
        return valid;
    }

    var createUser = function(username, password) {
        var valid = checkUser(username, password);
        if (valid) {
            $(this).dialog('close');
            var user = {username: username.val(), password: password.val()};
            TwuixeDB.createUser(username.val(), password.val());
            buildUserRecord(username.val(), password.val());
            var container = $("#accordion");
            buildNode(container, user);
        }
    }
    
    var getUsername = function() {
        return $("#username");
    }
        
    var getPassword = function() {
        return $("#password");
    }
        
    var buildUserRecord = function(username, password) {
        var allFields = $([]).add(getUsername()).add(getPassword());
        var button_id = 'edit-'+username;
        var user_record_id = 'user-' + username;
        var edit_button = "<button id='"+button_id+"' class='ui-button ui-state-default ui-corner-all'>Edit</button>";
        var users_table = $('#users tbody');
        users_table.append("<tr id='" + user_record_id + "'>" +
            '<td>' + username + '</td>' + 
            '<td>' + edit_button + '</td>' +
        '</tr>');
        
        var button = $('#'+button_id);
        button.click(function() {
            var username_field = getUsername();
            var password_field = getPassword();
            username_field.val(username);
            password_field.val(password);
            var user_dialog = $('#create-user-dialog');
            user_dialog.dialog('option', 'title', 'Edit User');
            user_dialog.dialog('option', 'buttons', {
                'Delete User': function() {
                    allFields.removeClass('ui-state-error');
                    TwuixeDB.deleteUser(username_field.val());
                    var user_block = $('#'+user_record_id);
                    user_block.fadeOut('slow', function() {
                        user_block.remove();
                    });
                    $(this).dialog('close');
                },
                
                'Edit User': function() {
                    allFields.removeClass('ui-state-error');
                    var valid = checkUser(username, password);
                    if(valid) {
                        $(this).dialog('close');
                        TwuixeDB.editUser(username.val(), password.val());
                    }
                },
                
                Cancel: function() {
                    $(this).dialog('close');
                }
            });
            user_dialog.dialog('open');
        });
        
        stylizeButton(button);
    }
    
    var setCounterClass = function(len, counter) {
        if(len >= 20) {
            counter.hasClass('counter') || counter.addClass('counter');
            counter.hasClass('counter-warn') && counter.removeClass('counter-warn');
            counter.hasClass('counter-error') && counter.removeClass('counter-error');
        }else if(len < 20 && len >= 10) {
            counter.hasClass('counter-warn') || counter.addClass('counter-warn');
            counter.hasClass('counter') && counter.removeClass('counter');
            counter.hasClass('counter-error') && counter.removeClass('counter-error');                
        }else {
            counter.hasClass('counter-error') || counter.addClass('counter-error');
            counter.hasClass('counter') && counter.removeClass('counter');
            counter.hasClass('counter-warn') && counter.removeClass('counter-warn');
        }
    }

    // 
    var buildNode = function(container, user) {
        // build user header
        var title_block = $T('h3');
        var title_link = $A('#', user.username);
        title_block.append(title_link);
        container.append(title_block);
        
        var body_block = $T('div');
        
        // Build counter
        var count_block = $T('div', 'counter');
        count_block.attr('id', 'counter-'+user.username);
        count_block.html('140');
        body_block.append(count_block);
        
        // build user input form
        var form_block = $T('form');
        form_block.attr('id', 'submit-'+user.username);
        
        // build status text area
        var text_block = $T('textarea');
        text_block.attr('rows', 2);
        text_block.attr('cols', 60);
        text_block.attr('id', 'status-'+user.username);
        text_block.attr('name', 'status');
        text_block.keyup(function() {
            var len = 140-text_block.val().length;
            count_block.html(len);
            setCounterClass(len, count_block);
        });
        form_block.append(text_block);
        $(text_block).bind('keydown', 'ctrl+t', function() {
            var tinyurl_dialog = $('#tiny-url-dialog');
            tinyurl_dialog.dialog('option', 'buttons', {
                'TinyURL': function() {
                    var tinyurl = $('#tiny-url-field');
                    $(this).dialog('close');
                    Twuixe.getTinyurl(user, tinyurl.val());
                },
                  
                Cancel: function() {
                    $(this).dialog('close');
                }
            });
            tinyurl_dialog.dialog('open');
        });

        // build submit button
        var button_bock = $T('div');
        var button = $('<input/>');
        button.attr('type', 'button');
        button.attr('value', 'Submit '+user.username);
        button.attr('name', 'submit '+user.username);
        button.attr('id', 'update-submit-'+user.username);
        button.attr('class', 'ui-button ui-state-default ui-corner-all');
        stylizeButton(button);
        button.click(function() {
            var status = $('#status-'+user.username);
            var status_value = $('#status-'+user.username).val();
            if(status_value.length < 140 && status_value.length >= 0) {
                Twuixe.setStatus(user, status_value);
                //alert('Status: '+status_value);
                status.val('');
                count_block.html('140');
                setCounterClass(140, count_block);
            }
        });
        button_bock.append(button);
        form_block.append(button_bock);
        body_block.append(form_block);
        
        var status_update = $T('div');
        status_update.attr('id', 'upate-status-'+user.username);
        body_block.append(status_update);
        
        // build user timeline
        var timeline = $T('ol', 'statuses');
        timeline.attr('id', 'timeline-'+user.username);
        body_block.append(timeline);
        container.append(body_block);
    }

    return {
        updateStatus: function() {
            
        },
        create: function() {
            var username = $("#username"),
                password = $("#password"),
                allFields = $([]).add(username).add(password);
		
            $("#create-user-dialog").dialog({
                bgiframe: true,
                autoOpen: false,
                height: 300,
                modal: true,
                close: function() {
		    allFields.val('').removeClass('ui-state-error');
		}
            });
            
            var gears_dialog = $('#install-gears-dialog');
            gears_dialog.dialog({
                bgiframe: true,
                autoOpen: false,
                height: 200,
                modal: true,
                buttons: {
                    'Install Gears': function() {
                        location.href = 'http://gears.google.com/';
                    },
                    'Cancel': function() {
                        gears_dialog.dialog('close');
                    }
                }
            });
            
            var tinyurl_dialog = $('#tiny-url-dialog');
            tinyurl_dialog.dialog({
                bgiframe: true,
                autoOpen: false,
                height: 200,
                modal: true
            });
             
            var container = $("#accordion");
            var users = TwuixeDB.getUsers();
            for(var i in users) {
                var user = users[i];
                buildNode(container, user);
                buildUserRecord(user.username, user.password);
            }
             
            container.accordion();
            var tab_block = $('#tabs');
             
            var create_user_button = $('#create-user');
            create_user_button.click(function() {
                var user_dialog = $('#create-user-dialog');
                user_dialog.dialog('option', 'title', 'Create User');
                user_dialog.dialog('option', 'buttons', {
                    'Create User': function() {
                        allFields.removeClass('ui-state-error');
                        createUser(username, password);
                        $(this).dialog('close');
		    },
                      
                    Cancel: function() {
			$(this).dialog('close');
		    }
                });
                user_dialog.dialog('open');
	    });
	    
	    var create_desktop_button = $('#create-shortcut');
	    create_desktop_button.click(function() {
		Twuixe.createShortcut();
	    });
	    
            tab_block.tabs();
            tab_block.bind('tabsselect', function(event, ui){
                if('tab-updates' == ui.panel.id && TwuixeDB.getUsers().length){
                    // HACKISH way to redraw updates tab for new users
                    location.reload();
                }
            });
            if(users.length == 0) {
                tab_block.tabs('select', '#tab-about');
            }
            if(!TwuixeDB.hasGears()) {
                gears_dialog.dialog('open');  
            }
        }
    }
}();