/* generic asset view
================================================== */
function GenericAssetView(dom_el, model){
    //init view
    //this.init(dom_el, model); 
    
    this.originalDisplay;
    this.setOriginalDisplay = function(val){
       this.originalDisplay = val;
    }
    this.getOriginalDisplay = function(){
       return this.originalDisplay;
    }           
}
GenericAssetView.prototype = new GenericView();





/* IMAGE ASSET VIEW
================================================== */
function ImageAssetView(dom_el, model){
            
    var _this = this;
    
    this.render = function(){
        _this.el.css('left', _this.model.getPX()+'px');
        _this.el.css('top', _this.model.getPY()+'px');
        _this.el.css('z-index', _this.model.getZindex());
        (_this.model.getSelected())?_this.el.addClass('assetSelected'):_this.el.removeClass('assetSelected');
        EventBus.dispatchEvent(new Event(Event.ASSET_CHANGE, _this.model));        
    }
    
    //init view
    this.init(dom_el, model);              
    
    if(!model.getIsFrontView()){
        //drag handler
        this.el.draggable({start: function(){
             EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        }, stop: function(){
            //stop drag - inform model
            var px = Utils.extractNumber(jQuery(this).css('left'));
            var py = Utils.extractNumber(jQuery(this).css('top'));
            _this.model.setPosition({px: px, py: py});
        }});
        
        //click handler
        this.el.click(function(e){
            e.preventDefault();
            EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        });        
    }else{
        //check for click/target 
    }
    this.el.css('position', 'absolute');
    
    
        
}
ImageAssetView.prototype = new GenericAssetView();



/* TEXT ASSET VIEW
================================================== */
function TextAssetView(dom_el, model){
            
    var _this = this;
    
    this.render = function(){
        _this.el.css('left', _this.model.getPX()+'px');
        _this.el.css('top', _this.model.getPY()+'px');
        _this.el.css('z-index', _this.model.getZindex());
        (_this.model.getSelected())?_this.el.addClass('assetSelected'):_this.el.removeClass('assetSelected');
        
        //set text properties
        _this.el.html(unescapeHTML(_this.model.getText()));
        _this.el.css('font-size', _this.model.getFontSize()+'px');
        _this.el.css('line-height', _this.model.getLineHeight()+'px');
        _this.el.css('color', '#'+_this.model.getFontColor());
        _this.el.css('font-family', _this.model.getFontData().font);
        _this.el.css('font-weight', _this.model.getFontWeight());
        _this.el.css('font-style', _this.model.getFontStyle());
        _this.el.css('text-decoration', _this.model.getTextDecoration());
        _this.el.css('text-align', _this.model.getTextAlign());
        (_this.model.getBackgroundColor()=="")?_this.el.css('background', 'none'):_this.el.css('background-color', '#'+_this.model.getBackgroundColor());
        
        EventBus.dispatchEvent(new Event(Event.ASSET_CHANGE, _this.model));        
    }
    
    //init view
    this.init(dom_el, model);              
    
    if(!model.getIsFrontView()){
        //drag handler
        this.el.draggable({start: function(){
             EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        }, stop: function(){
            //stop drag - inform model
            var px = Utils.extractNumber(jQuery(this).css('left'));
            var py = Utils.extractNumber(jQuery(this).css('top'));
            _this.model.setPosition({px: px, py: py});
        }});
        
        //click handler
        this.el.click(function(e){
            e.preventDefault();
            EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        });        
    }else{
        //check for click/target
    }
    
    
    this.el.css('position', 'absolute');
        
}
TextAssetView.prototype = new GenericAssetView();




/* BUTTON ASSET VIEW
================================================== */
function ButtonAssetView(dom_el, model){
         
    var _this = this;
    
    this.render = function(){
        _this.el.css('left', _this.model.getPX()+'px');
        _this.el.css('top', _this.model.getPY()+'px');
        _this.el.css('z-index', _this.model.getZindex());
        (_this.model.getSelected())?_this.el.addClass('assetSelected'):_this.el.removeClass('assetSelected');
        
        //set button properties
        _this.el.html(_this.model.getText());
        _this.el.addClass(_this.model.getButtonStyle());
        _this.el.css('cursor', 'default'); 
        
        EventBus.dispatchEvent(new Event(Event.ASSET_CHANGE, _this.model));        
    }
    
    //init view
    this.init(dom_el, model);              
    
    if(!model.getIsFrontView()){
        //drag handler
        this.el.draggable({start: function(){
             EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        }, stop: function(){
            //stop drag - inform model
            var px = Utils.extractNumber(jQuery(this).css('left'));
            var py = Utils.extractNumber(jQuery(this).css('top'));
            _this.model.setPosition({px: px, py: py});
        }});
        
        //click handler
        this.el.click(function(e){
            e.preventDefault();            
            EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        });        
    }else{
        //check for click/target
    }
    
    
    this.el.css('position', 'absolute');
        
}
ButtonAssetView.prototype = new GenericAssetView();





