// TODO: add dependency to device_data.js
// TODO: prevent images array from growing forever
var DeviceImageManager = Class.create();
DeviceImageManager.prototype = {
// constructor
    initialize: function(imageElement, ids, prefix, deviceData, width, height) {
        // initialize values
        this.imageElement = $(imageElement);
        this.ids = (ids == null) ? new Array() : ids;
        this.prefix = prefix;
        this.deviceData = (deviceData == null) ? new DeviceData() : deviceData;
        this.preloaded = false;
        this.width = (width != null) ? width : 59;
        this.height = (height != null) ? height : 110;
        this.tooltipElement = $('tooltip');
        // define callbacks
        this.deviceData.deviceLoadedCallback = this.renderDeviceImage.bind(this);
        this.deviceData.devicesLoadedCallback = this.preloadCallback.bind(this);
    },
    preload: function() {
        this.deviceData.loadDevicesWithGraphic(this.ids);
    },
    preloadCallback: function() {
        var devices = this.deviceData.devices;
        var firstDeviceId = 0;
        for (var i = 0; i < devices.length; i++) {
            // preload device image
            var device = devices[i];
            var graphicObject = device['graphicObject'];
            if (graphicObject) {
                var image = new Image();
                graphicObject['image'] = image;
                image.src = graphicObject['path'];
            }
            if (i == 0) {
                // save first device id
                firstDeviceId = device['id'];
            }
        }
        this.preloaded = true;
        if (firstDeviceId != 0) {
            this.selectDevice(firstDeviceId);
        }
    },
    observeDeviceElements: function() {
        var element;
        for (var i = 0; i < this.ids.length; i++) {
            element = $(this.prefix + this.ids[i]);
            element.deviceId = this.ids[i];
            Event.observe(element, "mouseover", this.selectDeviceByEvent.bind(this));
            if (this.tooltipElement) {
                new Tooltip(element, this.tooltipElement);
                Event.observe(element, "mouseout", this.renderBlankDeviceImage.bind(this));
            }
        }
    },
    selectDeviceByEvent: function(event) {
        var element = Event.element(event);
        if (element != undefined) {
            if (element.deviceId != undefined) {
                this.deviceData.selectDeviceWithGraphic(element.deviceId);
            }
        }
    },
    selectDevice: function(id) {
        this.deviceData.selectDeviceWithGraphic(id);
    },
    renderDeviceImage: function() {
        var device = this.deviceData.device;
        if (device) {
            var graphicObject = device['graphicObject'];
            if (graphicObject) {
                // load image
                var image = new Image();
                graphicObject['image'] = image;
                image.onload = this.renderRealDeviceImage.bind(this);
                image.src = graphicObject['path'];
            } else {
                this.renderMissingDeviceImage();
            }
        } else {
            this.renderMissingDeviceImage();
        }
    },
    renderRealDeviceImage: function() {
        var device = this.deviceData.device;
        if (device) {
            var graphicObject = device['graphicObject'];
            if (graphicObject) {
                this.imageElement.innerHTML = '<img ' +
                                              'src="' + graphicObject['path'] + '"' +
                                              'width="' + this.width + '"' +
                                              'height="' + this.height + '"' +
                                              '/>';
            }
        }
    },
    renderBlankDeviceImage: function() {
        this.imageElement.innerHTML = '<img ' +
                                      'src="/images/WhtBck.gif"' +
                                      'width="' + this.width + '"' +
                                      'height="' + this.height + '"' +
                                      '/>';
    },
    renderMissingDeviceImage: function() {
        this.imageElement.innerHTML = '<img ' +
                                      'src="/images/' + this.width + 'x' + this.height + '_phone_gen_trans.gif"' +
                                      'width="' + this.width + '"' +
                                      'height="' + this.height + '"' +
                                      '/>';
    }
}