var cssPrism = {
    init: function() {
        var self = this;
        self.f = $('#css_path_form');
        self.formInit();
        
        if ($('body').hasClass('body_css_detail')) {
            self.colors = $('.color');
            self.replaceInput = $("#replace");
            self.replacements = self.replaceInput.val().split(",");

            self.storeLoadedColors(self.colors, self.replacements);

            self.colorClickHandler();
        }
        
    },
    
    formInit: function() {
        var self = this;
        
        $('#submit_link').click(function(e) {
            e.preventDefault();
            self.f.submit();
        });
        
        self.f.submit(function(e) {
            e.preventDefault();
            var cssVal = $('#css_path').val();
            window.location = decodeURI(window.location.protocol + "//" + window.location.host + "/spectrum/?css=" + self.cleanURL(cssVal));
        });
    },
    
    colorClickHandler: function() {
        var self = this;
        $('.color').click(function(e) {
            e.preventDefault();
            var c = $(this);
            self.selectColor(c);
        })
        
    },
    selectColor: function(color) {
        /*
        color is a jquery element containing the li.color for this value
        */
        var self = this,
            color_hex = color.find('a.color_value').text().replace('#', '');
            
        // Adjust html classes to put the proper arrow on top of this color
        color.siblings().removeClass('color_selected');
        color.addClass('color_selected');
        
        var cp = $('.colorpicker');
        
        // Modify or create the colorpicker
        if (cp.length) {
            // There's already a colorpicker. Just change its value
            $('#colorpicker_container').ColorPickerSetColor(self.fullHex(color_hex));
            // Hide the 'apply' button until a new color is selected
            $('.colorpicker_submit').removeClass('colorChanged');
            
        } else {
            // Create the colorpicker
            self.pickerInit(self.fullHex(color_hex));
            // Remove instructions, show action buttons
            $('#css_instructions').css('display', 'none');
            $('#actions').addClass('visible');
        }
        
        // Populate the meta area with instance info for this color
        var color_instance_list_wrapper = color.find('div.color_instance_list_wrapper');
        
        if (color_instance_list_wrapper.length) {
            $('#color_meta').html(color_instance_list_wrapper.html());
            var instanceList = $('#sidebar .color_instance_list').eq(0);
            instanceListHeight = $(window).height() - instanceList.offset().top - 10;
            instanceList.css('height', instanceListHeight + 'px').jScrollPane();
        } else {
            $('#color_meta').html('');
        }
        
        
    },
    
    addHash: function(h) {
        if (h.charAt(0) != "#") { return "#" + h; } else { return h; }
    },
    
    removeHash: function(h) {
        if (h.charAt(0) == "#") { return h.substring(1, h.length); } else { return h; }
    },
    
    fullHex: function(h) {
        // Always send a 6-digit hex, not 3
        if (h.length == 3) {
			var chars = h.split('');
			var h_new = "";
			for (i=0; i < 3; i++) {
				h_new += chars[i] + chars[i];
			}
			
			return h_new;
		}
		
		return h;
    },
    
    applyColor: function(sb, hex, rgb, el) {
        var self = cssPrism,
            thisPicker = $(el),
            colorDiv = $('.color_selected'),
            fullHex = self.addHash(hex);
            
        // Visual changes
        colorDiv.css('background', fullHex).find('a.color_value').text(fullHex);
        colorDiv.find('.color_value').text(fullHex);
        
        // Handle replacements
        var replaceInput = $('#replace'),
            replacements = replaceInput.val(),
            loadColor = colorDiv.data('loadColor'),
            originalColor = colorDiv.data('originalColor'),
            overwritten = false;
            
        if (!replacements) {
            // This is the first replacement being made
            var newReplacements = originalColor + ':' + hex;
        } else {
            replacements = replacements.split(',');
            
            for (var i=0; i < replacements.length; i++) {
                var replacement = replacements[i].split(':');
                
                if (replacement[0] == originalColor) {
                    // Color has been replaced already. Just change the new value
                    replacement[1] = hex;
                    replacements[i] = replacement.join(':');
                    overwritten = true;
                }
                
            }
            
            if (overwritten == false) {
                // This color has never been replaced before. Add it to the list
                var newReplacements = replacements.push(loadColor + ':' + hex);
            }
            
            newReplacements = replacements.join(',');
            
            if (newReplacements.charAt(0) == ',') {
                // Get rid of an erroneous leading comma
                newReplacements = newReplacements.substring(1, replacements.length);
            }
            
        }
        replaceInput.val(newReplacements);
        
        if (!replacements) {
            cssPrism.enableActions();
        }
        
        self.updateActionLinks();
    },
    
    changeColor: function() {
        // Display the 'apply' button when a new color is selected
        $('.colorpicker_submit').addClass('colorChanged');
    },
    
    pickerInit: function(h) {
        var self = this;
        $('#colorpicker_container').ColorPicker({
            color: h,
            flat: true,
            onSubmit: self.applyColor,
            onChange: self.changeColor
            
        });
    },
    
    storeBaseDownloadLink: function() {
        var downloadLink = $("#action_download");
        downloadLink.data('baseDownloadLink', downloadLink.attr('href'));
    },
    
    updateActionLinks: function() {
        var downloadLink = $('#action_download'),
            newLink = '/spectrum/?css=' + $('#css_path').val(),
            replacements = $('#replace').val();
            
        if (replacements) {
            newLink += '&replace=' + replacements;
        }
        
        downloadLink.attr('href', newLink += '&download=1');
    },
    
    storeLoadedColors: function(colors, replacements) {
        var self = this;
        
        colors.each(function() {
            var color = $(this),
                loadColor = self.removeHash(color.find('.color_value').text());
                
            color.data('loadColor', loadColor);
            
            var originalColor = self.checkReplacements(replacements, 1, loadColor);
            
            if (originalColor) {
                color.data('originalColor', originalColor);
            } else {
                color.data('originalColor', loadColor);
            }
        });
    },
    
    checkReplacements: function(replacements, index, color) {
        // Replacements should be a list, i=0 or 1 (old or new)
        // Replacements format: ['aaa:aa1', '000:001']
        
        for (var i=0; i < replacements.length; i++) {
            var replacement = replacements[i].split(':'),
                originalColor = this.checkReplacement(replacement, index, color);
                
            if (originalColor) {
                return cssPrism.colors.removeHash(originalColor);
            }
        }
        
        return false;
    },
    
    checkReplacement: function(replacement, index, color) {
        if (replacement[index] == color) { return replacement[0]; } else { return false; }
    },
    
    cleanURL: function(url) {
        if (url.indexOf("http://") != 0 && url.indexOf("https://") != 0) {
            return "http://" + url;
        } else {
            return url;
        }
    },
    
    enableActions: function() {
        var downloadSpan = $('#action_download'),
            downloadLink = $('<a class="button" id="action_download" target="_blank">' + downloadSpan.html() + '</a>');
            
        downloadSpan.replaceWith(downloadLink);
            
    },
    
    disableActions: function() {
        var downloadLink = $('#action_download'),
            downloadSpan = $('<span class="button" id="action_download">' + downloadLink.html() + '</span>');
            
        downloadLink.replaceWith(downloadSpan);
        
    }
}

/*
$('.color').each(function() {
    var color = $(this),
        y = color.index() * color.height();
        
    color.animate({marginLeft: '0px'}, 300, 'swing');
});
*/

cssPrism.init();