// Variables
var default_tweet       = "The sketch URL will be appended.";
var default_keywords    = "Optional. Space separated.";
var max_tweet_length    = 120;
var max_keywords_length = 100;

// Bind events
window.onload = function()
{
    oCounter  = document.getElementById('chars');
    
    // Check if the main 'create a sketch' form is on the page
    if (oCounter)
    {
        // Set code for the tweet text char counter
        oCounter.innerHTML = max_tweet_length;
        tweettext = document.getElementById("tweet");
        tweettext.onkeyup = charCount;

        // Limit Tags to 100 chars too (don't want too many tags...)
        keywordtext = document.getElementById("keywords");
        keywordtext.onkeyup = limitTags;

        // Add default text to tweet form
        formDefaultText();
        
        // Preload tool images
        preloadImages();
        
        // Add validation to form submission
        theform = document.getElementById("mainform");
        theform.onsubmit = validateSketchForm;
    }
}

function validateSketchForm()
{
    if (this.tweet.value.length < 1 || this.tweet.value == default_tweet)
    {
        this.tweet.style.borderColor = '#FF0000';
        return false;
    }
    else if (this.tweet.value.length > max_tweet_length)
    {
        this.tweet.style.borderColor = '#FF0000';
        return false;
    }
    
    if (this.keywords.value.length > max_keywords_length)
    {
        this.keywords.style.borderColor = '#FF0000';
        return false;
    }

    if (this.keywords.value == default_keywords)
    {
        this.keywords.value = '';
    }

    drawing.exportTo(this);
    
    return true;
}

function charCount()
{ 
	oCounter = document.getElementById('chars');

	if (this.value.length > max_tweet_length) this.value = this.value.substring(0, max_tweet_length);
	
	if (oCounter) oCounter.innerHTML = max_tweet_length - this.value.length;

	return true;
}

function limitTags()
{
    if (this.value.length > max_keywords_length) this.value = this.value.substring(0, max_keywords_length);
}

function formDefaultText()
{   
    tweettext = document.getElementById("tweet");
    tweettext.onblur = function() {
        if (this.value.length == 0)
        {
            this.value       = default_tweet;
            this.style.color = '#CCCCCC';
        }
        
        return true;
    }
    
    tweettext.onfocus = function() {
        if (this.value == default_tweet)
        {
            this.value       = '';
            this.style.color = '#333333';
            this.style.borderColor = '#000000';
        }
        
        return true;
    }

    keywordtext = document.getElementById("keywords");
    keywordtext.onblur = function() {
        if (this.value.length == 0)
        {
            this.value       = default_keywords;
            this.style.color = '#CCCCCC';
        }
        
        return true;
    }
    
    keywordtext.onfocus = function() {
        if (this.value == default_keywords)
        {
            this.value       = '';
            this.style.color = '#333333';
            this.style.borderColor = '#000000';
        }
        
        return true;
    }

    tweettext.value         = default_tweet;
    tweettext.style.color   = '#CCCCCC';
    keywordtext.value       = default_keywords;
    keywordtext.style.color = '#CCCCCC';

    return true;
}

function preloadImages()
{
    if (document.images)
    {
        mock_image = new Image();

        image_url    = new Array();
        image_url[0] = "/img/buttons/b_circle_on.png";
        image_url[1] = "/img/buttons/b_freehand_off.png";
        image_url[2] = "/img/buttons/b_large_on.png";
        image_url[3] = "/img/buttons/b_medium_on.png";
        image_url[4] = "/img/buttons/b_small_on.png";
        image_url[5] = "/img/buttons/b_square_on.png";
        image_url[6] = "/img/buttons/b_text_on.png";
        image_url[7] = "/img/buttons/b_tiny_off.png";
        
        var i     = 0;
        var total = image_url.length;
        
        for (i = 0; i< total; i++) mock_image.src = image_url[i];
    }
}