app.js

/**
 *
 * The main ThemeRoller JavaScript file. Handles pretty much everything
 *
 *
 * jQuery Mobile Framework : ThemeRoller
 * Copyright (c) jQuery Project
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 *
 * Originally created by Tyler Benziger: https://github.com/TylerBenziger
 *
 */

(function( $, window, undefined ) {
//Object that can be used across multiple files to reference certain functions
TR = {};
window.TR = TR;

TR.styleArray = [];
TR.tokens = {};
TR.undoLog = [];
TR.redoLog = [];
TR.version = null;

TR.showStartEnd = [];
TR.firstAdd = 1;
TR.welcomed = 0;
TR.tabCount = 3;

TR.alpha = [ "global", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
TR.num = { "global": 0, "a": 1, "b": 2, "c": 3, "d": 4, "e": 5, "f": 6, "g": 7, "h": 8, "i": 9, "j": 10, "k": 11, "l": 12, "m": 13, "n": 14, "o": 15, "p": 16, "q": 17, "r": 18, "s": 19, "t": 20, "u": 21, "v": 22, "w": 23, "x": 24, "y": 25, "z": 26 };

TR.timerID = 0;
TR.movingColor = 0;
TR.firstLoad = 1;

TR.hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");

// Perform the comparison leftHandSideVersion <operation> <rightHandSideVersion>
// and return true or false
// Versions are assumed to be [0-9]+(\.[0-9]+)*
// <operation> can be one of "<", ">", ">=", "<=", or "="
function singleVersionComparison( leftHandSideVersion, operation, rightHandSideVersion ) {
    var idx, shorterArray, arrayLength,
        leftHandSide = leftHandSideVersion.split( "." ),
        rightHandSide = rightHandSideVersion.split( "." );

    // Convert both sides to an array of integers
    $.each( leftHandSide, function( index, value ) {
        leftHandSide[ index ] = parseInt( value );
    });

    $.each( rightHandSide, function( index, value ) {
        rightHandSide[ index ] = parseInt( value );
    });

    // Pad the shorter of the two arrays with zeroes
    shorterArray = leftHandSide.length < rightHandSide.length ?
        leftHandSide : rightHandSide;
    arrayLength = leftHandSide.length < rightHandSide.length ?
        rightHandSide.length : leftHandSide.length;
    // Must loop backwards to avoid re-querying length of shorter array
    for ( idx = arrayLength - shorterArray.length ; idx > 0 ; idx-- ) {
        shorterArray.push( 0 );
    }

    switch( operation ) {
        case ">":
        case ">=":
            for ( idx = 0 ; idx < arrayLength ; idx++ ) {
                if ( leftHandSide[ idx ] > rightHandSide[ idx ] ) {
                    return true;
                } else if ( leftHandSide[ idx ] < rightHandSide[ idx ] ) {
                    return false;
                }
            }
            return ( operation === ">=" );

        case "<":
        case "<=":
            for ( idx = 0 ; idx < arrayLength ; idx++ ) {
                if ( leftHandSide[ idx ] < rightHandSide[ idx ] ) {
                    return true;
                } else if ( leftHandSide[ idx ] > rightHandSide[ idx ] ) {
                    return false;
                }
            }
            return ( operation === "<=" );

        case "=":
            for ( idx = 0 ; idx < arrayLength ; idx++ ) {
                if ( leftHandSide[ idx ] !== rightHandSide[ idx ] ) {
                    return false;
                }
            }
            return true;
    }
}

// Replaces the swatch @fromLetter, specified in lowercase, with the swatch
// @toLetter, also specified in lowercase
TR.replaceSwatchLetter = function( css, fromLetter, toLetter ) {
	return ( css
		.replace( ( new RegExp( "-" + fromLetter + ",", "g" ) ), "-" + toLetter + "," )
		.replace( ( new RegExp( "-" + fromLetter + "\\:", "g" ) ), "-" + toLetter + ":" )
		.replace( ( new RegExp( "-" + fromLetter + "\\s", "g" ) ), "-" + toLetter + " " )
		.replace( ( new RegExp( "{" + fromLetter + "-", "g" ) ), "{" + toLetter + "-" )
		.replace( ( new RegExp( "-" + fromLetter + "\\.", "g" ) ), "-" + toLetter + "." )
		.replace( ( new RegExp( "/\\*\\s" + fromLetter.toUpperCase() ) ), "/* " + toLetter.toUpperCase() ) );
};

// Regular expressions involved in parsing the style block
TR.RegExp = {
	swatchDelimiter: function( uppercaseLetter ) {
		return new RegExp( "\\/\\*\\s" + uppercaseLetter + "\\s*\\n-*\\*\\/" );
	},
	structure: /\/\*\sStructure\s\*\//
};

// Check if a version is in one of a number of intervals
// Version numbers are assumed to be of the form [0-9]+(\.[0-9]+)*
// An interval is a tuple of versions separated by a dash enclosed on the left
// and the right by either a square or a round bracket. A square bracket denotes
// >= or <= comparison whereas a round bracket denotes strict comparison.
// The list of intervals is comma-separated
TR.versionCompare = function( version, intervals ) {
	var returnValue = false;

	// If no version is passed in, use TR.version
	if ( arguments.length === 1 ) {
		intervals = version;
		version = TR.version;
	}

	$.each( intervals.split( "," ), function( index, interval ) {
		var startCompare = ( ( interval.charAt( 0 ) === "(" ) ? ">" : ">=" ),
            endCompare = ( ( interval.charAt( interval.length - 1 ) === ")" ) ? "<" : "<=" );


		// Get rid of brackets enclosing the interval and split out the two versions
		interval = interval.replace(/\[|\)|\]|\(/g, "" ).split( "-" );

		if ( interval.length !== 2 ) {
			// We found an invalid interval - stop $.each-ing and return false.
			return false;
		} else if ( ( interval[ 0 ] === interval[ 1 ] === "" ) ||
			( ( interval[ 0 ] === "" ) && singleVersionComparison( version, endCompare, interval[ 1 ] ) ) ||
			( ( interval[ 1 ] === "" ) && singleVersionComparison( version, startCompare, interval[ 0 ] ) ) ||
			( singleVersionComparison( version, startCompare, interval[ 0 ] ) &&
				singleVersionComparison( version, endCompare, interval[ 1 ] ) ) ) {
			// We found a containing interval - stop $.each-ing and return true.
			returnValue = true;
			return false;
		}
	});

	return returnValue;
};

//cleaning up a few classes and adding a few attributes so the
//inspector works properly after jQuery Mobile has done its markup injection
TR.addInspectorAttributes = function( swatch ) {
    var slider = TR.iframe.find( "[name=slider][data-theme=" + swatch + "]" ).siblings( "div" ),
        select = TR.iframe.find( "select[data-theme=" + swatch + "]" ),
        btn = select.siblings( "a" ),
        radio = TR.iframe.find( ".ui-content" ).each(function() {
            $( this ).find( ".ui-radio:first span:first" ).removeClass( "ui-corner-top" );
        }),
		staticListItem = TR.iframe.find( ".ui-li-static.ui-btn-up-" + swatch );

    slider.attr( "data-form", "ui-btn-up-" + swatch ).attr( "data-theme", swatch ).addClass( "ui-btn-up-" + swatch );
    slider.find( "a" ).attr( "data-form", "ui-btn-up-" + swatch ).attr( "data-theme", swatch );
    select.attr( "id", "select-choice-" + swatch );
	btn.attr( "data-theme", swatch ).attr( "data-form", "ui-btn-up-" + swatch );
    btn.find( ".ui-icon" ).attr( "data-form", "ui-icon" );
	staticListItem.attr( "data-theme", swatch );
}

//adds a most-recent-color to the five right-most draggables in the quickswatch panel
TR.addMostRecent = function( color ) {
    var found = 0,
        most_recents = $( "#most-recent-colors .color-drag" );

    most_recents.each( function() {
        if( color == $(this).css("background-color") ) {
            found = 1;
        }
    });

    if( !found ) {
        var last = null;
        most_recents.each(function() {
            var $this = $( this ),
                temp = $this.css( "background-color" )
                last = last ? last : color;
            $this.css( "background-color", last );
            if( last != temp ) {
                $this.draggable( "enable" );
                $this.removeClass( "disabled" );
            }
            last = temp;
        });
    }
}
//updates the newest recent color. Used when adding a color with the color picker
TR.updateMostRecent = function( newColor ) {
    var found = 0,
        most_recent = $( "#most-recent-colors .color-drag:first" );

    if( most_recent.length ) {
        most_recent.css( "background-color", newColor );
    }
}

//adds some CSS, a tab panel, and a preview for the new swatch
TR.addSwatch = function( new_style, duplicate ) {
    var duplicate = duplicate || null;
    $( ".delete-swatch-a" ).show();
    if( TR.tabCount < 28 ) {
        var next_tab = TR.tabCount + 1,
            lower = TR.alpha[TR.tabCount - 1],
            upper = lower.toUpperCase();

        //new_style flag is only set if styles have not been added to TR.styleArray
        //or CSS yet. correctNumberOfSwatches calles addSwatch with new_style=false
        //so this block is skipped
        if( new_style ) {
            TR.undoLog.push( TR.styleBlock.text() );
            TR.redoLog = [];

            //adding swatch to CSS
            var temp_css_template = TR.replaceSwatchLetter( TR.graySwatch, "a", lower ),
                css = TR.styleBlock.text();
            if( duplicate ) {
                //if there is a swatch to be duplicated, we use the letter passed in to do our regex patterns
                var start_reg = TR.RegExp.swatchDelimiter( duplicate.toUpperCase() ),
                    end_reg = TR.RegExp.swatchDelimiter( TR.alpha[ TR.num[duplicate] + 1 ].toUpperCase() );

                if( css.search( end_reg ) == -1 ) {
                    end_reg = TR.RegExp.structure;
                }
                temp_css_template = css.substring( css.search( start_reg ), css.search( end_reg ) );

                temp_css_template = TR.replaceSwatchLetter( temp_css_template, duplicate, lower );
            }
            css = css.replace( TR.RegExp.structure, temp_css_template + "\n\n/* Structure */" );
            TR.styleBlock.text( css );
        }

        //giving the contents of the new tab
        var temp_panel_template = TR.panelTemplate.replace( /Swatch A/, "Swatch " + upper )
            .replace( /"a\-/g, "\"" + lower + "-" ).replace( /\-a"/g, "-" + lower + "\"" );

        $( "#tabs" ).tabs( "add", "#tab" + (TR.tabCount + 1), "+" )
            .find( "ul li a[href=#tab" + TR.tabCount + "]" ).text( upper );

        var newTabPanel = $( "#tab" + TR.tabCount );

        newTabPanel.html( temp_panel_template );

        //adding swatch to preview document
        var temp_swatch_template = TR.swatchTemplate.replace( /"a"/g, "\"" + lower + "\"" ).replace( />A<\/h1>/g, ">" + upper + "</h1>" )
            .replace( /-a\s/g, "-" + lower + " " ).replace( /-a\"/g, "-" + lower + "\"" );
        $( temp_swatch_template ).insertAfter( TR.iframe.find(".swatch:last") );

        var iframe_window = $( "iframe" )[0].contentWindow;
        //This is a bug in JQM. Header initialization is using a live pagecreate handler on the page
        //ideally we should be able to write iframe_window.$(".swatch:last").trigger("create");
        if ( TR.versionCompare( "(-1.4)" ) ) {
            iframe_window.$( ".ui-page" ).trigger( "pagecreate" );
        } else {
            iframe_window.$( ".ui-page" ).page().enhanceWithin();
        }

        //adding data-form attribute to slider
        TR.addInspectorAttributes( lower );

        //redefine the token array
        //not with refresh because we've only defined the CSS
        //let initStyleArray edit the styleArray
        TR.initStyleArray();

        TR.updateFormValues( newTabPanel );

        //binds all appropriate events for accordions and new tab
        TR.updateThemeRoller( TR.tabCount );

        //adjust the height of the add-swatch box
        var swatch_height = TR.iframe.find( ".swatch:last" ).outerHeight();
        TR.iframe.find( ".add-swatch" ).height( swatch_height );

        if( TR.firstAdd ) {
            //apply paging of the tabs
            $( "#tabs" ).tabs("paging", {
                cycle: true,
                follow: true,
                tabsPerPage: 0,
                followOnSelect: true,
                selectOnAdd: false
            });
            TR.firstAdd = 0;
        }

        TR.refreshIframe( TR.alpha[TR.tabCount - 1] );
        TR.iframe.find( "[data-role=dialog]" ).remove();

        //reconfigure binding of addSwatch event
        $( "[href=#tab" + TR.tabCount + "]" ).unbind( "click", TR.addSwatchEvent );

        $( "[href=#tab" + next_tab + "]" ).bind( "click", TR.addSwatchEvent );

        TR.tabCount++;
    }
}

//used for binding and unbinding to addSwatch
TR.addSwatchEvent = function(e) {
    e.preventDefault();
    TR.addSwatch( true );
}

// Compute a border colour based on a background colour
TR.borderColor = function( color, gray ) {
    return ( gray > 90 ) ?
        TR.percentColor( color, 0.55 ):
        TR.percentColor( color, 1.4 );
};

//When a color is dropped this function applies a color to the element
//automatically detecting things like
TR.applyColor = function( color, prefix ) {
    var color_arr = color.split( "" ),
        red = parseInt( (color_arr[1] + color_arr[2]), 16 ),
        green = parseInt( (color_arr[3] + color_arr[4]), 16 ),
        blue = parseInt( (color_arr[5] + color_arr[6]), 16 ),
        gray = TR.grayValue( color ),
        swatch = prefix.substr( 0, 1 ),
        element = prefix.substr( 2, prefix.length - 2 );

    element = prefix.split( "-" );
    element[0] = "";
    element = element.join( "" );

    //if we're on a button hover we call this same function with button down as element
    if( element == "bhover" ) {
        color = TR.percentColor( color, 1.15 );
        TR.applyColor( color, swatch + "-bdown");
    }
    //if we're on a button up we call same function with button hover
    //which then calls it with button down
    if( element == "bup" ) {
        TR.applyColor( color, swatch + "-bhover" );
    }
    //if we're on button down then the gradient gets flipped
    var start, end;
    if( element != "bdown" ) {
        start = TR.computeGradient(color, 50)[0];
        end = TR.computeGradient(color, 50)[1];
    } else {
        start = TR.computeGradient(color, 50)[1];
        end = TR.computeGradient(color, 50)[0];
    }
    if( element != "link" ) {
        //anything but a link has gradients and text color
        $( "input[data-name=" + prefix + "-background-color]" ).val( color ).css( "background-color", color );
        $( "input[data-name=" + prefix + "-background-start]" ).val( start ).css( "background-color", start );
        $( "input[data-name=" + prefix + "-background-end]" ).val( end ).css( "background-color", start );
        $( ".slider[data-name=" + prefix + "-background-color]" ).slider( {value: 50} )
            .find( "a" ).css({"background": color, "border-color": color});
        TR.styleArray[prefix + "-background-start"] = start;
        TR.styleArray[prefix + "-background-end"] = end;
        TR.styleArray[prefix + "-background-color"] = color;

        //special border for content body elements and as of 1.4
        // for buttons, actives and bars as well
        if( ( TR.versionCompare( "(-1.4)" ) && element != "body" ) ||
            ( TR.versionCompare( "[1.4-)" ) &&
                element != "active" &&
                element != "bar" &&
                element != "body" &&
                element != "bdown" &&
                element != "bhover" &&
                element != "bup" ) ) {
            $( "input[data-name=" + prefix + "-border]" ).val( color ).css( "background-color", color );
            TR.styleArray[prefix + "-border"] = color;
        } else {
            var border = TR.borderColor( color, gray );
            $( "input[data-name=" + prefix + "-border]" ).val( border ).css( "background-color", border );
            TR.styleArray[prefix + "-border"] = border;
        }

        //contrast calculation for text color
        if( gray > 150 ) {
            $( "input[data-name=" + prefix + "-color]" ).val( "#000000" ).css( "background-color", "#000000" );
            $( "input[data-name=" + prefix + "-shadow-color]" ).val( "#eeeeee" ).css( "background-color", "#eeeeee" );
            TR.styleArray[prefix + "-color"] = "#000000";
            TR.styleArray[prefix + "-shadow-color"] = "#eeeeee";
        } else {
            $( "input[data-name=" + prefix + "-color]" ).val( "#ffffff" ).css( "background-color", "#ffffff" );
            $( "input[data-name=" + prefix + "-shadow-color]" ).val( "#444444" ).css( "background-color", "#444444" );
            TR.styleArray[prefix + "-color"] = "#ffffff";
            TR.styleArray[prefix + "-shadow-color"] = "#444444";
        }
    } else {
        //links are lighter on hover and darker once visited
        var lighter = TR.percentColor( color, 1.15 );
        var darker = TR.percentColor( color, 0.65 );
        var styleName = TR.versionCompare( "[1.4-)" ) ? "-link" : "-body-link";
        TR.styleArray[swatch + styleName + "-color"] = color;
        TR.styleArray[swatch + styleName + "-active"] = color;
        TR.styleArray[swatch + styleName + "-hover"] = lighter;
        TR.styleArray[swatch + styleName + "-visited"] = darker;
        $( "input[data-name=" + swatch + styleName + "-color]" ).val( color ).css( "background-color", color );
        $( "input[data-name=" + swatch + styleName + "-active]" ).val( color ).css( "background-color", color );
        $( "input[data-name=" + swatch + styleName + "-hover]" ).val( darker ).css( "background-color", lighter );
        $( "input[data-name=" + swatch + styleName + "-visited]" ).val( lighter ).css( "background-color", darker );
    }

    //we've updated TR.styleArray now update the CSS
    //if it's a button, we don't call updateAllCSS until all three are updated in the styleArray
    if( element != "bdown" && element != "bhover" ) {
        TR.updateAllCSS();
    }
}

//pass in a color and a slider value and get back a tuple with start and end colors
//of a gradient - the slider value is a number between 0 and 100
//greater than 50 -> convex gradient, less than 50 -> concave
TR.computeGradient = function( color, slider_value ) {
    var color_arr = color.split( "" );

    var red = parseInt( (color_arr[1] + color_arr[2]), 16 );
    var green = parseInt( (color_arr[3] + color_arr[4]), 16 );
    var blue = parseInt( (color_arr[5] + color_arr[6]), 16 );

    var convex, red_start, green_start, blue_start, percent;

    if( slider_value >= 40 ) {
        convex = 1;
        percent = 1 + ( slider_value - 40 ) / 100;
    } else {
        convex = 0;
        percent = 1 + ( 40 - slider_value ) / 100;
    }
    if( percent * red > 255 ) {
        red_start = "FF";
    } else {
        red_start = TR.padNumber( Math.floor(percent * red).toString( 16 ), 2 );
    }
    if( percent * green > 255 ) {
        green_start = "FF";
    } else {
        green_start = TR.padNumber( Math.floor(percent * green).toString( 16 ), 2 );
    }
    if( percent * blue > 255 ) {
        blue_start = "FF";
    } else {
        blue_start = TR.padNumber( Math.floor(percent * blue).toString( 16 ), 2 );
    }

    if( convex ) {
        percent = ( 100 - (slider_value - 40) ) / 100;
    } else {
        percent = ( 100 - (40 - slider_value) ) / 100;
    }

    var red_end = TR.padNumber( Math.floor(percent * red).toString( 16 ), 2 );
    var green_end = TR.padNumber( Math.floor(percent * green).toString( 16 ), 2 );
    var blue_end = TR.padNumber( Math.floor(percent * blue).toString( 16 ), 2 );

    var start, end;
    if( convex ) {
        start = "#" + red_start + "" + green_start + "" + blue_start + "";
        end = "#" + red_end + "" + green_end + "" + blue_end + "";
    } else {
        start = "#" + red_end + "" + green_end + "" + blue_end + "";
        end = "#" + red_start + "" + green_start + "" + blue_start + "";
    }
    return [start, end];
}

//method used to calculate the number of swatches in the CSS and adjusts
//the number of tab panels in TR and the number of swatches in the preview
TR.correctNumberOfSwatches = function() {
    var style = TR.styleBlock.text();
    var matches = style.match( /\/\*\s[A-Z]\s*-*\*\//g );
    if( !matches ) {
        if(TR.firstLoad) {
            TR.firstLoad = 0;
            //initial load - the theme specified cannot be found on the server
            var error_message = $( "<h3>Invalid Theme</h3><p>Reminder: We can only store this theme URL on the server for 30 days, then it will be deleted. \
            Download a theme to keep a copy safe that you can import later.</p>" ).css( "color", "#f00" );
            $( "#welcome h1" ).after( error_message );

            //import default theme
            $.ajax({
                url: "jqm/" + TR.version + "/jqm.starter.theme.css",
                dataType: "text",
                mimeType: "text/plain",
                success: function( data ) {
                    $( "#upload textarea" ).val( data );
                    TR.styleBlock.text( data );
                    TR.correctNumberOfSwatches();
                    for ( var letter = TR.num[ "a" ]; letter < TR.num[ "c" ]; letter++ ) {
                        TR.addSwatch( true, "a" );
                    }
                }
            });
        } else {
            alert( "Invalid theme file. Please import unminified files only with all original CSS comments in place." );
            TR.undo();
        }
        //return early because the file is of the incorrect format
        return;
    } else {
        if(TR.firstLoad) {
            TR.firstLoad = 0;
        }
    }
    var swatch_counter = matches.length + 2;

    //start at A and go over current tabs and update form values
    for( var i = 1; i < TR.tabCount; i++ ) {
        TR.updateFormValues( $("#tab" + i) );
    }

    //add appropriate number of tabs to TR and swatches to preview
    for( ; TR.tabCount < swatch_counter && TR.tabCount < 28;  ) {
        TR.addSwatch( false );
    }

    //remove swatches from preview if necessary and tabs
    for( ; TR.tabCount > swatch_counter; TR.tabCount-- ) {
        TR.iframe.find( ".swatch:last" ).remove();

        $( "#tabs .ui-tabs-panel:last" ).attr( "id", "tab" + (TR.tabCount - 1) );
        $( "#tabs ul li a:contains(\"+\")" ).attr( "href", "#tab" + (TR.tabCount - 1) );
        if( $("#tabs").tabs("option", "selected") == (TR.tabCount - 2) ) {
            $( "#tabs" ).tabs( "select", 0 );
        }
        $( "#tabs" ).tabs( "remove", TR.tabCount - 2 );
    }
}

//using the TR.styleArray to successfully copy over data to appropriate swatches
//and then deleting last swatch so the one clicked appears to be deleted
TR.deleteSwatch = function( e, ele ) {
    e.preventDefault();
       var delete_class = ele.attr( "class" );
    var letter =  delete_class.substr( delete_class.length - 1, delete_class.length );
    var number = TR.num[letter];

    //log before delete
    TR.undoLog.push( TR.styleBlock.text() );
    TR.redoLog = [];

    //moving content of the tabs back one starting at the one we're deleting
    for( var i = number + 1; i <= TR.tabCount - 2; i++ ) {
        var current_letter = TR.alpha[i];
        var current_number = TR.num[current_letter];
        var indices = [];
        for( var j in TR.styleArray ) {
            var reg = new RegExp( "^" + current_letter + "-.*" );
            if( j.match(reg) ) {
                indices.push( j.match(reg) );
            }
        }
        for( var k in indices ) {
            var index = indices[k] + "";
            var suffix = index.substr( 1, index.length - 1 );
            TR.styleArray[TR.alpha[current_number - 1] + suffix] = TR.styleArray[index];
            if( (current_number + 2) == TR.tabCount ) {
                delete( TR.styleArray[index] );
            }
        }

        TR.updateFormValues( $("#tab" + i) );
    }

    //deleting the last swatch's rules in the TR.styleArray
    var last_letter = TR.alpha[TR.tabCount - 2];
    var prefix = last_letter + "-";
    var newStyleArray = {};
    for( var i in TR.styleArray ) {
        if( i.indexOf(prefix) != 0 ) {
            newStyleArray[i] = TR.styleArray[i];
        }
    }
    TR.styleArray = newStyleArray;

    //delete the swatch's CSS from the file
    var css = TR.styleBlock.text(),
        start_reg = TR.RegExp.swatchDelimiter( TR.alpha[TR.tabCount - 2].toUpperCase() ),
        end_reg = TR.RegExp.structure,
        start = css.search( start_reg ),
        end = css.search( end_reg ),
        part1 = css.substring(0, start),
        part2 = css.substring(end, css.length);
    TR.styleBlock.text( part1 + part2 );

    TR.tabCount--;
    $( "#tabs" ).find( ".ui-tabs-panel:last" ).attr( "id", "tab" + TR.tabCount ).end()
        .find( "ul li a:contains(\"+\")" ).attr( "href", "#tab" + TR.tabCount );
    TR.iframe.find( ".swatch:last" ).remove();
    if( $("#tabs").tabs("option", "selected") == TR.tabCount - 1 ) {
        $( "#tabs" ).tabs( "select", TR.tabCount - 2 );
    }
    $( "#tabs" ).tabs( "remove", TR.tabCount - 1 );

    if( TR.tabCount == 3 ) {
        $( ".delete-swatch-a" ).hide();
    }

    var swatch_height = TR.iframe.find( ".swatch:last" ).outerHeight();
    TR.iframe.find( ".add-swatch" ).height(swatch_height);

    TR.initStyleArray( "refresh" );
    TR.updateAllCSS( true );

    return false;
}

//takes a hex color and computes the grayscale value
TR.grayValue = function( color ) {
    var color_arr = color.split( "" );

    var red = parseInt( ( color_arr[1] + color_arr[2] ), 16 );
    var green = parseInt( ( color_arr[3] + color_arr[4] ), 16 );
    var blue = parseInt( ( color_arr[5] + color_arr[6] ), 16 );

    return ( red + green + blue ) / 3;
}

TR.hex = function(x) {
    return isNaN(x) ? "00" : TR.hexDigits[(x - x % 16) / 16] + TR.hexDigits[x % 16];
}

//sets up bindings for the addSwatch method
TR.initAddSwatch = function() {
    var swatch_height = TR.iframe.find( ".swatch:last" ).outerHeight();
    TR.iframe.find( ".add-swatch" ).height(swatch_height);
    TR.iframe.find( "#add-swatch" ).bind( "click", TR.addSwatchEvent );
    $( "[href=#tab" + TR.tabCount + "]" ).bind( "click", TR.addSwatchEvent );
}

//binds TR controls to updateAllCSS
//also takes care of things like slider handle color, etc.
TR.initControls = function() {
    //Undo
    $( "#undo" ).click(function() {
        TR.undo();
    });

    //Redo
    $( "#redo" ).click(function() {
        TR.redo();
    })

    //Font Family
    $( "[data-type=font-family]" ).bind( "blur change keyup", function() {
        var name = $( this ).attr( "data-name" );
        TR.styleArray[name] = "font-family: " + this.value;
        TR.updateAllCSS();
    });

    //Link, Text Color, Text Shadow, Border Color
    $( "[data-type=link], [data-type=color], [data-type=text-shadow], [data-type=border]" )
        .bind( "blur change keyup", function(){
            TR.styleArray[$( this ).attr( "data-name" )] = this.value;
            TR.updateAllCSS();
    });

    //Corner Radius
    $( "input[data-type=radius]" ).bind("change keyup mouseup", function() {
        var $this = $( this );
        var name = $this.attr( "data-name" );
        var slider = $( ".slider[data-type=radius][data-name=" + name + "]" );
        var val = parseFloat( $this.val().replace(/[^0-9\.]/g, "") );
        slider.slider( "value", val );
        TR.styleArray[name] = $this.val();
        TR.updateAllCSS();
    });

    //Corner Radius
    $( ".slider[data-type=radius]" ).bind("change slide mouseup", function() {
        var $this = $( this );
        var name = $this.attr( "data-name" );
        var input = $( "input[data-type=radius][data-name=" + name + "]" );
        input.val( $this.slider("value") + "em" );
        TR.styleArray[name] = input.val();
        TR.updateAllCSS();
    });

    //Background Colors
    $( "[data-type=background]" ).bind( "blur slide mouseup change keyup", function(event, slider) {
        if( !TR.timerID ) {
            TR.timerID = setTimeout(function() {
                TR.timerID = 0;
            }, 100);

            var index = $( this ).attr( "data-name" ) + "";
            index = index.split( "-" );
            var prefix = index[0] + "-" + index[1];
            var color = $( "input[data-type=background][data-name|=" + prefix + "]" ).val();
            var slider_value = $( ".slider[data-type=background][data-name|=" + prefix + "]" ).slider( "value" );

            var start_end = TR.computeGradient(color, slider_value);
            var start = start_end[0];
            var end = start_end[1];

            $( "[data-type=start][data-name=" + prefix + "-background-start]" ).val( start ).css( "background-color", start );
            $( "[data-type=end][data-name=" + prefix + "-background-end]" ).val( end ).css( "background-color", end );
            TR.styleArray[prefix + "-background-color"] = color;
            TR.styleArray[prefix + "-background-start"] = start;
            TR.styleArray[prefix + "-background-end"] = end;
            TR.updateAllCSS();
        }
    });

    //Start and End colors
    $( "[data-type=start] , [data-type=end]" ).bind( "blur mouseup change keyup", function() {
        var index = $( this ).attr( "data-name" ) + "";
        index = index.split( "-" );
        var prefix = index[0] + "-" + index[1];
        var start = $( "[data-type=start][data-name=" + prefix + "-background-start]" ).val();
        var end = $( "[data-type=end][data-name=" + prefix + "-background-end]" ).val();

        TR.styleArray[prefix + "-background-start"] = start;
        TR.styleArray[prefix + "-background-end"] = end;
        TR.updateAllCSS();
    });

    //Icon Set
    $( "[data-type=icon_set]" ).bind( "blur mouseup", function() {
        TR.styleArray[$( this ).attr( "data-name" )] = "url(images/icons-18-" + this.value + ".png)";
        TR.styleArray["global-large-icon-set"] = "url(images/icons-36-" + this.value + ".png)";
        TR.updateAllCSS();
    });

    //Box Shadow
    $( "[data-type=box_shadow]" ).bind( "blur change keyup", function() {
        var color_el = $( "[data-type=box_shadow]:first" ),
            opac_el = $( "[data-type=box_shadow]:eq(1)" ),
            color_arr = color_el.val().split( "" ),
            red = parseInt( (color_arr[1] + color_arr[2]), 16 ),
            green = parseInt( (color_arr[3] + color_arr[4]), 16 ),
            blue = parseInt( (color_arr[5] + color_arr[6]), 16 ),
            opacity = parseFloat( opac_el.val() ) / 100;

        if ( !opacity ) {
            opacity = 0;
        }

        TR.styleArray["global-box-shadow-color"] = "rgba(" + red + "," + green + "," + blue + "," + opacity + ")";
        TR.updateAllCSS();
    });

    //Box Shadow
    $( "[data-type=box_shadow][data-name=global-box-shadow-size]" ).bind( "blur change keyup", function() {
        TR.styleArray["global-box-shadow-size"] = $(this).val();
        TR.updateAllCSS();
    });

    //Icon Disc
    $( "[data-type=icon_disc]" ).bind( "blur change keyup", function() {
        var elements = [];
        $( "[data-name=global-icon-disc]" ).each(function() {
            elements.push( this.value );
        });

        color_arr = elements[1].split( "" );
        var red = parseInt( (color_arr[1] + color_arr[2]), 16 );
        var green = parseInt( (color_arr[3] + color_arr[4]), 16 );
        var blue = parseInt( (color_arr[5] + color_arr[6]), 16 );

        if( elements[0] == "with_disc" ) {
            TR.styleArray["global-icon-color"] = elements[1];
            TR.styleArray["global-icon-disc"] = "rgba(" + red + "," + green + "," + blue + "," + ( parseFloat(elements[2]) / 100 ) + ")";
            TR.styleArray["global-icon-shadow"] = "rgba(255,255,255,.4)";
        } else {
            TR.styleArray["global-icon-color"] = "transparent";
            TR.styleArray["global-icon-disc"] = "transparent";
            TR.styleArray["global-icon-shadow"] = "transparent";
        }
        TR.updateAllCSS();
    });

    //global more dictionary keeps track of which start-end fields are showing
    //i.e. more["a-bar-background"] = "showing" means that the next click of that .more should
    //hide that set of start-end fields
    $( ".more" ).click(function(e) {
        e.preventDefault();
        var index = $( this ).attr( "data-name" );
        if( TR.showStartEnd[index] ) {
            if( TR.showStartEnd[index] == "showing" ) {
                $( ".start-end[data-name=" + index + "]" ).hide( "slide", {
                    direction: "up"
                }, 300);
                $( this ).text( "+" );
                TR.showStartEnd[index] = "hiding";
            } else {
                $( ".start-end[data-name=" + index + "]" ).show( "slide", {
                    direction: "up"
                }, 300);
                $( this ).text( "-" );
                TR.showStartEnd[index] = "showing";
            }
        } else {
            $( ".start-end[data-name=" + index + "]" ).show( "slide", {
                direction: "up"
            }, 300 );
            $( this ).text( "-" );
            TR.showStartEnd[index] = "showing";
        }
        return false;
    });

    //change colorwell -> change bg color of its corresponding slider
    $( ".colorwell" ).bind( "change" , function() {
        var $this = $( this );
        $( ".slider[data-name=" + $this.attr("data-name") + "][data-type=" + $this.attr("data-type") + "] a").css({
            "background": $this.val(),
            "border-color": $this.val()
        });
    });

    //initialize colors of sliders
    $( "input[data-type=background]" ).each(function() {
        var $this = $( this )
        $( ".slider[data-type=background][data-name=" + $this.attr("data-name") + "] a" ).css({
            "background": $this.val(),
            "border-color": $this.val()
        });
    });

    $( "[class|=\"delete-swatch\"]" ).click( function(e) {
        TR.deleteSwatch( e, $(this) );
    });

    $( "[class|=\"duplicate-swatch\"]" ).click( function(e) {
        e.preventDefault();
        var letter = $(this).attr('class').split('-');
        letter = letter[letter.length - 1];
        TR.addSwatch( true, letter );
    })
}

//initializes the dialogs
TR.initDialogs = function() {
    var dialogObj = {
        autoOpen: false,
        modal: true,
        resizable: false,
        draggable: false,
    };

    $( "#welcome" ).dialog( $.extend( {}, dialogObj, {
        width: 560,
        buttons: {
            "Get Rolling": function() {
                $( this ).dialog( "close" );
            }
        }
    }));

    $( "#importing" ).dialog( $.extend( {}, dialogObj, {
        height: 70
    }));

    $( "#help" ).dialog( $.extend( {}, dialogObj, {
        width: 700,
        height: 400,
        buttons: {
            "Close": function() {
                $( this ).dialog( "close" );
            }
        }
    }));

    $( "#download" ).dialog( $.extend( {}, dialogObj, {
        width: 850,
        buttons: {
            "Close": function() {
                $( this ).dialog( "close" );
            },
            "Download Zip": function() {
                var theme_name = $( "input", this ).val();
                if( theme_name && theme_name.indexOf(" ") == -1 ) {

                    $.ajax({
                        url: "./zip.php",
                        type: "POST",
                        data: "ver=" + TR.version + "&theme_name=" + $( "input", this ).val() + "&file=" + encodeURIComponent(TR.styleBlock.text()),
                        dataType: "text",
                        mimeType: "text/plain",
                        beforeSend: function() {
                            //loading gif here
                        },
                        success: function(response) {
                            window.location = response;
                            $( "#download" ).dialog( "close" );
                        }
                    });

                } else {
                    alert( "Invalid theme name" );
                }
            }
        }
    }));

    $( ".dialog#newColor" ).dialog({
        autoOpen: false,
        width: 450,
        height: 260,
        resizable: false,
        draggable: false,
        buttons: {
            "Cancel": function() {
                $( ".dialog#newColor" ).dialog( "close" );
            },
            "Submit": function() {
                var color = $( "#newColorInput" ).val().toLowerCase();
                color = /^{rgb|#}/.test( color ) ? color : "#" + color;
                if ( color.length) {
                    $.tr.addMostRecent( color, $( this ).data( "swatch" ) );
                }
                $( ".dialog#newColor" ).dialog( "close" );
            }
        },
        open: function( event, ui ) {
            var currentColor = $.tr.rgbtohex( $( this ).data( "swatch" ).css( "background-color" ) );
            $( "#newColorInput" )
                .val( currentColor )
                .next().css( "background-color", currentColor )
                .end()
                .keyup( function( event ) {
                    var input = $( this );
                    if ( event.keyCode === $.ui.keyCode.ENTER ) {
                        input.closest( ".ui-dialog" ).find( "button" ).eq( 1 ).click();
                    }
                    input.next().css( "background-color", input.val() );
                });
        }
    });

    //help dialog
    $( "#help-button" ).click(function(e) {
        e.preventDefault();
        $( "#help" ).dialog( "open" );
    });

    //upload dialog
    $( "#import-button" ).click(function() {
        $( "#upload" ).dialog( "open" );
        return false;
    });

    //download dialog
    $( "#download-button" ).click(function() {
        $( "#download" ).dialog( "open" );
        return false;
    });

    //removing the close button from ui-dialogs
    $( ".tr_widget .ui-dialog-titlebar-close" ).remove();
}

//initializes the draggable colors and the drop method
TR.initDraggableColors = function() {
    //draggable colors
    $( ".color-drag" ).draggable({
        appendTo: "body",
        revert: true,
        revertDuration: 200,
        opacity: 1,
        containment: "document",
        cursor: "move",
        helper: "clone",
        zIndex: 3000,
        iframeFix: true,
        drag: function() {
            TR.movingColor = 1;
        }
    });

    $( ".color-drag.disabled" ).draggable( "disable" );

    //droppable for colorwell
    $( ".colorwell" ).droppable({
        accept: ".color-drag",
        hoverClass: "hover",
        drop: function() {
            var $this = $( this );
            var color = $(".ui-draggable-dragging").css("background-color");
            if( color != "transparent" ) {
                color = TR.rgbtohex( color );
            }