//////////////////////////////////////////////////////////////////////
//
// homepage.js - Javascript file to handle the various functions on the
//               jaqai.com home page.
//
// 2011 - Bruce Hellstrom, Celebrity Computer Consulting
//
//////////////////////////////////////////////////////////////////////

// Skin the recaptcha box
var RecaptchaOptions = {
    theme : 'white'
};

var contactEditColor = "#5A5A4B";
var contactInsColor = "#9a9b9c";
var contactFields = [
{
    'name' : 'fullname',
    'instext' : 'Your name', 
    'required' : false,
    'errortext' : ''
},
{
    'name' : 'email',
    'instext' : 'Your e-mail address', 
    'required' : true,
    'errortext' : 'Your e-mail address is required'
},
{
    'name' : 'subject',
    'instext' : 'Subject', 
    'required' : false,
    'errortext' : ''
},
{
    'name' : 'message',
    'instext' : 'Message', 
    'required' : true,
    'errortext' : 'You have not entered a message'
}
];
        
var INDEX_NAME = 0;
var INDEX_EMAIL = 1;
var INDEX_SUBJ = 2;
var INDEX_MSG = 3;


// anonymous function to preload the product images

( function( $ ) {
    var cache = [];
    // Arguments are image paths relative to the current page.
    $.preloadCallouts = function() {
        var args_len = arguments.length;
    
        for ( var xctr = 0; xctr < args_len; xctr++ ) {
            var cacheImage = document.createElement( 'img' );
            cacheImage.src = arguments[xctr];
            cache.push( cacheImage );
        }
    }
})( jQuery )



$( document ).ready( function() {
    
    // Show the 3 selection choices at the bottom since we know javascript
    // is enabled now
    $( 'ul.lower-nav' ).show();
    
    // Show any of the hidden panels that should be shown. This is mostly for
    // the contact form
    for ( var xctr = 0; xctr < 3; xctr++ ) {
        if ( panelStates[xctr].visible ) {
            $( panelStates[xctr].id ).show();
        }
    }
    
    // Set the click handlers
    $( 'a.about-area' ).click( mainClickHandler );
    $( 'a.resume-area' ).click( mainClickHandler );
    $( 'a.contact-area' ).click( mainClickHandler );
    
    // Close button handlers
    $( '#jq-text-sect img.close-box' ).click( function( event ) {
        $( panelStates[0].id ).slideUp( 400 );
        panelStates[0].visible = false;
    } );
    
    $( '#jaqai-resume-content img.close-box' ).click( function( event ) {
        $( panelStates[1].id ).slideUp( 200 );
        panelStates[1].visible = false;
    } );
    
    $( '#contact-content img.close-box' ).click( function( event ) {
        $( panelStates[2].id ).slideUp( 400 );
        panelStates[2].visible = false;
    } );
    
    // Contact form cancel button
    $( '#cancel_button' ).click( function( event ) {
        $( panelStates[2].id ).hide();
        panelStates[2].visible = false;
        $( '#fullname' ).val( "" );
        $( '#email' ).val( "" );
        $( '#subject' ).val( "" );
        $( '#message' ).val( "" );
        fillInstructionalText();
    } );
    
    // Handle contact form
    fillInstructionalText();
        
    $( "#fullname" ).focus( function() {
        removeInstructionalText( this );
    } );
        
    $( "#email" ).focus( function() {
        removeInstructionalText( this );
    } );
        
    $( "#message" ).focus( function() {
        removeInstructionalText( this );
    } );
        
    $( "#subject" ).focus( function() {
        removeInstructionalText( this );
    } );
            
    $( "#contact-form" ).submit( function() {
        return( validateContactForm() );
    } );
    
} );

function mainClickHandler( event ) {
    var linkIndex = 0;
    var otherLinks = [];
    var slideDuration = 600;
    var closeDuration = 400;
    
    if ( $( this ).hasClass( 'resume-area' ) ) {
        linkIndex = 1;
        otherLinks[0] = 0;
        otherLinks[1] = 2;
        slideDuration = 300;
        closeDuration = 150;
    }
    else if ( $( this ).hasClass( 'contact-area' ) ) {
        linkIndex = 2;
        otherLinks[0] = 0;
        otherLinks[1] = 1;
    }
    else {
        otherLinks[0] = 1;
        otherLinks[1] = 2;
    }
    
    var bshow = !panelStates[linkIndex].visible;
    
    for ( var xctr = 0; xctr < otherLinks.length; xctr++ ) {
        if ( bshow && panelStates[otherLinks[xctr]].visible ) {
            $( panelStates[otherLinks[xctr]].id ).slideUp( 200 );
            panelStates[otherLinks[xctr]].visible = false;
        }
    }
    
    if ( bshow ) {
        $( panelStates[linkIndex].id ).slideDown( slideDuration );
        panelStates[linkIndex].visible = true;
    }
    else {
        $( panelStates[linkIndex].id ).slideUp( closeDuration );
        panelStates[linkIndex].visible = false;
    }
    
    event.preventDefault();
}
 

