"use strict";
(function() {
    var moduleName = "views/songProgress";
    
    var deps = [];
    deps.push("views/view");
    
    define(moduleName, deps, function() {
        var View = require("views/view");
        
        var SongProgress = View.inherit({
            className: "SongProgress",
            constructor: function(controller, options) {
                var base = {
                    minHeight: 10,
                    maxHeight: 10
                };
                W.extend(base, options)
                var el = document.createElement("div");
                this._createBars();
                View.fn.constructor.call(this, controller, base, el);
                
                this._f.on("load", this._onLoad, this);
                this._f.on("playback", this._onPlayback, this);
                
                this._e.style.backgroundColor = "#eeeeee";
                this._e.appendChild(this._loadProgress);
                this._e.appendChild(this._playbackProgress);
            },
            destructor: function() {
                this._f.off("load", this._onLoad, this);
                this._f.off("playback", this._onPlayback, this);
                
                View.fn.destructor.call(this);
            },
            _createBars: function() {
                
                this._loadProgress = document.createElement("div");
                this._playbackProgress = document.createElement("div");
                
                this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00";
                this._loadProgress.style.height = "100%";
                this._loadProgress.style.width = "0";
                this._loadProgress.style.position = "absolute";
                this._loadProgress.style.top = "0";
                this._loadProgress.style.left = "0";
                
                this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
                this._playbackProgress.style.height = "100%";
                this._playbackProgress.style.width = "0";
                this._playbackProgress.style.position = "absolute";
                this._playbackProgress.style.top = "0";
                this._playbackProgress.style.left = "0";
            },
            _onData: function() {
                this._onLoad(this._f.load);
                this._onPlayback(this._f.playback);
            },
            _onLoad: function(load) {
                this._loadProgress.style.width = load * 100 + "%";
            },
            _onPlayback: function(pb) {
                this._playbackProgress.style.width = pb * 100 + "%";
            },
            _resetTheme: function() {
                View.fn._resetTheme.call(this);
                
                this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00"
                this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
            }
        });
        
        return SongProgress;
    })
})();