//OBJECT PROPERTIES
function PropertiesViews(){
    
    var timelineContainerUI;
    this.init = function(){
        timelineContainerUI = jQuery('#propertiesContainer');
        EventBus.addEventListener(Event.SELECT_ASSET, this.onAssetSelect);
        EventBus.addEventListener(Event.REMOVE_VIEW, this.onRemoveAssetItem);
    } 
    
    this.onRemoveAssetItem = function(){
        gccContainer();
    }
    
    var currentModel;
    this.onAssetSelect = function(event){
        if(_.isEqual(currentModel, event.data)){
            return;
        }
        currentModel = event.data;
        gccContainer();
        var genericPropView;
        switch(event.data.getType()){
            case GenericAssetModel.IMAGE:
            genericPropView = new ImageProperties(event.data);            
            break;
            case GenericAssetModel.TEXT:
            genericPropView = new TextProperties(event.data);
            break;
            case GenericAssetModel.BUTTON:
            genericPropView = new ButtonProperties(event.data);
            break;
            case GenericAssetModel.CODE:
            genericPropView = new CodeProperties(event.data);
            break;
            case GenericAssetModel.RECTANGLE:
            genericPropView = new RectangleProperties(event.data);
            break;                
			case GenericAssetModel.FORM:
            genericPropView = new FormProperties(event.data);
            break;                			
        }
    }
    
    function gccContainer(){
        try{
            jQuery('#propertiesContainer').empty();
            jQuery('#custompropContainer').empty();
        }catch(e){}
    }
}