function removeInstructionalText( fldobj ) {
    var objcssid = "#" + fldobj.id;
    
    if ( objcssid == "#fullname" ) {
        if ( $( objcssid ).val() == contactFields[INDEX_NAME].instext ) {
            $( objcssid ).val( "" );
        }
        $( objcssid ).css( "color", contactEditColor );
    }
    else if ( objcssid == "#email" ) {
        if ( $( objcssid ).val() == contactFields[INDEX_EMAIL].instext ) {
            $( objcssid ).val( "" );
        }
        $( objcssid ).css( "color", contactEditColor );
    }
    else if ( objcssid == "#message" ) {
        if ( $( objcssid ).val() == contactFields[INDEX_MSG].instext ) {
            $( objcssid ).val( "" );
        }
        $( objcssid ).css( "color", contactEditColor );
    }
    else if ( objcssid == "#subject" ) {
        if ( $( objcssid ).val() == contactFields[INDEX_SUBJ].instext ) {
            $( objcssid ).val( "" );
        }
        $( objcssid ).css( "color", contactEditColor );
    }
}


function fillInstructionalText() {
    var curval = $( "#fullname" ).val();
    
    if ( curval.length == 0 || curval == contactFields[INDEX_NAME].instext ) {
        $( "#fullname" ).val( contactFields[INDEX_NAME].instext );
        $( "#fullname" ).css( "color", contactInsColor );
    }
    else {
        $( "#fullname" ).css( "color", contactEditColor );
    }
    
    curval = $( "#email" ).val();
    
    if ( curval.length == 0 || curval == contactFields[INDEX_EMAIL].instext ) {
        $( "#email" ).val( contactFields[INDEX_EMAIL].instext );
        $( "#email" ).css( "color", contactInsColor );
    }
    else {
        $( "#email" ).css( "color", contactEditColor );
    }
    
    curval = $( "#subject" ).val();

    if ( curval.length == 0 || curval == contactFields[INDEX_SUBJ].instext ) {
        $( "#subject" ).val( contactFields[INDEX_SUBJ].instext );
        $( "#subject" ).css( "color", contactInsColor );
    }
    else {
        $( "#subject" ).css( "color", contactEditColor );
    }
   
    curval = $( "#message" ).val();
    
    if ( curval.length == 0 || curval == contactFields[INDEX_MSG].instext ) {
        $( "#message" ).val( contactFields[INDEX_MSG].instext );
        $( "#message" ).css( "color", contactInsColor );
    }
    else {
        $( "#message" ).css( "color", contactEditColor );
    }
}

function isValidEmailAddress( emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
};


function validateContactForm() {
    var curval = "";
    var error_text = "";
    
    for ( var xctr = 0; xctr < contactFields.length; xctr++ ) {
        var contactItem = contactFields[xctr];
        if ( contactItem.required ) {
            curval = $( '#' + contactItem.name ).val();
            
            if ( curval == "" || curval == contactItem.instext ) {
                if ( error_text.length > 0 ) {
                    error_text += "\n";
                }
                error_text += contactItem.errortext;
            }
            else if ( contactItem.name == "email" ) {
                if ( !isValidEmailAddress( curval ) ) {
                    if ( error_text.length > 0 ) {
                        error_text += "\n";
                    }
                    error_text += "Your e-mail address does not appear to be valid";
                }
            }
        }
    }
    
    curval = $( "#recaptcha_response_field" ).val();
    
    if ( curval == "" ) {
        if ( error_text.length > 0 ) {
            error_text += "\n";
        }
        error_text += "You must fill out the image verification text";
    }
    
    
    if ( error_text.length > 0 ) {
        alert( error_text );
        return( false );
    }
    
    return( true );
}