// Set global to control override for the display name
var display_name_overridden;
var url = "http://" + host + path;

// Set the names of the categories, based on their id's
var label_categories = Array();
label_categories['portal'] = "Portal";
label_categories['ebusiness'] = "eBusiness";
label_categories['blog'] = "Blog";
label_categories['profile'] = "Profile";

// Map links to labels
var label_links = Array();
label_links['link_portal'] = "portal";
label_links['link_ebusiness'] = "ebusiness";
label_links['link_blog'] = "blog";
label_links['link_profile'] = "profile";

$(document).ready( function(){

    // Make help bubble appear
    $('.help_icon').click( function(){
        $( '#' + $(this).attr( 'id' ) + '_bubble' ).fadeIn();
    });

    // Set the preview logo display name
    $('#logo_preview').html( 'Flag Name' );

    // Control unhiding the approriate logo control mechanism
    $('#have_logo').click( function(){

        if ( $('#create_logo').css( 'display' ) == "block" ){
            $('#create_logo').slideUp();
        }

        if ( $('#upload_logo').css( 'display' ) == "none" ){
            $('#upload_logo').slideDown();

            $('#have_logo').css( 'font-weight','900' );
            $('#have_logo').css( 'color','#054088' );
            $('#no_logo').css( 'font-weight','500' );
            $('#no_logo').css( 'color','#96A2AF' );
        }

        if ( $('#logo_preview:hidden') ){
            $('#logo_preview').css({ 'display': 'table-cell' }).slideDown( 500 );
        }
    });

    $('#no_logo').click( function(){

        if ( $('#upload_logo').css( 'display' ) == "block" ){
            $('#upload_logo').slideUp();
        }

        if ( $('#create_logo').css( 'display' ) == "none" ){


            if ( $('#display_name_input').attr( 'value' ) ){
                $('#logo_preview').html( $('#display_name_input').attr( 'value' ) );
            }
            else if ( $('#website_name_input').attr( 'value' ) ){
                $('#logo_preview').html( $('#website_name_input').attr( 'value' ) );
            }
            else {
                $('#logo_preview').html( 'Flag Name' );
            }

            if ( !$('#website_name_input').attr( 'value' ) || !$('#display_name_input').attr( 'value' ) ){
                $('#logo_preview').html( 'Flag Name' );
            }

            $('#create_logo').slideDown();
            $('#no_logo').css( 'font-weight','900' );
            $('#no_logo').css( 'color','#054088' );
            $('#have_logo').css( 'font-weight','500' );
            $('#have_logo').css( 'color','#96A2AF' );
        }

        if ( $('#logo_preview:hidden') ){
            $('#logo_preview').css({ 'display': 'table-cell' }).slideDown( 500 );
        }
    });

    // Set the override if the key is pressed in display name,
    // so the website name can not affect the display name of the flag
    $('#display_name_input').keyup( function(){
        display_name_overridden = true;
        $('#logo_preview').html( $('#display_name_input').attr( 'value' ) );
    });

    // Control for background color
    $('#background_color').click( function(){
        link_color_palate();

        // Respond to a swatch click
        $('.swatch').click( function(){
            $('#logo_preview').css( 'background', 'url()' );
            $('#logo_preview').css( 'background-color', $(this).css( 'background-color' ) );
            $('#color_palate_dialog').dialog( 'close' );
            $('.swatch').unbind();
        });
    });

    // Control font color
    $('#font_color').click( function(){
        link_color_palate();

        // Respond to a swatch click
        $('.swatch').click( function(){
            $('#logo_preview').css( 'color', $(this).css( 'background-color' ) );
            $('#color_palate_dialog').dialog( 'close' );
            $('.swatch').unbind();
        });
    });

    // Control bold, talic and size
    $('#bold').toggle( function(){
        $('#logo_preview').css( 'font-weight', '900' );
        if ( $('#logo_preview').outerHeight() > 60 ){
            $('#logo_preview').css( 'font-weight', '500' );
        }
    }, function(){
        $('#logo_preview').css( 'font-weight', '500' );
    });

    $('#italic').toggle( function(){
        $('#logo_preview').css( 'font-style', 'italic' );
    }, function(){
        $('#logo_preview').css( 'font-style', 'normal' );
    });

    $('#larger').click( function(){
        $('#logo_preview').css( 'font-size', ( parseFloat( $('#logo_preview').css( 'font-size' ), 10 ) +2 ) );
        if ( $('#logo_preview').outerHeight() > 60 ){
            $('#logo_preview').css( 'font-size', ( parseFloat( $('#logo_preview').css( 'font-size' ), 10 ) -2 ) );
        }
    });

    $('#smaller').click( function(){
        $('#logo_preview').css( 'font-size', ( parseFloat( $('#logo_preview').css( 'font-size' ), 10 ) -2 ) );
        if ( parseFloat( $('#logo_preview').css( 'font-size' ), 10 ) < 10 ){
            $('#logo_preview').css( 'font-size', ( parseFloat( $('#logo_preview').css( 'font-size' ), 10 ) +2 ) );
        }
    });

    // Set the font of the logo
    $('#arial').click( function(){ $('#logo_preview').css( 'font-family', "Arial, Helvetica, sans-serif" ); });
    $('#verdana').click( function(){ $('#logo_preview').css( 'font-family', "Verdana, sans-serif" ); });
    $('#trebuchet').click( function(){ $('#logo_preview').css( 'font-family', "Trebuchet MS, Helvetica, sans-serif" ); });
    $('#times').click( function(){ $('#logo_preview').css( 'font-family', "Times, sans" ); });
    $('#georgia').click( function(){ $('#logo_preview').css( 'font-family', "Georgia, sans" ); });
    $('#courior').click( function(){ $('#logo_preview').css( 'font-family', "Courior, mono" ); });

    // Set the backround image
    $('#tile1_input').click( function(){ $('#logo_preview').css( 'background', 'url( "./images/backgrounds/tile1.png" ) repeat' ); });
    $('#tile2_input').click( function(){ $('#logo_preview').css( 'background', 'url( "./images/backgrounds/tile2.png" ) repeat' ); });
    $('#tile3_input').click( function(){ $('#logo_preview').css( 'background', 'url( "./images/backgrounds/tile3.png" ) repeat' ); });
    $('#tile4_input').click( function(){ $('#logo_preview').css( 'background', 'url( "./images/backgrounds/tile4.png" ) repeat' ); });

    // Bind click of upload logo to ajax request
    if ( $('#upload_logo' ).attr( 'id' ) ){
        new AjaxUpload( 'upload_logo', {
            action: url + "links/upload_flag",
            onComplete: function( file, response ){

                if ( $(response).find( "upload_status" ).text() == "101" ){
                    // Set the preview box to the logo
                    $('#logo_preview').css( 'background-position', 'center' );
                    $('#logo_preview').css( 'background-repeat', 'no-repeat' );
                    $('#logo_preview').css( 'background-image', "url( '" + path + $(response).find( 'web_filepath' ).text() + "/" + $(response).find( 'filename' ).text() + "' )" );
                    $('#logo_preview').html( '' );

                    // Update html lbael to hold filename
                    $('#upload_logo_file').attr( 'for', $(response).find( 'filename' ).text() );
                }
                else {
                    link_display_error( $(response).find( 'upload_status' ).text() );
                }
            }
        });
    }

    // Submit the link
    $('#submit_link').click( function(){
        $.ajax({
            url: url + "links/add",
            data: link_get_form_data(),
            error: function( response, status, error ){ link_display_error; },
            success: function( response, status, error ){

                if ( $(response).find('add_errors').text() ){
                    link_add_display_error( response );
                }
                else if ( $(response).find('add_status') ){
                    link_submit_success( response );
                }
                else {
                    alert ( "An unknown error has occured." );
                }
            }
        });
    });

    // Select a category to view
    $('.flags_label').click( function(){
        link_show_flags( $(this).attr( 'id' ) );
    });

    $('.flags_link').click( function(){
        link_show_flags( label_links[$(this).attr( 'id' )] );
    });
});

