Ext.ns('Ext.ux.layout');

/*
 * ================  CenterLayout  =======================
 */
/**
 * @class Ext.ux.layout.CenterLayout
 * @extends Ext.layout.FitLayout
 * <p>This is a very simple layout style used to center contents within a container.  This layout works within
 * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
 * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses 
 * the layout.  The layout does not require any config options, although the child panel contained within the
 * layout must provide a fixed or percentage width.  The child panel's height will fit to the container by
 * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.  
 * Example usage:</p> 
 * <pre><code>
// The content panel is centered in the container
var p = new Ext.Panel({
    title: 'Center Layout',
    layout: 'ux.center',
    items: [{
        title: 'Centered Content',
        width: '75%',
        html: 'Some content'
    }]
});

// If you leave the title blank and specify no border
// you'll create a non-visual, structural panel just
// for centering the contents in the main container.
var p = new Ext.Panel({
    layout: 'ux.center',
    border: false,
    items: [{
        title: 'Centered Content',
        width: 300,
        autoHeight: true,
        html: 'Some content'
    }]
});
</code></pre>
 */
Ext.ux.layout.CenterLayout = Ext.extend(Ext.layout.FitLayout, {
	// private
    setItemSize : function(item, size){
        this.container.addClass('ux-layout-center');
        item.addClass('ux-layout-center-item');
        if(item && size.height > 0){
            if(item.width){
                size.width = item.width;
            }
            item.setSize(size);
        }
    }
});
Ext.Container.LAYOUTS['ux.center'] = Ext.ux.layout.CenterLayout;



/*
*
*	Spotlight
*
*/


    
Ext.Spotlight = function(config){
    Ext.apply(this, config);
}
Ext.Spotlight.prototype = {
    active : false,
    animate : true,
    animated : false,
    duration: .25,
    easing:'easeNone',

    createElements : function(){
        var bd = Ext.getBody();

        this.right = bd.createChild({cls:'x-spotlight'});
        this.left = bd.createChild({cls:'x-spotlight'});
        this.top = bd.createChild({cls:'x-spotlight'});
        this.bottom = bd.createChild({cls:'x-spotlight'});

        this.all = new Ext.CompositeElement([this.right, this.left, this.top, this.bottom]);
    },

    show : function(el, callback, scope){
        if(this.animated){
            this.show.defer(50, this, [el, callback, scope]);
            return;
        }
        this.el = Ext.get(el);
        if(!this.right){
            this.createElements();
        }
        if(!this.active){
            this.all.setDisplayed('');
            this.applyBounds(true, false);
            this.active = true;
            Ext.EventManager.onWindowResize(this.syncSize, this);
            this.applyBounds(false, this.animate, false, callback, scope);
        }else{
            this.applyBounds(false, false, false, callback, scope); // all these booleans look hideous
        }
    },

    hide : function(callback, scope){
        if(this.animated){
            this.hide.defer(50, this, [callback, scope]);
            return;
        }
        Ext.EventManager.removeResizeListener(this.syncSize, this);
        this.applyBounds(true, this.animate, true, callback, scope);
    },

    doHide : function(){
        this.active = false;
        this.all.setDisplayed(false);
    },

    syncSize : function(){
        this.applyBounds(false, false);
    },

    applyBounds : function(basePts, anim, doHide, callback, scope){

        var rg = this.el.getRegion();

        var dw = Ext.lib.Dom.getViewWidth(true);
        var dh = Ext.lib.Dom.getViewHeight(true);

        var c = 0, cb = false;
        if(anim){
            cb = {
                callback: function(){
                    c++;
                    if(c == 4){
                        this.animated = false;
                        if(doHide){
                            this.doHide();
                        }
                        Ext.callback(callback, scope, [this]);
                    }
                },
                scope: this,
                duration: this.duration,
                easing: this.easing
            };
            this.animated = true;
        }

        this.right.setBounds(
                rg.right,
                basePts ? dh : rg.top,
                dw - rg.right,
                basePts ? 0 : (dh - rg.top),
                cb);

        this.left.setBounds(
                0,
                0,
                rg.left,
                basePts ? 0 : rg.bottom,
                cb);

        this.top.setBounds(
                basePts ? dw : rg.left,
                0,
                basePts ? 0 : dw - rg.left,
                rg.top,
                cb);

        this.bottom.setBounds(
                0,
                rg.bottom,
                basePts ? 0 : rg.right,
                dh - rg.bottom,
                cb);

        if(!anim){
            if(doHide){
                this.doHide();
            }
            if(callback){
                Ext.callback(callback, scope, [this]);
            }
        }
    },

    destroy : function(){
        this.doHide();
        Ext.destroy(
                this.right,
                this.left,
                this.top,
                this.bottom);
        delete this.el;
        delete this.all;
    }
};


