//setting global styles for extended KONtx  imagebutton


Theme.storage.alias('ControlImageButton', 'ControlButton');

ControlImageButtonText = KONtx.Class.helpers.unlink(Theme.storage.get('ControlTextButtonText'));
ControlImageButtonText.styles.hOffset = {
	'1920x1080': 80,
	'960x540': 40
}[ Theme.keys.screen ];
Theme.storage.add('ControlImageButtonText', ControlImageButtonText);

delete ControlImageButtonText;

Theme.storage.add('ControlImageButtonImage', {
	styles: {
		'1920x1080': {
			vAlign: 'center',
			hOffset: 30,
			width: 40,
			height: 40
			
		},
		'960x540': {
			vAlign: 'center',
			hOffset: 15,
			width: 20,
			height: 20
		}
	}[ Theme.keys.screen ]
});

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
ImageButton = new KONtx.Class({
        
        ClassName: 'ControlImageButton',
        
        Extends: KONtx.control.Button,
        
    /***
          * @method _createContent
      * @description
                        Adds a text element on .content to the control button
      * @end
      * @access protected
     ***/
        _createContent: function () {
                KONtx_automation_log("function","KONtx.control.ImageButton","_createContent");
                
                var tk = (this.config.ClassName||this.ClassName)+
                    'Text',
                        ts = Theme.getStyles(tk);
                        
                
                this.labelStyle=this.config.textStyles || ts;
                
                this.content = new KONtx.element.Text({
                        id: (this.config.id||this._ktxID)+'.content',
                        label:  this.config.label,
                        styles: this.config.textStyles || ts
                }).appendTo(this);
                
                var themeKey  = (this.config.ClassName||this.ClassName)+'Image',
                        imgStyles = Theme.getStyles(themeKey);
                        
                this.imgStyles=imgStyles;
                
                this.photo = new KONtx.element.Image({
                        id: (this.config.id||this._ktxID)+'.photo',
                        styles: imgStyles
                }).appendTo(this);
                
                this._fitPhoto.subscribeTo(this.photo,'onLoaded',this.photo);
                
                this.photo.setSources(this.config);
              
        },
        
    /***
          * @method setText
      * @var text <string>
      * @description
                        Pass-through method which allows one to set the text on the .content
                        text element wrapped inside the button
      * @end
      * @access public
     ***/
        setText: function (text) {
                KONtx_automation_log("function","KONtx.control.ImageButton","setText");
                this.content.setText(text);
        },
             
    /***
          * @method _fitPhoto
      * @description
                        This handler resizes the image to best fit inside the control.
      * @end
      * @access protected
     ***/
        _fitPhoto: function () {
                KONtx_automation_log("function","KONtx.control.PhotoBackButton","_fitPhoto");
                // called in scope of {button}.photo
                // photo's config.styles determines max size
                // (not button height)
                var cs = this.config.styles,
                        sz = Math.min(cs.width, cs.height);
                this.aspectSizeMax(sz);
                
                
                log('-----------------------------------------')
                log(this.parent);
                log(this.parent.label);
                log(this);
                log('-----------------------------------------')
                this.parent.label.setStyles({
                    xOffset:this.outerWidth
                });
        },
        
    /***
          * @method setSource
      * @var source <string> URL or path to the image to use
      * @description
                        This is a proxy method which passes the provided source string to the wrapped
                        inner content image.
      * @end
      * @access public
     ***/
        setSource: function (source) {
                KONtx_automation_log("function","KONtx.control.PhotoBackButton","setSource");
                return this.photo.setSource(source);
        },
        
    /***
          * @method setSources
      * @var sources <object> Hash containing image urls/paths for src, missingImg, and/or loadingImg
      * @description
                        This is a proxy method which passes the provided source images to the wrapped
                        inner content image.
      * @end
      * @access public
     ***/
        setSources: function (sources) {
                KONtx_automation_log("function","KONtx.control.PhotoBackButton","setSources");
                return this.photo.setSources(sources);
        }
});