//GENERIC PROPERTIES VIEW
function GenericPropertiesView(){
    this.model;    
    this.init = function(m){
        var _this = this;
        this.model = m;
        
        
        ////////RIGHT PANEL PROPERTIES
        //========================================
                
        ////////INCOMMING template
        jQuery(SkTemplates.getInstance().getIncomming(this.model.getIncomingAnimationType(), this.model.getIncomingAnimationEfx())).appendTo(jQuery('#propertiesContainer'));
        
        
        //start at spiner
        var maxStartAt = this.model.getOutgoingStartAt()-.2;
        maxStartAt = 3600;      
        var incommingDurationSpinerUIStart = jQuery('#incommingAnimation').find('.spinnerBoxStart');
        var spinerInStart = incommingDurationSpinerUIStart.spinner({step: 0.100, min: 0, max: maxStartAt, spin: function(e, ui){            
            _this.model.setIncomeStartAt(ui.value);
            validateSpinerStartAt();
        }});
        spinerInStart.spinner("value", this.model.getIncomeStartAt());
        incommingDurationSpinerUIStart.keyup(function(){
            _this.model.setIncomeStartAt(jQuery(this).val());
            validateSpinerStartAt();
        });        
        
        //duration spiner
        var incommingDurationSpinerUI = jQuery('#incommingAnimation').find('.spinnerBox');                
        var spinerIn = incommingDurationSpinerUI.spinner({step: 0.100, min: 0, max: 500, spin: function(e, ui){            
            _this.model.setIncomingAnimationTime(ui.value);
            validateSpinerStartAt();           
        }});
        spinerIn.spinner("value", this.model.getIncomingAnimationTime());        
        incommingDurationSpinerUI.keyup(function(){                      
            _this.model.setIncomingAnimationTime(jQuery(this).val());            
            validateSpinerStartAt();
        });        
        
                
        //validate spiiner start at
        function validateSpinerStartAt(){
            var startAt = _this.model.getIncomeStartAt();
            var startDuration = _this.model.getIncomingAnimationTime();
            var endAt = _this.model.getOutgoingStartAt();
            var endDuration = _this.model.getOutgoingAnimationTime();
            if((startAt+startDuration)>(endAt+endDuration)){
                //modify outgoing
                console.log('modify');
                outgoingDurationSpinerUIStart.val(startAt+startDuration+0.2);
                _this.model.setOutgoingStartAt(startAt+startDuration+0.2);
                try{
                    spinerOutStart.spinner( "option", "min", _this.model.getIncomeStartAt()+_this.model.getIncomingAnimationTime()+.2);
                }catch(e){}                
            }
        }                
                        
        
        var inAnimationTypeUI = jQuery('#incommingAnimation').find('.atype');
        inAnimationTypeUI.change(function(){
            _this.model.setIncomingAnimationType(jQuery(this).val());
        });
               
        
        var inAnimationEfx = jQuery('#incommingAnimation').find('.efx');
        inAnimationEfx.change(function(){
            _this.model.setIncomingAnimationEfx(jQuery(this).val());
        });
        
        
        ///////OUTGOING template        
        
        jQuery(SkTemplates.getInstance().getOutgoing(this.model.getOutgoingAnimationType(), this.model.getOutgoingAnimationEfx(), this.model.getIsOutgoing())).appendTo(jQuery('#propertiesContainer'));
                
        //is outgoing
        jQuery('#isOotgoingAnimation').change(function(){       
            _this.model.setIsOutgoing(this.checked);
            showOutgoing(this.checked);
        }); 
        showOutgoing(_this.model.getIsOutgoing());
        function showOutgoing(val){
            if(val){
                jQuery('#outgoingAnimation').css('display', 'block');
                jQuery('#outgoingTitle').css('display', 'block');
            }else{
                jQuery('#outgoingAnimation').css('display', 'none');
                jQuery('#outgoingTitle').css('display', 'none');
            }
        }        
        
        
        //spiner out start
        var outgoingDurationSpinerUIStart = jQuery('#outgoingAnimation').find('.spinnerBoxStart');
        var spinerOutStart = outgoingDurationSpinerUIStart.spinner({step: 0.100, min: 1.2, max: 3600, spin: function(e, ui){            
            _this.model.setOutgoingStartAt(ui.value);
            validateSpinerStartAt();           
        }});
        spinerOutStart.spinner("value", this.model.getOutgoingStartAt());
        outgoingDurationSpinerUIStart.keyup(function(){
            _this.model.setOutgoingStartAt(jQuery(this).val());
            validateSpinerStartAt();
        });        
        
        //spiner out duration
        var outgoingDurationSpinerUI = jQuery('#outgoingAnimation').find('.spinnerBox');
        var spinerOut = outgoingDurationSpinerUI.spinner({step: 0.100, min: 0, max: 5, spin: function(e, ui){            
            _this.model.setOutgoingAnimationTime(ui.value);
            validateSpinerStartAt();
        }});
        spinerOut.spinner("value", this.model.getOutgoingAnimationTime());
        outgoingDurationSpinerUI.keyup(function(){
            _this.model.setOutgoingAnimationTime(jQuery(this).val());
            validateSpinerStartAt();
        });                                
        
                                        
        
        var outAnimationTypeUI = jQuery('#outgoingAnimation').find('.atype');
        outAnimationTypeUI.change(function(){
            _this.model.setOutgoingAnimationType(jQuery(this).val());
        });
        var outAnimationEfx = jQuery('#outgoingAnimation').find('.efx');
        outAnimationEfx.change(function(){
            _this.model.setOutgoingAnimationEfx(jQuery(this).val());
        });
           
        
        
        ////////BOTTOM PROPERTIES
        //========================================
        //remove template
        jQuery(SkTemplates.getInstance().getRemove(this.model.getStopVideoOnShow(), this.model.getStartVideoOnExit())).appendTo(jQuery('#custompropContainer'));
        jQuery('#custompropContainer').find('.removeObjBTN').click(function(e){
            //e.preventDefault();
            if(confirm('Are you sure you want to remove this object?')) {            
                EventBus.dispatchEvent(new Event(Event.REMOVE, _this.model));
            }else{}
        });
        
        //z-index spiner
        var zSoinerUIStart = jQuery('#removeBox').find('.spinnerBox');
        var spinerZ = zSoinerUIStart.spinner({step: 1, min: 0, max: 1000, spin: function(e, ui){            
            _this.model.setZindex(ui.value);           
        }});
        spinerZ.spinner("value", this.model.getZindex());          
        
        //stop video on show
        jQuery('#stopAnimationCB').change(function(){            
            _this.model.setStopVideoOnShow(this.checked);
        }); 
        
        /*
        //play video on exit
        jQuery('#stopExitAnimationCB').change(function(){            
            _this.model.setStartVideoOnExit(this.checked);
        });                       
        */
        //URL template
        jQuery(SkTemplates.getInstance().getURLTemplate(this.model.getURL(), this.model.getTarget())).appendTo(jQuery('#custompropContainer'));
        jQuery('#linkBox').find('.inputText').change(function(){
            _this.model.setURL(jQuery(this).val());
        });
        jQuery('#linkBox').find('.target').change(function(){
            _this.model.setTarget(jQuery(this).val());
        });
                                           
    }
}

