/*!
 * Ext JS Library 3.1.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
 
var numOfAnimImgs = 20;


Ext.onReady(function(){

	var tapwarebtn = Ext.get('button-tapware');
	var vanitybtn = Ext.get('button-vanity');
	var accessoriesbtn = Ext.get('button-accessories');
	var tilesbtn = Ext.get('button-tiles');
	var showersbtn = Ext.get('button-showerscreens');
	var toiletbtn = Ext.get('button-toilet');
	var welcome = Ext.get('welcome');
	var googlemap = Ext.get('map');
	var logoanim = Ext.get('logo-anim');
	
	
	toiletbtn.on('click',function()
	{
		//welcome.setHeight(0);
		/*
		for(var i=0; i<numOfAnimImgs; i++)
		{
			animArray[i].hide();
		}
		*/
		if (toiletgrid.rendered) {
			
			if (vanitygrid.rendered) {
				vanitygrid.hide();
			}
			if(accessoriesgrid.rendered){
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			googlemap.hide();
			toiletgrid.show();
		}
		else 
		{
			if (vanitygrid.rendered) {
				vanitygrid.hide();
			}
			if(accessoriesgrid.rendered){
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}

			googlemap.hide();

			toiletgrid.render('toilet-grid');
			
			toiletstore.load({
				params: {
					start: 0,
					limit: 6
				}
			});
		}
	});
	
	tapwarebtn.on('click',function()
	{
		//welcome.setHeight(0);
		/*
		for(var i=0; i<numOfAnimImgs; i++)
		{
			animArray[i].hide();
		}
		*/
		if (tapwaregrid.rendered) {
			
			if (vanitygrid.rendered) {
				vanitygrid.hide();
			}
			if(accessoriesgrid.rendered){
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
			tapwaregrid.show();
		}
		else 
		{
			if (vanitygrid.rendered) {
				vanitygrid.hide();
			}
			if(accessoriesgrid.rendered){
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();

			tapwaregrid.render('tapware-grid');
			
			tapwarestore.load({
				params: {
					start: 0,
					limit: 6
				}
			});
		}
	});
	
	vanitybtn.on('click',function(){
		/*
		for(var i=0; i<numOfAnimImgs; i++)
		{
			animArray[i].hide();
		}
		*/
		//welcome.setHeight(0);
		
		if (vanitygrid.rendered) {
			
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(accessoriesgrid.rendered){
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
			vanitygrid.show();
		}
		else 
		{
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(accessoriesgrid.rendered){
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
			vanitygrid.render('vanity-grid');
			
			vanitystore.load({
				params: {
					start: 0,
					limit: 6
				}
			});
		}
	});
	
	accessoriesbtn.on('click',function(){
		/*
		for(var i=0; i<numOfAnimImgs; i++)
		{
			animArray[i].hide();
		}
		*/
		//welcome.setHeight(0);
		
		if (accessoriesgrid.rendered) 
		{
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(vanitygrid.rendered){
				vanitygrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
			accessoriesgrid.show();
		}
		else
		{
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(vanitygrid.rendered){
				vanitygrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
			accessoriesgrid.render('accessories-grid');
			
		    accessoriestore.load({
				params:{
					start:0, 
					limit:6
					}
			});
		}	
	});
	
	tilesbtn.on('click',function(){
		/*
		for(var i=0; i<numOfAnimImgs; i++)
		{
			animArray[i].hide();
		}
		*/
		//welcome.setHeight(0);
		
		if (tilesgrid.rendered) 
		{
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(vanitygrid.rendered){
				vanitygrid.hide();
			}
			if (accessoriesgrid.rendered) {
				accessoriesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
		    tilesgrid.show();
		}
		else
		{	
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(vanitygrid.rendered){
				vanitygrid.hide();
			}
			if (accessoriesgrid.rendered) {
				accessoriesgrid.hide();
			}
			if (showersgrid.rendered) {
				showersgrid.hide();
			}
			if (toiletgrid.rendered) {
				toiletgrid.hide();
			}
			googlemap.hide();
			tilesgrid.render('tiles-grid');
			
		    tilesstore.load({
				params:{
					start:0, 
					limit:6
					}
			});
		}
	
	});
	
/*	showersbtn.on('click',function(){
		
		//welcome.setHeight(0);
		
		if(showersgrid.rendered)
		{
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(vanitygrid.rendered){
				vanitygrid.hide();
			}
			if (accessoriesgrid.rendered) {
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			
			showersgrid.show();
		}
		else
		{
			if (tapwaregrid.rendered) {
				tapwaregrid.hide();
			}
			if(vanitygrid.rendered){
				vanitygrid.hide();
			}
			if (accessoriesgrid.rendered) {
				accessoriesgrid.hide();
			}
			if (tilesgrid.rendered) {
				tilesgrid.hide();
			}
			
			showersgrid.render('showers-grid');
			
		    showersstore.load({
				params:{
					start:0, 
					limit:6
					}
			});
		}
	
	});*/
	var locationMapPanel;
	
	/*location map window*/ 	
	Ext.get('button-map').on('click',function(){
		/*
		for(var i=0; i<numOfAnimImgs; i++)
		{
			animArray[i].hide();
		}
		*/
		if (tapwaregrid.rendered) {
			tapwaregrid.hide();
		}
		if (vanitygrid.rendered) {
			vanitygrid.hide();
		}
		if(accessoriesgrid.rendered){
			accessoriesgrid.hide();
		}
		if (tilesgrid.rendered) {
			tilesgrid.hide();
		}
		if (showersgrid.rendered) {
			showersgrid.hide();
		}
		if (locationMapPanel != null && locationMapPanel.rendered)
		{
			googlemap.show();		
		}
		else
		{
			locationMapPanel = new Ext.Panel({
                baseCls: 'location-map',
                title: '1222-1224 Canterbury Rd, Roselands, NSW, 2196, Australia',
                autoWidth:true,
                height:400,
                renderTo: 'map',
                items: [{
                    baseCls:'google-map',
                    xtype: 'gmappanel',
                    zoomLevel: 15,
                    gmapType: 'map',
                    mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
                    mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
                    setCenter: {
                        geoCodeAddr: '1222-1224 Canterbury Rd, Roselands, NSW, 2196, Australia',
                        marker: {title: 'OTC Building Supplies'}
                    }
                },
                {
                	baseCls: 'map-text',
                	html:'OTC Building Supplies<br>1222-1224 Canterbury Rd<br>(Corner of Mount Av), Roselands, NSW, 2196</br>Office: (02) 9740 3398</br>Fax: (02) 9740 3301</br>Email:<a href="sales@otcbs.com.au">sales@otcbs.com.au</a>'
                }]
            });
		}
		
	});
	
	
	// pluggable renders
    function renderProduct(value, p, record){
        return String.format(
                '<img style="float:left;" src="OTCBS/img/products/{3}/{0}.jpg" height="75" /><div class="item-details"><a class="item-name">{0}</a><br><a class="item-desc">{1}</a><br><a class="item-price">{2}</a></div>',
                value, record.data.Description, record.data.Cost, record.data.Type);
    }
    
	//TOILET
    var toiletstore = new Ext.ux.data.PagingStore({
        url: 'OTCBS/xml/toilet.xml',
		
        reader: new Ext.data.XmlReader({
               root: 'Items',
               record: 'Item',
               id: 'CODE',
               totalProperty: 'Total'
           }, [
               {name: 'Name', mapping: 'ItemAttributes > Name'},
               'Cost', 'Description', 'MoreInfo', 'Type'
           ])
    });
	
    var toiletgrid = new Ext.grid.GridPanel({
        //renderTo: 'tapware-grid',
		store: toiletstore,
        columns: [
            {header: "Toilet", renderer: renderProduct, width: 900, dataIndex: 'Name', menu: false, sortable: false, id: 'name'}
        ],
        autoWidth: true,
        autoHeight: true,
        //autoExpandColumn: 'name',
        border: false,
        //columnLines: true,
        loadMask: true,
        //stripeRows: true,
		//sm: new Ext.grid.RowSelectionModel({singleSelect: false}),
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.MoreInfo+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
		// paging bar on the bottom
        bbar: new Ext.ux.PagingToolbar({
            pageSize: 6,
            store: toiletstore,
            displayInfo: false,
			buttonAlign: 'center',
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show more information',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
					toiletgrid.getSelectionModel().unlock();
					toiletgrid.getSelectionModel().clearSelections();
					var view = toiletgrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
    
    
	//TAPWARE
    var tapwarestore = new Ext.ux.data.PagingStore({
        url: 'OTCBS/xml/tapware.xml',
		
        reader: new Ext.data.XmlReader({
               root: 'Items',
               record: 'Item',
               id: 'CODE',
               totalProperty: 'Total'
           }, [
               {name: 'Name', mapping: 'ItemAttributes > Name'},
               'Cost', 'Description', 'MoreInfo', 'Type'
           ])
    });
	
    var tapwaregrid = new Ext.grid.GridPanel({
        //renderTo: 'tapware-grid',
		store: tapwarestore,
        columns: [
            {header: "Tapware", renderer: renderProduct, width: 900, dataIndex: 'Name', menu: false, sortable: false, id: 'name'}
        ],
        autoWidth: true,
        autoHeight: true,
        //autoExpandColumn: 'name',
        border: false,
        //columnLines: true,
        loadMask: true,
        //stripeRows: true,
		//sm: new Ext.grid.RowSelectionModel({singleSelect: false}),
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.MoreInfo+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
		// paging bar on the bottom
        bbar: new Ext.ux.PagingToolbar({
            pageSize: 6,
            store: tapwarestore,
            displayInfo: false,
			buttonAlign: 'center',
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show more information',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
					tapwaregrid.getSelectionModel().unlock();
					tapwaregrid.getSelectionModel().clearSelections();
					var view = tapwaregrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
	
	//VANITY
    var vanitystore = new Ext.ux.data.PagingStore({
        url: 'OTCBS/xml/vanity.xml',
		
        reader: new Ext.data.XmlReader({
               root: 'Items',
               record: 'Item',
               id: 'CODE',
               totalProperty: 'Total'
           }, [
               {name: 'Name', mapping: 'ItemAttributes > Name'},
               'Cost', 'Description', 'MoreInfo', 'Type'
           ])
    });
	
    var vanitygrid = new Ext.grid.GridPanel({
        //renderTo: 'vanity-grid',
		store: vanitystore,
        columns: [
            {header: "Vanity", renderer: renderProduct, width: 900, dataIndex: 'Name', menu: false, sortable: false, id: 'name'}
        ],
        autoWidth: true,
        autoHeight: true,
        //autoExpandColumn: 'name',
        border: false,
        //columnLines: true,
        loadMask: true,
        //stripeRows: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.MoreInfo+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
		// paging bar on the bottom
        bbar: new Ext.ux.PagingToolbar({
            pageSize: 6,
            store: vanitystore,
            displayInfo: false,
			buttonAlign: 'center',
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show more information',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    vanitygrid.getSelectionModel().unlock();
					vanitygrid.getSelectionModel().clearSelections();
					var view = vanitygrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
	
	//ACCESSORIES
    var accessoriestore = new Ext.ux.data.PagingStore({
        url: 'OTCBS/xml/accessories.xml',
		
        reader: new Ext.data.XmlReader({
               root: 'Items',
               record: 'Item',
               id: 'CODE',
               totalProperty: 'Total'
           }, [
               {name: 'Name', mapping: 'ItemAttributes > Name'},
               'Cost', 'Description', 'MoreInfo', 'Type'
           ])
    });
	
    var accessoriesgrid = new Ext.grid.GridPanel({
        //renderTo: 'accessories-grid',
		store: accessoriestore,
        columns: [
            {header: "Accessories", renderer: renderProduct, width: 900, dataIndex: 'Name', menu: false, sortable: false, id: 'name'}
        ],
        autoWidth: true,
        autoHeight: true,
        //autoExpandColumn: 'name',
        border: false,
        //columnLines: true,
        loadMask: true,
        //stripeRows: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.MoreInfo+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
		// paging bar on the bottom
        bbar: new Ext.ux.PagingToolbar({
            pageSize: 6,
            store: accessoriestore,
            displayInfo: false,
			buttonAlign: 'center',
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show more information',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    accessoriesgrid.getSelectionModel().unlock();
					accessoriesgrid.getSelectionModel().clearSelections();
					var view = accessoriesgrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
	
	//TILES
    var tilesstore = new Ext.ux.data.PagingStore({
        url: 'OTCBS/xml/tiles.xml',
		
        reader: new Ext.data.XmlReader({
               root: 'Items',
               record: 'Item',
               id: 'CODE',
               totalProperty: 'Total'
           }, [
               {name: 'Name', mapping: 'ItemAttributes > Name'},
               'Cost', 'Description', 'MoreInfo', 'Type'
           ])
    });
	
    var tilesgrid = new Ext.grid.GridPanel({
        //renderTo: 'tiles-grid',
		store: tilesstore,
        columns: [
            {header: "Tiles", renderer: renderProduct, width: 900, dataIndex: 'Name', menu: false, sortable: false, id: 'name'}
        ],
        autoWidth: true,
        autoHeight: true,
        //autoExpandColumn: 'name',
        border: false,
        //columnLines: true,
        loadMask: true,
        //stripeRows: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.MoreInfo+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
		// paging bar on the bottom
        bbar: new Ext.ux.PagingToolbar({
            pageSize: 6,
            store: tilesstore,
            displayInfo: false,
			buttonAlign: 'center',
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show more information',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    tilesgrid.getSelectionModel().unlock();
					tilesgrid.getSelectionModel().clearSelections();
					var view = tilesgrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
	
	//TILES
    var showersstore = new Ext.ux.data.PagingStore({
        url: 'OTCBS/xml/showers.xml',
		
        reader: new Ext.data.XmlReader({
               root: 'Items',
               record: 'Item',
               id: 'CODE',
               totalProperty: 'Total'
           }, [
               {name: 'Name', mapping: 'ItemAttributes > Name'},
               'Cost', 'Description', 'MoreInfo', 'Type'
           ])
    });
	
    var showersgrid = new Ext.grid.GridPanel({
        //renderTo: 'showers-grid',
		store: showersstore,
        columns: [
            {header: "Showers", renderer: renderProduct, width: 900, dataIndex: 'Name', menu: false, sortable: false, id: 'name'}
        ],
        autoWidth: true,
        autoHeight: true,
        //autoExpandColumn: 'name',
        border: false,
        //columnLines: true,
        loadMask: true,
        //stripeRows: true,
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.MoreInfo+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },
		// paging bar on the bottom
        bbar: new Ext.ux.PagingToolbar({
            pageSize: 6,
            store: showersstore,
            displayInfo: false,
			buttonAlign: 'center',
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show more information',
                //cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    showersgrid.getSelectionModel().unlock();
					showersgrid.getSelectionModel().clearSelections();
					var view = showersgrid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })
    });
	
    toiletgrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

		var detailsWindow = new Ext.Window({
                //applyTo:'hello-win',
                layout:'fit',
				baseCls: 'details-window',
				modal: true,
				shadow: true,
                width:700,
                height:600,
                //closeAction:'hide',
				resizable: false,
                plain: true,
				items: [{
						baseCls: 'details-window-body',
						html: '<div id="details-name">' + r.data.Name + '</div><img src="OTCBS/img/products/toilet/' + r.data.Name + '.jpg"/>' + '<br><div id="details-cost">' + r.data.Cost + '</div><br><div id="details-desc">' + r.data.Description + '</div><br><div id="details-moreinfo">' + r.data.MoreInfo + '</div>'
				}],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        detailsWindow.hide();
                    }
                }]
            });
			detailsWindow.show(this);
	});
    
	tapwaregrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

		var detailsWindow = new Ext.Window({
                //applyTo:'hello-win',
                layout:'fit',
				baseCls: 'details-window',
				modal: true,
				shadow: true,
                width:700,
                height:600,
                //closeAction:'hide',
				resizable: false,
                plain: true,
				items: [{
						baseCls: 'details-window-body',
						html: '<div id="details-name">' + r.data.Name + '</div><img src="OTCBS/img/products/tapware/' + r.data.Name + '.jpg"/>' + '<br><div id="details-cost">' + r.data.Cost + '</div><br><div id="details-desc">' + r.data.Description + '</div><br><div id="details-moreinfo">' + r.data.MoreInfo + '</div>'
				}],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        detailsWindow.hide();
                    }
                }]
            });
			detailsWindow.show(this);
	});
	
	vanitygrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

		var detailsWindow = new Ext.Window({
                //applyTo:'hello-win',
                layout:'fit',
				baseCls: 'details-window',
				modal: true,
				shadow: true,
                width:700,
                height:600,
                //closeAction:'hide',
				resizable: false,
                plain: true,
				items: [{
						baseCls: 'details-window-body',
						html: '<div id="details-name">' + r.data.Name + '</div><img src="OTCBS/img/products/vanity/' + r.data.Name + '.jpg"/>' + '<br><div id="details-cost">' + r.data.Cost + '</div><br><div id="details-desc">' + r.data.Description + '</div><br><div id="details-moreinfo">' + r.data.MoreInfo + '</div>'
				}],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        detailsWindow.hide();
                    }
                }]
            });
			detailsWindow.show(this);
	});
	
	accessoriesgrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

		var detailsWindow = new Ext.Window({
                //applyTo:'hello-win',
                layout:'fit',
				baseCls: 'details-window',
				modal: true,
				shadow: true,
                width:700,
                height:600,
                //closeAction:'hide',
				resizable: false,
                plain: true,
				items: [{
						baseCls: 'details-window-body',
						html: '<div id="details-name">' + r.data.Name + '</div><img src="OTCBS/img/products/Accessories/' + r.data.Name + '.jpg"/>' + '<br><div id="details-cost">' + r.data.Cost + '</div><br><div id="details-desc">' + r.data.Description + '</div><br><div id="details-moreinfo">' + r.data.MoreInfo + '</div>'
				}],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        detailsWindow.hide();
                    }
                }]
            });
			detailsWindow.show(this);
	});
	
	tilesgrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

		var detailsWindow = new Ext.Window({
                //applyTo:'hello-win',
                layout:'fit',
				baseCls: 'details-window',
				modal: true,
				shadow: true,
                width:700,
                height:600,
                //closeAction:'hide',
				resizable: false,
                plain: true,
				items: [{
						baseCls: 'details-window-body',
						html: '<div id="details-name">' + r.data.Name + '</div><img src="OTCBS/img/products/Tile/' + r.data.Name + '.jpg"/>' + '<br><div id="details-cost">' + r.data.Cost + '</div><br><div id="details-desc">' + r.data.Description + '</div><br><div id="details-moreinfo">' + r.data.MoreInfo + '</div>'
				}],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        detailsWindow.hide();
                    }
                }]
            });
			detailsWindow.show(this);
	});
	
	showersgrid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {

		var detailsWindow = new Ext.Window({
                //applyTo:'hello-win',
                layout:'fit',
				baseCls: 'details-window',
				modal: true,
				shadow: true,
                width:700,
                height:600,
				//autoHeight: true,
                //closeAction:'hide',
				resizable: false,
                plain: true,
				items: [{
						baseCls: 'details-window-body',
						html: '<div id="details-name">' + r.data.Name + '</div><img src="OTCBS/img/products/' + r.data.Name + '.jpg"/>' + '<br><div id="details-cost">' + r.data.Cost + '</div><br><div id="details-desc">' + r.data.Description + '</div><br><div id="details-moreinfo">' + r.data.MoreInfo + '</div>'
				}],
                buttons: [{
                    text: 'Close',
                    handler: function(){
                        detailsWindow.hide();
                    }
                }]
            });
			detailsWindow.show(this);
	});
/*
	tapwaregrid.render('tapware-grid');
	
	tapwarestore.load({
		params: {
			start: 0,
			limit: 6
		}
	});
*/	
	
	Ext.get('enter-btn').on('click',function(){

		Ext.get('logo-anim').hide();
		Ext.get('blue-mask').hide();
		Ext.get('logo-text').hide();
		
		for(var i=0; i<numOfAnimImgs; i++)
			{
				animArray[i].hide();
			}
		
		tapwaregrid.render('tapware-grid');
		
		tapwarestore.load({
			params: {
				start: 0,
				limit: 6
			}
		});	
	
	});
	
});