function link_submit_success( response ){

    // Popup a message
    $('#ajax_info').html('You need to refresh the page to see your published flag.<br /><br />Go ahead and add more links if you have them!' );
    $('#ajax_info').dialog({
        'title': 'Link Submitted'
    });

    // Clear all form fields
    $('#content_left').find( 'input' ).each( function(){
        $(this).attr( 'value', '' );
    });

    // Hide fields
    $('#upload_logo').slideUp( 500 );
    $('#create_logo').slideUp( 500 );
    $('#logo_preview').slideUp( 500 );

    // Reset logo preview
    $('#logo_preview').removeAttr( 'style' );
    $('#logo_preview').removeClass( 'logo_preview' );
    $('#logo_preview').addClass( 'logo_preview' );

    // Reset Recaptcha
    Recaptcha.reload();
}

function link_show_flags( flags_label ){

    if ( $('#add').attr( 'id' ) ){
        $('html').animate({ scrollTop: 0  }, 200, function(){
            $('#add').slideUp( 'medium', function(){
                $('#add').remove();
                link_fade_labels_and_flags( flags_label );
                $('.flags_label').css({ 'text-decoration': 'none', 'cursor': 'default' })
                $('.flags_label').unbind( 'click' );
                link_ajax_show_flags( flags_label );
            });
        });
    }
    else {

        $('.flags_label').css({ 'text-decoration': 'none', 'cursor': 'default' })
        $('.flags_label').unbind( 'click' );
        $('.flags_label').fadeOut( 500, function(){
            $('.flags_label').html( label_categories[flags_label] );
            $('.flags_label').fadeIn( 500 );
        });

        $('#flags_content').slideUp( 500, function(){
            $(this).remove();
            link_ajax_show_flags( flags_label );
        });
    }
}