//IMAGE PROPERTIES VIEW
function ImageProperties(data){
    
    this.init(data);
    
    var _self = this;
    //main rectangle prop box
    jQuery(SkTemplates.getInstance().getImageMainProp(this.model.getPlayVidOnClick(), this.model.getCloseAdvertise())).appendTo(jQuery('#custompropContainer'));    
    
    
    //play video on click action
    jQuery('#iPlayVidCB').change(function(){            
        _self.model.setPlayVidOnClick(this.checked);
    });    
    
    //close all ads on click
    jQuery('#iCloseAdsCB').change(function(){            
        _self.model.setCloseAdvertise(this.checked);
    });           
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#custompropContainer'));    
    
    
    
}
ImageProperties.prototype = new GenericPropertiesView();




//RECLANGLE PROPERTIES VIEW
function RectangleProperties(data){
    
    this.init(data);
    
    var _self = this;
    //main rectangle prop box
    jQuery(SkTemplates.getInstance().getRectangleMainPropBox(this.model.getBackgroundColor())).appendTo(jQuery('#custompropContainer'));
    
        //width spinner
        var rWSpinnerUI = jQuery('#rectangleMainProps').find('#rWSpinner');
        var rWspinner = rWSpinnerUI.spinner({step: 1, min: 0, max: 2000, spin: function(e, ui){            
            _self.model.setWidth(ui.value);           
        }});
        rWSpinnerUI.change(function(){
            _self.model.setWidth(jQuery(this).val());
        });
        rWspinner.spinner("value", this.model.getWidth());
        
        //height spinner
        var rHSpinnerUI = jQuery('#rectangleMainProps').find('#rHSpinner');
        var rHspinner = rHSpinnerUI.spinner({step: 1, min: 0, max: 2000, spin: function(e, ui){            
            _self.model.setHeight(ui.value);           
        }});
        rHSpinnerUI.change(function(){
            _self.model.setHeight(jQuery(this).val());
        });
        rHspinner.spinner("value", this.model.getHeight());              
        
        //background color
        jQuery('#rBackCol').ColorPicker({
            onSubmit: function(hsb, hex, rgb, el) {
                jQuery(el).val(hex);
                jQuery(el).ColorPickerHide();
                _self.model.setBackgroundColor(hex);
            },
            onBeforeShow: function () {
                jQuery(this).ColorPickerSetColor(this.value);
            }                        
        });
        
        //opacity spinner        
        var rOpacitySpinnerUI = jQuery('#rectangleMainProps').find('#rOpacitySpinner');
        var rOpacitySpinner = rOpacitySpinnerUI.spinner({step: 1, min: 0, max: 100, spin: function(e, ui){            
            _self.model.setOpacity(ui.value/100);           
        }});
        rOpacitySpinnerUI.change(function(){
            _self.model.setOpacity(jQuery(this).val()/100);
        });
        rOpacitySpinner.spinner("value", this.model.getOpacity()*100);        
                       
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#custompropContainer'));
}
RectangleProperties.prototype = new GenericPropertiesView();


//FORM PROPERTIES VIEW
function FormProperties(data){
    
    this.init(data);
    
    var _self = this;
    //main form prop box
    jQuery(SkTemplates.getInstance().getFormMainPropBox(this.model.getBackgroundColor())).appendTo(jQuery('#custompropContainer'));
    
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#custompropContainer'));
}
FormProperties.prototype = new GenericPropertiesView();