/* RECTANGLE ASSET VIEW
================================================== */
function RectangleAssetView(dom_el, model){
         
    var _this = this;
    
    this.render = function(){
        _this.el.css('left', _this.model.getPX()+'px');
        _this.el.css('top', _this.model.getPY()+'px');
        _this.el.css('z-index', _this.model.getZindex());
        (_this.model.getSelected())?_this.el.addClass('assetSelected'):_this.el.removeClass('assetSelected');
        
        //set rectangle properties
        _this.el.css('width', _this.model.getWidth()+'px');
        _this.el.css('height', _this.model.getHeight()+'px');
        _this.el.css('background-color', '#'+_this.model.getBackgroundColor());
        _this.el.css('opacity', _this.model.getOpacity());

        
        EventBus.dispatchEvent(new Event(Event.ASSET_CHANGE, _this.model));        
    }
    
    //init view
    this.init(dom_el, model);              
    
    if(!model.getIsFrontView()){
        //drag handler
        this.el.draggable({start: function(){
             EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        }, stop: function(){
            //stop drag - inform model
            var px = Utils.extractNumber(jQuery(this).css('left'));
            var py = Utils.extractNumber(jQuery(this).css('top'));
            _this.model.setPosition({px: px, py: py});
        }});
        
        //click handler
        this.el.click(function(e){
            e.preventDefault();
            EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        });        
    }else{
        //check for click/target
    }
    
    this.el.css('position', 'absolute');
        
}
RectangleAssetView.prototype = new GenericAssetView();


/* FORM ASSET VIEW
================================================== */
function FormAssetView(dom_el, model){
         
    var _this = this;
    
    this.render = function(){
        _this.el.css('left', _this.model.getPX()+'px');
        _this.el.css('top', _this.model.getPY()+'px');
        _this.el.css('z-index', _this.model.getZindex());
        (_this.model.getSelected())?_this.el.addClass('assetSelected'):_this.el.removeClass('assetSelected');
        

        
        EventBus.dispatchEvent(new Event(Event.ASSET_CHANGE, _this.model));        
    }
    
    //init view
    this.init(dom_el, model);              
    
    if(!model.getIsFrontView()){
        //drag handler
        this.el.draggable({start: function(){
             EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        }, stop: function(){
            //stop drag - inform model
            var px = Utils.extractNumber(jQuery(this).css('left'));
            var py = Utils.extractNumber(jQuery(this).css('top'));
            _this.model.setPosition({px: px, py: py});
        }});
        
        //click handler
        this.el.click(function(e){
            e.preventDefault();
            EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        });        
    }else{
        //check for click/target
    }
    
    this.el.css('position', 'absolute');
        
}
FormAssetView.prototype = new GenericAssetView();

/* CODE ASSET VIEW
================================================== */
function CodeAssetView(dom_el, model){
         
    var _this = this;
    
    this.render = function(){
        _this.el.css('left', _this.model.getPX()+'px');
        _this.el.css('top', _this.model.getPY()+'px');
        _this.el.css('z-index', _this.model.getZindex());
        (_this.model.getSelected())?_this.el.addClass('assetSelected'):_this.el.removeClass('assetSelected');
        
        //set rectangle properties
        _this.el.css('width', _this.model.getWidth()+'px');
        _this.el.css('height', _this.model.getHeight()+'px');        

        
        EventBus.dispatchEvent(new Event(Event.ASSET_CHANGE, _this.model));        
    }
    
    //init view
    this.init(dom_el, model);              
    
    if(!model.getIsFrontView()){        
        _this.el.css('background-color', '#'+_this.model.getBackgroundColor());                
        //drag handler
        this.el.draggable({start: function(){
             EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        }, stop: function(){
            //stop drag - inform model
            var px = Utils.extractNumber(jQuery(this).css('left'));
            var py = Utils.extractNumber(jQuery(this).css('top'));
            _this.model.setPosition({px: px, py: py});
        }});
        
        //click handler
        this.el.click(function(e){
            e.preventDefault();
            EventBus.dispatchEvent(new Event(Event.SELECT_ASSET, _this.model));
        });        
    }else{
        _this.el.html(unescapeHTML(_this.model.getCodeSrc()));
    }
    this.el.css('position', 'absolute');
        
}
CodeAssetView.prototype = new GenericAssetView();

function unescapeHTML(escapedHTML) {
   return escapedHTML.replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/&amp;/g,'&');
}