function link_ajax_show_flags( flags_label ){

    $.ajax({
        url: url + "links/load_flag_page",
        data: { cat: flags_label, page: "1" },
        error: function( response, status, error ){ alert( "While getting flags: " + $(response).text() ) },
        success: function( response, status, error ){
            //alert( $(response).find('page').text() );
            link_build_page( response, flags_label );
        }
    });
}

function link_build_page( response, flags_label ){

    // Build the flags page

    // Create top level element
    var flags = Array();

    // build an array of pre-built flags
    $(response).find('flag').each( function(){
        if ( $(this).find( 'id' ).text() ){
            flags.push( link_build_flag( $(this ) ) );
        }
    });

    // Set the inital content container
    $('#flags').append( $('<div>').css({ 'padding-top': '10px', 'display': 'none' }).attr( 'id', 'flags_content' ) );

    var count = 0;
    for ( flag in flags ){

        // Set inital row left offset
        if ( count < 1 ){
            $('#flags_content').append( $('<div>').attr( 'class', 'flag_page_space_left' ) );
        }

        // Set flag display to none, for effects
        $(flags[flag]).css( 'display', 'none' );

        // Add the flag
        $('#flags_content').append( $(flags[flag]).addClass( 'flag_col' ).css({ 'display': 'block' }) );

        // Set padding between flags
        if ( count < 3 ){
            $('#flags_content').append( $('<div>').attr( 'class', 'flag_page_space' ) );
        }

        // Set initial padding for row
        if ( count > 2 ){
            count = 0;
            $('#flags_content').append( $('<div>').css({ 'padding-top': '10px', 'clear': 'both' }) );
        }
        else {
            count++;
        }

    }

    // Add controls for next/previous
    $('#flags_content').append( $('<div>').attr({ 'id': 'flags_nav' }) );
    $('#flags_content').append( $('<div>').attr({ 'id': 'flags_nav' }) );

    if ( parseFloat( $(response).find( 'page' ).text() ) < 2 && parseFloat( $(response).find( 'pages' ).text() ) > 1 ){
        $('#flags_nav').append(
            nav_pages( response, flags_label )
        );

        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );
        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );

        $('#flags_nav').append(
            nav_next( response, flags_label )
        );
    }
    else if ( ( parseFloat( $(response).find( 'page' ).text() ) == parseFloat( $(response).find( 'pages' ).text() ) ) && ( parseFloat( $(response).find( 'pages' ).text() ) > 1 ) ){

        $('#flags_nav').append(
            nav_previous( response, flags_label )
        );

        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );
        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );

        $('#flags_nav').append(
            nav_pages( response, flags_label )
        );

    }
    else if ( parseFloat( $(response).find( 'page' ).text() ) > parseFloat( $(response).find( 'pages' ).text() ) ){

    }
    else if ( parseFloat( $(response).find( 'pages' ).text() ) > 1 ) {

        $('#flags_nav').append(
            nav_previous( response, flags_label )
        );

        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );
        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );

        $('#flags_nav').append(
            nav_pages( response, flags_label )
        );

        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );
        $('#flags_nav').append( $('<span>').html( "&nbsp;&nbsp;" ) );

        $('#flags_nav').append(
            nav_next( response, flags_label )
        );
    }

    // Show the flags
    $('#flags_content').slideDown();
}

