'use strict';

/*@
Ox.LoadingIcon <f:Ox.Element> Loading Icon Element
    () ->              <f> Loading Icon Element
    (options) ->       <f> Loading Icon Element
    (options, self) -> <f> Loading Icon Element
    options <o> Options object
        size     <s|medium> size of icon
    self <o>    Shared private variable
@*/

Ox.LoadingIcon = function(options, self) {

    self = self || {};
    var that = Ox.Element('<img>', self)
        .defaults({
            size: 'medium'
        })
        .options(options || {})
        .attr({
            src: Ox.UI.getImageURL('symbolLoading')
        })
        .addClass(
            'OxLoadingIcon Ox' + Ox.toTitleCase(self.options.size)
        );

    self.setOption = function(key, value) {
        
    };

    /*@
    start <f> Start loading animation
        ()  -> <f> Loading Icon Element
    @*/
    that.start = function() {
        that.attr({
            src: Ox.UI.getImageURL('symbolLoadingAnimated')
        })
        .animate({
            opacity: 1
        }, 250);
        return that;
    };

    /*@
    stop <f> Stop loading animation
        ()  -> <f> Loading Icon Element
    @*/
    that.stop = function() {
        that.animate({
            opacity: 0
        }, 250, function() {
            that.attr({
                src: Ox.UI.getImageURL('symbolLoading')
            });
        });        
        return that;
    };

    return that;

};