//BUTTON PROPERTIES VIEW
function ButtonProperties(data){
    
    this.init(data);
    
    var _self = this;
    //main rectangle prop box
    jQuery(SkTemplates.getInstance().getButtonMainProp(this.model.getText(), this.model.getButtonStyle(), this.model.getPlayVidOnClick(), this.model.getCloseAdvertise())).appendTo(jQuery('#custompropContainer'));
    
    //button label
    jQuery('#bLabel').keyup(function(){
        _self.model.setText(jQuery(this).val());
    });
    
    //button style
    jQuery('#btnStyle').change(function(){
        _self.model.setButtonStyle(jQuery(this).val());
    });
    
    //play video on click action
    jQuery('#rPlayVidCB').change(function(){            
        _self.model.setPlayVidOnClick(this.checked);
    });
    
    //close all ads on click
    jQuery('#bCloseAdsCB').change(function(){            
        _self.model.setCloseAdvertise(this.checked);
    });           
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#custompropContainer'));
}
ButtonProperties.prototype = new GenericPropertiesView();



//CODE PROPERTIES VIEW
function CodeProperties(data){
    
    this.init(data);
    
    var _self = this;
    //main rectangle prop box
    jQuery(SkTemplates.getInstance().getCodeMainProp(this.model.getCodeSrc())).appendTo(jQuery('#custompropContainer'));
    
    
        //width spinner
        var cWSpinnerUI = jQuery('#codeMainProps').find('#cWSpinner');
        var cWspinner = cWSpinnerUI.spinner({step: 1, min: 10, max: 2000, spin: function(e, ui){            
            _self.model.setWidth(ui.value);           
        }});
        cWSpinnerUI.change(function(){
            _self.model.setWidth(jQuery(this).val());
        });
        cWspinner.spinner("value", this.model.getWidth());
        
        //height spinner
        var cHSpinnerUI = jQuery('#codeMainProps').find('#cHSpinner');
        var cHspinner = cHSpinnerUI.spinner({step: 1, min: 10, max: 2000, spin: function(e, ui){            
            _self.model.setHeight(ui.value);           
        }});
        cHSpinnerUI.change(function(){
            _self.model.setHeight(jQuery(this).val());
        });
        cHspinner.spinner("value", this.model.getHeight());
        
        //code handler
        jQuery('#codeSrc').keyup(function(){
            _self.model.setCodeSrc(document.getElementById('codeSrc').value);
        });             
         
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#custompropContainer'));
}
CodeProperties.prototype = new GenericPropertiesView();