function nav_pages( response, flags_label, limit ){

    navPages = new Array();

    if ( !limit ){ limit = 10; }

    if ( parseFloat( $(response).find( 'page' ).text() ) <= limit ){
        for ( var i = 1; i<= limit; i++ ){
            navPages.push( nav_page( response, i, flags_label ) );
            if ( i == parseFloat( $(response).find( 'pages' ).text() ) ){ break; }
        }
    }
    else {
        var start = ( parseFloat( $(response).find( 'page' ).text() - 5 ) );
        for ( var i = start; i <= ( start + limit ); i++ ){
            navPages.push( nav_page( response, i, flags_label ) );
            if ( i == parseFloat( $(response).find( 'pages' ).text() ) ){ break; }
        }
    }

    var glue = document.createElement( 'span' );

    var i = 1;
    for ( navPage in navPages ){
        $(glue).append( navPages[navPage] );

        if ( i < navPages.length ){
            $(glue).append( $('<span>').html( " | " ) );
        }
        i++;
    }

    return glue;
}

function nav_page( response, page, flags_label ){
    if ( page == parseFloat( $(response).find( 'page' ).text() ) ){
        return $('<span>').attr({ 'id': 'flag_page_' + page, 'class': 'flag_nav' }).addClass( 'pages' ).addClass( 'selected' ).html( page );
    }
    else {
        return $('<span>').attr({ 'id': 'flag_page_' + page, 'class': 'flag_nav' }).addClass( 'pages' ).html( page ).click( function(){ link_flag_nav( page, flags_label ) });
    }
}

function nav_previous( response, flags_label ){
    return $('<span>').attr({ 'id': 'flag_page_previous', 'class': 'flag_nav' }).html( "&laquo; Previous" ).click( function(){
        link_flag_nav( $(response).find( 'previous_page' ).text(), flags_label );
    });
}

function nav_next( response, flags_label ){
    return $('<span>').attr({ 'id': 'flag_page_next', 'class': 'flag_nav' }).html( "Next &raquo;" ).click( function(){
        link_flag_nav( $(response).find( 'next_page' ).text(), flags_label );
    });
}

function link_flag_nav( action, flags_label ){

    // fade out current row
    $('#flags_content').slideUp( 'medium', function(){

        $('#flags_content').remove();

        $.ajax({
            url: url + "links/load_flag_page",
            data: { cat: flags_label, page: action },
            error: function( response, status, error ){ alert( error ) },
            success: function( response, status, error ){
            link_build_page( response, flags_label );
            }
        });
    });
}

