var currentFrame = ''; // dark or light
var currentSize = '';
var url = window.location.href.split("?")[0]; // TODO: in PHP
var hideTimer;

function createFeedURL() {
    var feedURL = '';
    var delim = '';

    if ($('#api').val("flickr")) {
        feedURL += 'api://www.flickr.com/?';
    } else {
        feedURL += 'api://picasaweb.google.com/?';
    }
    
    if ($('#user').val() != "") {
        feedURL += 'user=' + $('#user').val();
        delim = '&';
    }

    if ($('#album').val() != "") {
        feedURL += delim + 'album=' + $('#album').val();
        delim = '&';
    }

    if ($('#search').val() != "") {
        feedURL += delim + 'search=' + $('#search').val();
    }

    return feedURL;
}

function updateFeed() {
    cooliris.embed.setFeedURL(createFeedURL());
}

function updateLinkToShare() {
    var size = (currentSize == '') ? GLOBAL_SIZE : currentSize;
    var code = url + "?api=" + $('#api').val() + "&u=" + $('#user').val() + "&a=" + $('#album').val() + "&q=" + $('#search').val() + "&s=" + size + "&t=" + 
            encodeURIComponent($('#title').val()) + "&c=" + encodeURIComponent($('#caption').val()) + "&f=" + currentFrame;
    
    if ($('#artistName').val() != "") {
        code += "&m=" + $('#artistName').val();
    }
    
    $('#linkCode').val(code);
    if (typeof (cooliris) != 'undefined' && typeof (cooliris.embed) != 'undefined') {
        $('#embedCode').val(cooliris.embed.getEmbedCode());
    }
}

function chooseFrame(colorString) {
    currentFrame = colorString;

    var frameClass = '';
    switch (currentSize) {
        case 's':
            frameClass += 'small';
            break;
        case 'l':
            frameClass += 'large';
            break;
        case 'm':
        default:
            frameClass += 'med';
            break;
    }
    
    switch (colorString) {
        case 'd':
            frameClass += 'Dark';
            break;
        case 'l':
        default:
            frameClass += 'Light';
            break;
    }
    
    var monitor = $('#theMonitor');
    monitor.removeClass('smallDark');
    monitor.removeClass('smallLight');
    monitor.removeClass('medLight');
    monitor.removeClass('medDark');
    monitor.removeClass('largeDark');
    monitor.removeClass('largeLight');
    monitor.addClass(frameClass);
    updateLinkToShare();
}

function chooseSize(sizeString) {
    var monitor = $('#theMonitor');
    currentSize = sizeString;
    switch(sizeString) {
        case 's':
            monitor.removeClass('monitorlarge');
            monitor.removeClass('monitormed');
            monitor.addClass('monitorsmall');
            embedSWF(544, 339, createFeedURL());
            break;
        case 'l':
            monitor.removeClass('monitorsmall');
            monitor.removeClass('monitormed');
            monitor.addClass('monitorlarge');
            embedSWF(796, 497, createFeedURL());
            break;
        case 'm':
        default:
            monitor.removeClass('monitorlarge');
            monitor.removeClass('monitorsmall');
            monitor.addClass('monitormed');
            embedSWF(669, 419, createFeedURL());
            break;
    }
    chooseFrame(currentFrame);
    updateLinkToShare();
}

function hideTipLater() {
    $(this).oneTime(function() {
        $('#designtips').hide();
    });
}

function updateField(fieldName) {
    var val = $(fieldName).val();
    if (val == "") {
        val = " ";
    }
    $(fieldName + 'Text').html(val);
}

function initializeDesignMode() {
    $('#title').keyup(function() {
        updateField('#title');
        updateLinkToShare();
    });

    $('#caption').keyup(function() {
        updateField('#caption');
        updateLinkToShare();
    });

    // auto-select some fields
    $("#title, #caption, #linkCode, #embedCode").click(function() {
        $(this).select();
    });
    
    $('#api, #user, #album, #search').change(function() {
        updateFeed();
        updateLinkToShare();
    });

    $('#artistName').change(function() {
        embedRadioSWF($('#artistName').val());
        updateLinkToShare();
    });

    var tips = $('#designtips');

    // focus events show the tooltip
    $('#api').focus(function() {
        tips.show();
        tips.css('top', '25px');
        tips.html('First, where do you upload your photos?');
        hideTipLater();
    });

    $('#user').focus(function() {
        tips.show();
        tips.css('top', '60px');
        tips.html('Enter your Flickr or Picasa user name.');
        hideTipLater();
    });
    
    $('#album').focus(function() {
        tips.show();
        tips.css('top', '20px');
        tips.html('Album IDs can be found in your Flickr set\'s or Picasa album\'s URL: <br/><br/> http://www.flickr.com/photos/username/ sets/<b>12157607386656801</b>/ <br/><br/>');
        tips.html(tips.html() + 'http://picasaweb.google.com/username/ <b>AlbumName</b>');
        hideTipLater();
    });

    $('#search').focus(function() {
        tips.show();
        tips.css('top', '100px');
        tips.html('If you don\'t have photos on Flickr or Picasa, you can try adding some fun search terms here (e.g., Sunset).');
        hideTipLater();
    });

    $('#title').focus(function() {
        tips.show()
        tips.css('top', '140px');
        tips.html('Add a title to personalize your gallery.');
        hideTipLater();
    });
    
    $('#caption').focus(function() {
        tips.show()
        tips.css('top', '170px');
        tips.html('A caption helps you tell your story.');
        hideTipLater();
    });

    $('#artistName').focus(function() {
        tips.show()
        tips.css('top', '200px');
        tips.html('If you would like to add background music, type in your favorite artist\'s name (e.g., Louis Armstrong).');
        hideTipLater();
    });
    
    updateLinkToShare();
}

function onItemSelect(item) {
    if (item == null) {
        $('#informationText').html("");
    } else {
        $('#informationText').html("Current Selection: " + item.link);
    }
}

var cooliris = {};
cooliris.onEmbedInitialized = function() {
    $('#embedCode').val(cooliris.embed.getEmbedCode());
    cooliris.embed.setCallbacks({
       select: "onItemSelect"
    });
}

$(document).ready(function() {
    initializeDesignMode();
});