/*
*
*	Spotlight
*
*/


/*
*
*	Carousel Layout
*
*/
var o = Ext.Container.prototype.lookupComponent;
Ext.override(Ext.Container, {

    // Override of our container's method to allow raw Elements to be added.
    // This is called in the context of the container.
    lookupComponent: function(comp) {
        if (comp instanceof Ext.Element) {
            return comp;
        } else if (comp.nodeType && (comp.nodeType == 1)) {
            return Ext.get(comp);
        } else {
            return o.call(this, comp);
        }
    }
});

Ext.layout.CarouselLayout = Ext.extend(Ext.layout.ContainerLayout, {
    constructor: function(config) {
        config = config || {};

//      Non-chunked, then animation makes no sense.
        if (!(config.chunkedScroll || config.pagedScroll)) {
            Ext.applyIf(config, {
                scrollIncrement: 10,
                scrollRepeatInterval: 10,
                animScroll: false
            });
        }
        Ext.layout.CarouselLayout.superclass.constructor.call(this, config);

//      Set up animation config depending upon animation requirements.
        if (this.chunkedScroll || this.pagedScroll) {
            this.scrollRepeatInterval = this.scrollDuration * 1000;
            this.scrollAnimationConfig = {
                duration: this.chunkedScroll ? this.scrollDuration : this.scrollDuration * 2,
                callback: this.updateScrollButtons,
                scope: this
            }
        } else {
            this.scrollAnimationConfig = this.animScroll ? {
                duration: this.scrollDuration,
                callback: this.updateScrollButtons,
                scope: this
            } : false;
        }
    },

    /**
     * @cfg scrollElementTag {String} The tag name of the carousel item container. If each item's main Element
     * is an &lt;LI> then this could be specified as '&lt;UL>. Defaults to '&lt;DIV>'.
    /**
     * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed (defaults
     * to 10, or if {@link #resizeTabs} = true, the calculated tab width).
     */
    scrollIncrement : 25,
    /**
     * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a scroll button is
     * continuously pressed (defaults to 10).
     */
    scrollRepeatInterval : 10,
    /**
     * @cfg {Float} scrollDuration The number of seconds that each scroll animation should last (defaults to .35).
     * Only applies when {@link #animScroll} = true.
     */
    scrollDuration : .35,
    /**
     * @cfg {Boolean} animScroll True to animate item scrolling so that hidden items slide smoothly into view (defaults
     * to true).
     */
    animScroll : true,
    /**
     * @cfg {Boolean} chunkedScroll True to animate item  scrolling so that the carousel scrolls the whole of the next
     * item in from the side you are scrolling towards.
     */
    chunkedScroll: false,
    /**
     * @cfg {Boolean} pagedScroll True to animate item  scrolling so that the carousel scrolls a full page of
     * items in from the side you are scrolling towards.
     */
    pagedScroll: true,

    // private
    monitorResize: true,
    
    /**
     * @cfg {String} scrollButtonPosition 'left', 'right' or 'split'. Position of the scroll arrow buttons.
     */
    scrollButtonPosition: 'right',

    // private
    onLayout : function(ct, target){
        var e = ct.getEl();
        e.setStyle({
            'padding-left': '0px'
        });
        if (e.dom.tagName.toLowerCase() == 'fieldset') {
            var l = e.child('legend');
            if (l) l.setStyle('margin-left', '10px');
        }
        var cs = ct.items.items, len = cs.length, c, i;

        if(!this.scrollWrap){
            this.scrollWrap = target.createChild({
                cls: 'x-carousel-layout',
                cn: [
                {
                    tag: this.scrollElementTag || 'div',
                    cls: 'x-carousel-scroller',
                    cn: {
                        cls: 'x-carousel-body'
                    }
                }, {
                    cls: 'x-carousel-left-scrollbutton',
                    style: {
                        height: '100%'
                    }
                }, {
                    cls: 'x-carousel-right-scrollbutton',
                    style: {
                        height: '100%'
                    }
                }]
            });

//          Add the class that defines element positions
            this.scrollWrap.addClass('x-scroll-button-position-' + this.scrollButtonPosition);

            this.scrollLeft = this.scrollWrap.child('.x-carousel-left-scrollbutton');
            this.scrollRight = this.scrollWrap.child('.x-carousel-right-scrollbutton');
            this.scroller = this.scrollWrap.child('.x-carousel-scroller');
            this.strip = this.scroller.child('.x-carousel-body');
            
            if (this.pagedScroll) {
                this.scrollLeft.on('click',this.onScrollLeftClick, this);
                this.scrollRight.on('click',this.onScrollRightClick, this);
            } else {
                this.leftRepeater = new Ext.util.ClickRepeater(this.scrollLeft, {
                    interval : this.pagedScroll ? 10000 : this.scrollRepeatInterval,
                    delay: 0,
                    handler: this.onScrollLeftClick,
                    scope: this
                });
                this.rightRepeater = new Ext.util.ClickRepeater(this.scrollRight, {
                    interval : this.pagedScroll ? 10000 : this.scrollRepeatInterval,
                    delay: 0,
                    handler: this.onScrollRightClick,
                    scope: this
                });
            }
            this.renderAll(ct, this.strip);
        } else {
            this.renderAll(ct, this.strip);
        }
        this.scroller.setWidth(this.container.getLayoutTarget().getWidth() - (this.scrollLeft.getWidth() + this.scrollRight.getWidth() + 12));
        this.updateScrollButtons.defer(10, this);
    },

    // private
    renderItem : function(c, position, target){
        if(c) {
            if (c.initialConfig) {
                if (c.rendered){
                    if(typeof position == 'number'){
                        position = target.dom.childNodes[position];
                    }
                    target.dom.insertBefore(c.getEl().dom, position || null);
                } else {
                    c.render(target, position);
                }
            } else if (c instanceof Ext.Element) {
                c.el = c;
                if(typeof position == 'number'){
                    position = target.dom.childNodes[position];
                }
                target.dom.insertBefore(c.dom, position || null);
            }
        }
        c.el.addClass('x-carousel-item');
    },

    // private
    onResize : function(c, position, target){
        Ext.layout.CarouselLayout.superclass.onResize.apply(this, arguments);

//      Quit if we are empty
        if (!this.container.items.items.length) return;

        this.scroller.setWidth(this.container.getLayoutTarget().getWidth() - (this.scrollLeft.getWidth() + this.scrollRight.getWidth() + 12));
        if (Ext.isIE) {
            this.scrollLeft.setHeight(this.scroller.getHeight());
            this.scrollRight.setHeight(this.scroller.getHeight());
        }
        this.setItemsEdges();

//      If width increase has introduced spare space to the right, close it up.
        var r = this.getMaxScrollPos();
        if (this.getScrollPos() > r) {
            this.scroller.scrollTo('left', r);
        }
    },

    setItemsEdges: function() {
//      Register strip-relative left/right edges for easy chunked scrolling
        var t = this.container.items.items;
        var lt = t.length;

//      Quit if we are empty
        if (!lt) return;

        var stripLeft = this.strip.getLeft();
        for (var i = 0; i < lt; i++) {
            var c = t[i];
            var e = c.el;
            if (!e) continue;
            var b = e.getBox();
            var l = b.x - stripLeft;
            var r = b.right - stripLeft;

//          "left" is the leftmost visible pixel.
//          "leftAnchor" is the postition to scroll to to bring the
//          item correctly into view with half the inter-item gap visible.
//          Same principle applies to "right"
            c.edges = {
                left: l,
                leftAnchor: l,
                right: r,
                rightAnchor: r
            };

//          Adjust anchors to be halfway between items.
            if (i == 0) {
                e.setStyle({'margin-left': '0px'});
            } else {
                if (i == t.length - 1) {
                    e.setStyle({'margin-right': '0px'});
                } else {
                    e.setStyle({'margin-right': ''});
                }
                var prev = t[i - 1];
                var halfGap = ((l - prev.edges.right) / 2);
                prev.edges.rightAnchor += halfGap;
                c.edges.leftAnchor -= halfGap;
            } 
        }

//      Work out average item width if we have rendered items
        if (t[0].edges) {
            this.itemWidth = t[lt - 1].edges.rightAnchor / lt;
        }
    },

/**
 *  Return the next item to the left which is not fully visible.
 *  Returns undefined if none available,
 */
    getNextOnLeft: function() {
        var t = this.container.items.items;
        if (t.length) {
            for (var i = t.length - 1; i > -1; i--) {
                if (t[i].edges.left < this.getScrollPos()) {
                    return t[i];
                }
            }
        }
    },

/**
 *  Return the next item to the right which is not fully visible.
 *  Returns undefined if none available,
 */
    getNextOnRight: function() {
        var t = this.container.items.items;
        if (t.length) {
            var scrollRight = this.scroller.dom.scrollLeft + this.getClientWidth();
            for (var i = 0, l = t.length; i < l; i++) {
                if (t[i].edges.right > scrollRight) {
                    return t[i];
                }
            }
        }
    },

/**
 *  Called when a click event is fired by the right scroll button.
 *  May also be used to programatically trigger a right scroll event.
 */
    onScrollRightClick : function(){
        var s = this.getScrollTo(1);
        if (s) {
            s = Math.min(this.getMaxScrollPos(), s);
            if(s != this.getScrollPos()) {
                this.scrollTo(s);
            }
        }
    },

/**
 *  Called when a click event is fired by the left scroll button.
 *  May also be used to programatically trigger a left scroll event.
 */
    onScrollLeftClick : function(){
        var s = Math.max(0, this.getScrollTo(-1));
        if(s != this.getScrollPos()) {
            this.scrollTo(s);
        }
    },

    // private
    scrollTo : function(pos){

//      Calculate scroll duration based on how far we have to scroll.
        if (this.scrollAnimationConfig) {
            var distance = Math.abs(this.getScrollPos() - pos);
            this.scrollAnimationConfig.duration = this.scrollDuration * (distance / this.itemWidth);
        }

        this.scroller.scrollTo('left', pos, this.scrollAnimationConfig);

//      Scroll animation will have called this in its callback.
        if(!this.scrollAnimationConfig){
            this.updateScrollButtons();
        }
    },

    // private
    updateScrollButtons : function(){
        if (!this.container.items.items.length) return;
        var pos = this.getScrollPos();
        this.scrollLeft[(pos == 0) ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
        this.scrollRight[(pos >= this.getMaxScrollPos()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
    },

    getScrollWidth : function(){
        var t = this.container.items.items;
        if (!t[t.length - 1].edges) {
            this.setItemsEdges();
        }
        return (t.length && t[t.length - 1].edges) ? t[t.length - 1].edges.rightAnchor : 0;
    },

    // private
    getScrollPos : function(){
        return this.scroller.dom.scrollLeft || 0;
    },

    getMaxScrollPos: function() {
        if (!this.container.items.items.length) {
            return 0;
        }
        return this.getScrollWidth() - this.getClientWidth();
    },

    // private
    getClientWidth : function(){
        return this.scroller.dom.clientWidth || 0;
    },

    // private
    getScrollTo : function(dir){
        var pos = this.getScrollPos();

        if (this.chunkedScroll || this.pagedScroll) {
//          -1 for left, 1 for right
            if (dir == -1) {
                var nextLeft = this.getNextOnLeft();
                if (nextLeft) {
                    if (this.pagedScroll) {
                        return nextLeft.edges.rightAnchor - this.getClientWidth();
                    } else {
                        return nextLeft.edges.leftAnchor;
                    }
                }
            } else {
                var nextRight = this.getNextOnRight();
                if (nextRight) {
                    if (this.pagedScroll) {
                        return nextRight.edges.leftAnchor;
                    } else {
                        return (nextRight.edges.rightAnchor - this.getClientWidth());
                    }
                }
            }
        } else {
            return (dir == -1) ? pos - this.scrollIncrement : pos + this.scrollIncrement;
        }
    },

    // private
    isValidParent : function(c, target){
        return true;
    }

});

Ext.Container.LAYOUTS['carousel'] = Ext.layout.CarouselLayout;
/*
*
*	Carousel Layout
*
*/

Ext.onReady(function(){
    
var spot = new Ext.Spotlight({
        easing: 'easeOut',
        duration: .5  
		}); 
 
var updateSpot = function(id){
        if(typeof id == 'string'){
            spot.show(id);
        }else if (!id && spot.active){
            spot.hide();
        }

    };

    var win;
    var button = Ext.get('show-btn');

    button.on('click', function(){
	 
	
	   var win = new Ext.Window({
	    id:'ventana',
            title: 'Geleria de Fotografias del Evento',
            closable:true,
	        resizable:true, 
			maximizable:true, 
			plain:true,
            width:800,
            height:600,
            layout: 'border',
            items: [{
			region: 'center',
			layout:'ux.center',
			items: [{
        			width: 800,
				height:600,
        			frame: true,
			        autoScroll: true,
        			autoHeight: true,
        			bodyStyle: 'padding:10px 10px;',
		        	title: 'Fotografías',
				html:"<div id='contenido'><img src='conf_cisco/Large/1.jpg'></div>"
       			 }]
		}, {
			region: 'north',
            chunkedScroll: true,
            layout: 'carousel',
	    autoScroll: true,
            defaults: {
                style: {
                    margin: '5px 5px 5px 5px',width:168
                }
            },
			height:140,
			items: [
		        {
				html: "<img src='conf_cisco/Small/1_1.jpg' onclick='javascript:Muestra(1);'>"
			}, {
				html: "<img src='conf_cisco/Small/2_1.jpg' onclick='javascript:Muestra(2);'>"
			}, {
				html: "<img src='conf_cisco/Small/3_1.jpg' onclick='javascript:Muestra(3);'>"
			}, {
				html: "<img src='conf_cisco/Small/4_1.jpg' onclick='javascript:Muestra(4);'>"
			}, {
				html: "<img src='conf_cisco/Small/5_1.jpg' onclick='javascript:Muestra(5);'>"
			}, {
				html: "<img src='conf_cisco/Small/6_1.jpg' onclick='javascript:Muestra(6);'>"
			}, {
				html: "<img src='conf_cisco/Small/7_1.jpg' onclick='javascript:Muestra(7);'>"
			}, {
				html: "<img src='conf_cisco/Small/8_1.jpg' onclick='javascript:Muestra(8);'>"
			}, {
				html: "<img src='conf_cisco/Small/9_1.jpg' onclick='javascript:Muestra(9);'>"
			}, {
				html: "<img src='conf_cisco/Small/10_1.jpg' onclick='javascript:Muestra(10);'>"
			}, {
				html: "<img src='conf_cisco/Small/11_1.jpg' onclick='javascript:Muestra(11);'>"
			}, {
				html: "<img src='conf_cisco/Small/12_1.jpg' onclick='javascript:Muestra(12);'>"
			}, {
				html: "<img src='conf_cisco/Small/13_1.jpg' onclick='javascript:Muestra(13);'>"
			}, {
				html: "<img src='conf_cisco/Small/14_1.jpg' onclick='javascript:Muestra(14);'>"
			}, {
				html: "<img src='conf_cisco/Small/15_1.jpg' onclick='javascript:Muestra(15);'>"
			}, {
				html: "<img src='conf_cisco/Small/16_1.jpg' onclick='javascript:Muestra(16);'>"
			}, {
				html: "<img src='conf_cisco/Small/17_1.jpg' onclick='javascript:Muestra(17);'>"
			}, {
				html: "<img src='conf_cisco/Small/18_1.jpg' onclick='javascript:Muestra(18);'>"
			}, {
				html: "<img src='conf_cisco/Small/19_1.jpg' onclick='javascript:Muestra(19);'>"
			}, {
				html: "<img src='conf_cisco/Small/20_1.jpg' onclick='javascript:Muestra(20);'>"
			}, {
				html: "<img src='conf_cisco/Small/21_1.jpg' onclick='javascript:Muestra(21);'>"
			}, {
				html: "<img src='conf_cisco/Small/22_1.jpg' onclick='javascript:Muestra(22);'>"
			}, {
				html: "<img src='conf_cisco/Small/23_1.jpg' onclick='javascript:Muestra(23);'>"
			}, {
				html: "<img src='conf_cisco/Small/24_1.jpg' onclick='javascript:Muestra(24);'>"
			}, {
				html: "<img src='conf_cisco/Small/25_1.jpg' onclick='javascript:Muestra(25);'>"
			}, {
				html: "<img src='conf_cisco/Small/26_1.jpg' onclick='javascript:Muestra(26);'>"
			}, {
				html: "<img src='conf_cisco/Small/27_1.jpg' onclick='javascript:Muestra(27);'>"
			}, {
				html: "<img src='conf_cisco/Small/28_1.jpg' onclick='javascript:Muestra(28);'>"
			}, {
				html: "<img src='conf_cisco/Small/29_1.jpg' onclick='javascript:Muestra(29);'>"
			}, {
				html: "<img src='conf_cisco/Small/30_1.jpg' onclick='javascript:Muestra(30);'>"
			}, {
				html: "<img src='conf_cisco/Small/31_1.jpg' onclick='javascript:Muestra(31);'>"
			}, {
				html: "<img src='conf_cisco/Small/32_1.jpg' onclick='javascript:Muestra(32);'>"
			}, {
				html: "<img src='conf_cisco/Small/33_1.jpg' onclick='javascript:Muestra(33);'>"
			}, {
				html: "<img src='conf_cisco/Small/34_1.jpg' onclick='javascript:Muestra(34);'>"
			}, {
				html: "<img src='conf_cisco/Small/35_1.jpg' onclick='javascript:Muestra(35);'>"
			}, {
				html: "<img src='conf_cisco/Small/36_1.jpg' onclick='javascript:Muestra(36);'>"
			}, {
				html: "<img src='conf_cisco/Small/37_1.jpg' onclick='javascript:Muestra(37);'>"
			}, {
				html: "<img src='conf_cisco/Small/38_1.jpg' onclick='javascript:Muestra(38);'>"
			}, {
				html: "<img src='conf_cisco/Small/39_1.jpg' onclick='javascript:Muestra(39);'>"
			}, {
				html: "<img src='conf_cisco/Small/40_1.jpg' onclick='javascript:Muestra(40);'>"
			}, {
				html: "<img src='conf_cisco/Small/41_1.jpg' onclick='javascript:Muestra(41);'>"
			}, {
				html: "<img src='conf_cisco/Small/42_1.jpg' onclick='javascript:Muestra(42);'>"
			}, {
				html: "<img src='conf_cisco/Small/43_1.jpg' onclick='javascript:Muestra(43);'>"
			}, {
				html: "<img src='conf_cisco/Small/44_1.jpg' onclick='javascript:Muestra(44);'>"
			}, {
				html: "<img src='conf_cisco/Small/45_1.jpg' onclick='javascript:Muestra(45);'>"
			}, {
				html: "<img src='conf_cisco/Small/46_1.jpg' onclick='javascript:Muestra(46);'>"
			}, {
				html: "<img src='conf_cisco/Small/47_1.jpg' onclick='javascript:Muestra(47);'>"
			}, {
				html: "<img src='conf_cisco/Small/48_1.jpg' onclick='javascript:Muestra(48);'>"
			}, {
				html: "<img src='conf_cisco/Small/49_1.jpg' onclick='javascript:Muestra(49);'>"
			}, {
				html: "<img src='conf_cisco/Small/50_1.jpg' onclick='javascript:Muestra(50);'>"
			}, {
				html: "<img src='conf_cisco/Small/51_1.jpg' onclick='javascript:Muestra(51);'>"
			}, {
				html: "<img src='conf_cisco/Small/52_1.jpg' onclick='javascript:Muestra(52);'>"
			}, {
				html: "<img src='conf_cisco/Small/53_1.jpg' onclick='javascript:Muestra(53);'>"
			}, {
				html: "<img src='conf_cisco/Small/54_1.jpg' onclick='javascript:Muestra(54);'>"
			}, {
				html: "<img src='conf_cisco/Small/55_1.jpg' onclick='javascript:Muestra(55);'>"
			}, {
				html: "<img src='conf_cisco/Small/56_1.jpg' onclick='javascript:Muestra(56);'>"
			}, {
				html: "<img src='conf_cisco/Small/57_1.jpg' onclick='javascript:Muestra(57);'>"
					
			}]
		}]
        });

        win.show(document.body,updateSpot.createDelegate(this, ['ventana']));
		win.on('resize',updateSpot.createDelegate(this, ['ventana']));
		win.on('move',updateSpot.createDelegate(this, ['ventana']));
		win.on('close',updateSpot.createDelegate(this, [false]));
	

         


    });
});

function Muestra(id) {
	         Ext.get('contenido').update('<img  src="conf_cisco/Large/' + id +'.jpg">');				
	 }