function link_build_flag( data ){

    var flag = $('<div>').attr({ 'id': 'flag_' + $(data).find( 'id' ).text(), 'class': 'flag' });
    var flag_name = $(data).find('name');
    if ( $(data).find('dname') ){ flag_name = $(data).find('dname'); }

    // Check if this is an image logo
    if ( $(data).find('bgimg').text() ){
        $(flag).append(
            $('<a>').attr({ 'href': 'http://' + $(data).find( 'address' ).text(), 'target': '_' }).css({ 'display': 'table-cell', 'vertical-align': 'middle' }).addClass( 'flag_dimensions' ).append(
                $('<img>').attr({ 'src': $(data).find( 'webroot' ).text() + "flags/" + $(data).find('bgimg').text() }).css({ 'display': 'block', 'margin': '0 auto' })
            )
        );

    }
    else {
        $(flag).append(
            $('<a>').attr({ 'href': 'http://' + $(data).find( 'address' ).text(), 'target': '_' }).css({ 'display': 'block' }).addClass( 'flag_dimensions' ).append(
                $('<div>').attr({ 'class': 'flag' }).addClass( 'flag_dimensions' ).css({
                    'background-color': $(data).find('bgcolor').text(),
                    'font-family': $(data).find('font').text(),
                    'color': $(data).find('color').text(),
                    'font-size': $(data).find('size').text(),
                    'font-weight': $(data).find('weight').text(),
                    'font-style': $(data).find('style').text(),
                    'border': 0
                }).html( $(data).find('name').text() )
            )
        );
    }

    // Add the mouseover info view
    var flag_info = link_build_flag_info( data );
    $(flag).append( flag_info );

    link_flag_info_handler( flag, $(data).find( 'id' ).text() );
    return flag;
}

function link_flag_info_handler( flag, id ){

    var tid = 0;
    $(flag).hover( function(){
        tid = setTimeout( function(){ tid = 0; $('#flag_info_' + id ).fadeIn() }, 1000 );
    }, function(){
        if ( tid > 0 ){
            clearTimeout( tid );
        }
        else {
            $('#flag_info_' + id ).fadeOut();
        }
    });
}

function link_build_flag_info( data ){

    var flag_name = $(data).find('name').text();
    if ( $(data).find('dname') ){ flag_name = $(data).find('dname'); }

    var flag_info_container = $('<div>').attr({ 'class': 'flag_info' });
    var flag_info_bubble_container = $('<div>').attr({ 'id': 'flag_info_' + $(data).find( 'id' ).text(), 'class': 'help' }).css({
        'bottom': '60px',
        'left': '100px'
    });
    var flag_info_bubble_top = $( document.createElement( 'div' ) ).attr({ 'class': 'help_bubble_top' });
    var flag_info_bubble_bottom = $( document.createElement( 'div' ) ).attr({ 'class': 'help_bubble_bottom' });
    var flag_info_bubble = $( document.createElement( 'div' ) ).attr({ 'class': 'help_bubble' });
    var flag_info_bubble_title = $( document.createElement( 'div' ) ).attr({ 'class': 'help_title' }).html( $(data).find('name').text() );
    var flag_info_bubble_content = $( document.createElement( 'div' ) ).attr({ 'class': 'help_content' }).html( $(data).find( 'dsc' ).text() );
    var flag_info_bubble_close = $( document.createElement( 'div' ) ).attr({ 'class': 'help_close' }).click( function(){
        $( '#' + 'flag_info_' + $(data).find( 'id' ).text() ).fadeOut();
    }).html( '[close]' );
    var flag_info_bubble_clear = $( document.createElement( 'div' ) ).css({ 'clear': 'both' });

    // Build bubble
    $(flag_info_bubble).append( flag_info_bubble_title );
    $(flag_info_bubble_container).append( flag_info_bubble_top );
    $(flag_info_bubble).append( flag_info_bubble_content);
    $(flag_info_bubble).append( flag_info_bubble_close );
    $(flag_info_bubble).append( flag_info_bubble_clear );
    $(flag_info_bubble_container).append( flag_info_bubble );
    $(flag_info_bubble_container).append( flag_info_bubble_bottom );
    $(flag_info_container).append( flag_info_bubble_container );

    return flag_info_container;
}