//TEXT PROPERTIES VIEW
function TextProperties(data){
    
    this.init(data);
    
    var _self = this;
    //main rectangle prop box
    jQuery(SkTemplates.getInstance().getTextMainProp(this.model.getFontData(), this.model.getFontColor(), this.model.getBackgroundColor())).appendTo(jQuery('#custompropContainer'));
    
    
    //select font
    jQuery('#fontsSelect').change(function(){
        _self.model.setFontData(extractFont(jQuery(this).val()));
    });
    //extract font
    function extractFont(font){
        var fontObj = Fonts.getInstance().getFont(0);
        var fonts = Fonts.getInstance().getAllFonts();
        for(var i=0;i<fonts.length;i++){            
            if(fonts[i].font == font){
                fontObj = fonts[i];
                break;
            }
        }
        return fontObj;       
    }
    
    //font styles
    //bold
    var boldBtn = new UIButton(globalJS.SK_IMAGES_ADMIN+'/ui/bold_active.PNG', globalJS.SK_IMAGES_ADMIN+'/ui/bold.PNG', boldSelected, true);
    boldBtn.getButtonUI().appendTo(jQuery('#fontstyles'));
    (this.model.getFontWeight()=="bold")?boldBtn.setState(true):boldBtn.setState(false);
    
    //italic
    var italicBtn = new UIButton(globalJS.SK_IMAGES_ADMIN+'/ui/italic_active.PNG', globalJS.SK_IMAGES_ADMIN+'/ui/italic.PNG', italicSelected, true);
    italicBtn.getButtonUI().appendTo(jQuery('#fontstyles'));
    (this.model.getFontStyle()=="italic")?italicBtn.setState(true):italicBtn.setState(false);
    
    //underline
    var underlineBtn = new UIButton(globalJS.SK_IMAGES_ADMIN+'/ui/underline_active.PNG', globalJS.SK_IMAGES_ADMIN+'/ui/underline.PNG', underlineSelected, true);
    underlineBtn.getButtonUI().appendTo(jQuery('#fontstyles'));
    (this.model.getTextDecoration()=="underline")?underlineBtn.setState(true):underlineBtn.setState(false);  
     
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#fontstyles'));
    
    //bold handler
    function boldSelected(val){
        if(val){
            _self.model.setFontWeight('bold');
        }else{
            _self.model.setFontWeight('normal');
        }
    }
    //italic handler
    function italicSelected(val){
        if(val){
            _self.model.setFontStyle('italic');
        }else{
            _self.model.setFontStyle('normal');
        }
    } 
    //underline handler
    function underlineSelected(val){
        if(val){
            _self.model.setTextDecoration('underline');
        }else{
            _self.model.setTextDecoration('none');
        }
    }
    
    //text align      
    //left
    var leftBtn = new UIButton(globalJS.SK_IMAGES_ADMIN+'/ui/align_left_active.PNG', globalJS.SK_IMAGES_ADMIN+'/ui/align_left.PNG', leftHandler, true);
    leftBtn.getButtonUI().appendTo(jQuery('#textalign'));
    (this.model.getTextAlign()=="left")?leftBtn.setState(true):leftBtn.setState(false);
    
    //center
    var centerBtn = new UIButton(globalJS.SK_IMAGES_ADMIN+'/ui/align_middle_active.PNG', globalJS.SK_IMAGES_ADMIN+'/ui/align_middle.PNG', middleHandler, true);
    centerBtn.getButtonUI().appendTo(jQuery('#textalign'));
    (this.model.getTextAlign()=="center")?centerBtn.setState(true):centerBtn.setState(false);
    
    //right
    var rightBtn = new UIButton(globalJS.SK_IMAGES_ADMIN+'/ui/align_right_active.PNG', globalJS.SK_IMAGES_ADMIN+'/ui/align_right.PNG', rightHandler, true);
    rightBtn.getButtonUI().appendTo(jQuery('#textalign'));
    (this.model.getTextAlign()=="right")?rightBtn.setState(true):rightBtn.setState(false);             
    
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#textalign'));
    
    function leftHandler(val){
        if(val){
            centerBtn.setState(false);
            rightBtn.setState(false);
            _self.model.setTextAlign('left');
        }      
    }
    function middleHandler(val){
        if(val){
            leftBtn.setState(false);
            rightBtn.setState(false);
            _self.model.setTextAlign('center');
        }    
    }
    function rightHandler(val){
        if(val){
            leftBtn.setState(false);
            centerBtn.setState(false);
            _self.model.setTextAlign('right');
        }       
    }
    
    
    //text color
        jQuery('#tCol').ColorPicker({
            onSubmit: function(hsb, hex, rgb, el) {
                jQuery(el).val(hex);
                jQuery(el).ColorPickerHide();
                _self.model.setFontColor(hex);
            },
            onBeforeShow: function () {
                jQuery(this).ColorPickerSetColor(this.value);
            }                        
        });
    
    //background color    
        jQuery('#tBCol').ColorPicker({
            onSubmit: function(hsb, hex, rgb, el) {
                jQuery(el).val(hex);
                jQuery(el).ColorPickerHide();
                _self.model.setBackgroundColor(hex);
            },
            onBeforeShow: function () {
                jQuery(this).ColorPickerSetColor(this.value);
            }                        
        });
        jQuery('#tBCol').change(function(){
            _self.model.setBackgroundColor(jQuery(this).val());
        });
     
        //font size spinner
        var fontSizeSpinnerUI = jQuery('#fSizeSpinner');
        var fontSizeSpinner = fontSizeSpinnerUI.spinner({step: 1, min: 8, max: 200, spin: function(e, ui){            
            _self.model.setFontSize(ui.value);           
        }});
        fontSizeSpinnerUI.change(function(){
            _self.model.setFontSize(jQuery(this).val());
        });
        fontSizeSpinner.spinner("value", this.model.getFontSize());
        
     
     //TEXT SECOND PROPS
     jQuery(SkTemplates.getInstance().getTextSecondProp(this.model.getText())).appendTo(jQuery('#custompropContainer'));
        //text handler
        jQuery('#txtSrc').keyup(function(){
            var content = document.getElementById('txtSrc').value;
            content = content.replace(/\n\r?/g, '<br />');
            _self.model.setText(content);
        });                
     
    jQuery(SkTemplates.getInstance().getClearFix()).appendTo(jQuery('#custompropContainer'));
}
TextProperties.prototype = new GenericPropertiesView();