'use strict';

/*@
Ox.getImageURL <f> Returns the URL of an Ox.UI image
    (name[, color[, theme]]) -> <s> Image URL
    name <s> Image name
    color <s|[n]> Color name or RGB values
    theme <s> Theme name
@*/
Ox.getImageURL = Ox.cache(function(name, color, theme) {
    var colorName,
        image = images[name],
        themeData,
        type = Ox.toDashes(name).split('-')[0];
    color = color || 'default';
    theme = theme || Ox.Theme();
    themeData = Ox.Theme.getThemeData(theme);
    if (type == 'symbol') {
        if (Ox.isString(color)) {
            colorName = color;
            color = themeData[
                'symbol' + color[0].toUpperCase() + color.slice(1) + 'Color'
            ];
        }
        image = image.replace(/#808080/g, '#' + Ox.toHex(color));
    }
    Ox.forEach(colors[type], function(name, hex) {
        image = image.replace(
            new RegExp(hex, 'g'),
            '$' + Ox.toHex(themeData[name])
        );
    });
    image = image.replace(/\$/g, '#');
    return 'data:image/svg+xml;base64,' + btoa(
        image + '<!--' + JSON.stringify(Ox.extend(color ? {
            color: colorName
        } : {}, {
            name: name, theme: theme
        })) + '-->'
    );
}, {
    key: function(args) {
        args[1] = args[1] || 'default';
        args[2] = args[2] || Ox.Theme();
        return JSON.stringify(args);
    }
});

//@ Ox.getOxElement <f> Returns the Ox.Element of a DOM element, or `undefined`
Ox.getOxElement = function(element) {
    return Ox.elements[$(element).data('oxid')];
};

//@ Ox.isOxElement <f> Returns `true` if a DOM element is an Ox.Element
Ox.isOxElement = Ox.UI.isOxElement = function(element) {
    return !!$(element).data('oxid');
};

//@ Ox.SCOLLBAR_SIZE <n> size of scrollbars
Ox.SCROLLBAR_SIZE = Ox.UI.SCROLLBAR_SIZE = $.browser.webkit ? 8 : (function() {
    var inner = Ox.$('<p>').css({
            height: '200px',
            width: '100%'
        }),
        outer = Ox.$('<div>').css({
            height: '150px',
            left: 0,
            overflow: 'hidden',
            position: 'absolute',
            top: 0,
            visibility: 'hidden',
            width: '200px'
        }).append(inner).appendTo($('body')),
        width = inner[0].offsetWidth;
    outer.css({overflow: 'scroll'});
    width = 1 + width - (inner[0].offsetWidth == width
        ? outer[0].clientWidth : inner[0].offsetWidth);
    outer.remove();
    return width;
})();