function link_fade_flags_content(){
    $('#flags_categories').slideUp( 500, function(){
        $('#flags_categories').remove();
    });
}

function link_fade_labels_and_flags( keep_label ){


    // Loop through all labels and fade
    for ( label in label_categories ){

        // Except, do not fade the one we want to keep
        if ( label != keep_label ){

            $('#' + label ).animate({ width: 'hide' }, 300, function(){
                $(this).remove();
            });

        }
    }

    // fade the flags
    link_fade_flags_content();
}

function link_get_form_data(){

    var form_data = new Object();

    form_data = {
        'name': $('#website_name_input').attr( 'value' ),
        'address': $('#internet_address_input').attr( 'value' ),
        'dsc': $('#description_input').attr( 'value' ),
        'cat': $('input[name=category]:checked').attr( 'value' ),
        'flag': $('#upload_logo_file').attr( 'for' ),
        'bgcolor': $('#logo_preview').css( 'background-color' ),
        'color': $('#logo_preview').css( 'color' ),
        'font': $('#logo_preview').css( 'font-family' ),
        'weight': $('#logo_preview').css( 'font-weight' ),
        'style': $('#logo_preview').css( 'font-style' ),
        'size': $('#logo_preview').css( 'font-size' ),
        'tile': $('input[name=tile]:checked').attr( 'value' ),
        'bgimg': $('#logo_preview').css( 'background-image' ),
        'dname': $('#display_name_input').attr( 'value' ),
        'recaptcha_challenge_field': $('input[name=recaptcha_challenge_field]').attr( 'value' ),
        'recaptcha_response_field': $('input[name=recaptcha_response_field]').attr( 'value' )
    }

    return form_data;
}

function link_display_error( id ){

    $('#add_error').html( link_error_message( id ) );
    $('#add_error').dialog({
        modal: true,
        title: "Error Adding File"
    });
}

function link_add_display_error( response ){

    var display_err;
    var display_err = "";
    $(response).find('add_errors').children().each( function(){
        display_err = display_err + "<li>" + $(this).text() + "</li>";
    });

    $('#add_error').html( "<ul>" + display_err + "</ul>" );
    $('#add_error').dialog({
        modal: true,
        title: "Error Adding Link",
        autoOpen: false
    });

    $('#add_error').dialog('open');
}

function link_display_error( id ){

    $('#add_error').html( link_error_message( id ) );
    $('#add_error').dialog({
        modal: true,
        title: "Error Adding File"
    });
}

function link_preview_logo( XMLHttpRequest, textStatus, errorThrown ){
    alert( "error: " + errorThrown );
}

function link_error( XMLHttpRequest, textStatus, errorThrown ){
    alert( textStatus );
}

function link_color_palate( o ){

    $('#color_palate_dialog').dialog({
        title: "Color Palate",
        modal: true,
        autoOpen: false,
        width: '360px',
        minHeight: '700px'
    });

    $('#color_palate_dialog').dialog( 'open' );
}

function add_display_name_update( o ){

    if ( display_name_overridden != true ){
        $('#display_name_input').attr( 'value', $('#website_name_input').attr( 'value' ) );
        $('#logo_preview').html( $('#website_name_input').attr( 'value' ) );
    }
}

function link_display_name_override(){

}

function link_error_message( id ){
    var message;

    switch( id ){
        case "201":
            message = "You must upload a GIF, JPG or PNG file format. Please try again.";
            break;
        case "202":
            message = "There was a problem uploading the file. Try again and if it still fails, we may have a problem to fix.";
            break;
        case "203":
            message = "There was a problem verifying your file is an image. Please try again or select another file.";
            break;
        case "204":
            message = "We are experiencing a system problem that is preventing us from adding your image. Please try again later.";
            break;
        default:
            message = "We are experiencing a problem at this time. Please try again later.";
            break;
    }

    return message;
}

function link_ajax_error( response ){

    $('#ajax_error').html( response );
    $('#ajax_error').dialog({ width: 'auto', height: 'auto' });
}

