Ext.onReady(function(){
	
	var catalog = [{
        title: 'Store Features',
		cls:'active',
        samples: [{
            text: 'General Overview',
			linkid: 'generalOverview',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'generalOverview.jpg',
            desc: '<i>Coming Soon</i> Easily browse and edit all users who have used your store.'
        },{
            text: 'Technical Overview',
			linkid: 'technicalOverview',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'technicalOverview.jpg',
            desc: '<i>Coming Soon</i> Easily browse and edit all users who have used your store.'
        },{
            text: 'Preloaded Products',
			linkid: 'preloadedProducts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'preloadedProducts.jpg',
            desc: '<i>Coming Soon</i> Easily browse and edit all users who have used your store.'
        },{
            text: 'Product Categories',
			linkid: 'productCategories',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'productCategories.jpg',
            desc: '<i>Coming Soon</i> Easily browse and edit all users who have used your store.'
        },{
            text: 'Sale Items',
			linkid: 'saleItems',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'saleItems.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Easy Price Groups',
			linkid: 'easyPriceGroups',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'easyPriceGroups.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Gift Certificates',
			linkid: 'giftCertficatesFeature',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'giftCertficatesFeature.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Wish List',
			linkid: 'wishList',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'wishList.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Display Layout',
			linkid: 'displayLayout',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'displayLayout.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Sort Products',
			linkid: 'sortProducts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'sortProducts.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Related Items',
			linkid: 'relatedItems',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'relatedItems.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Product Zoom',
			linkid: 'productZoom',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'productZoom.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Realtime Shipping Rate',
			linkid: 'realtimeShippingRates',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'realtimeShippingRates.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Coupons & Discounts',
			linkid: 'couponsDiscounts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'couponsDiscounts.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Account Profile',
			linkid: 'accountProfile',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'accountProfile.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Copy Previous Order',
			linkid: 'copyPreviousOrder',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'copyPreviousOrder.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Email Product Listing',
			linkid: 'emailProductListing',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'emailProductListing.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Best Sellers',
			linkid: 'bestSellers',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'bestSellers.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Text Pages',
			linkid: 'textPagesFeature',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'textPagesFeature.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Recently Viewed Items',
			linkid: 'recentlyViewedItems',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'recentlyViewedItems.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Price Filter',
			linkid: 'priceFilter',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'priceFilter.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
         },{
            text: 'Manufacturer Filter',
			linkid: 'manufacturerFilter',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'manufacturerFilter.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        },{
            text: 'Newsletters',
			linkid: 'newsletters',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'newsletters.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        },{
            text: 'Advanced Search',
			linkid: 'advancedSearch',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'advancedSearch.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        },{
            text: 'Live Help',
			linkid: 'liveHelp',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'liveHelp.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        },{
            text: 'Homepage Slideshow',
			linkid: 'homepageSlideshow',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'homepageSlideshow.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        },{
            text: 'Build Your Own',
			linkid: 'buildYourOwn',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'buildYourOwn.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        },{
            text: 'Statistics',
			linkid: 'statistics',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'statistics.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        },{
            text: 'Look & Feel',
			linkid: 'lookFeel',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'lookFeel.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        },{
            text: 'Custom Boxes',
			linkid: 'customBoxes',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'customBoxes.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        },{
            text: 'Email',
			linkid: 'email',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'email.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        },{
            text: 'Customer Reviews',
			linkid: 'customerReviews',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'customerReviews.jpg',
            desc: '<i>Coming Soon</i> Demo on how to export data into Quickbooks format.'
        }]
    },{
        title: 'Manufacturers',
		iconCls:'icon-apps',
        samples: [{
            text: 'PDU (Plastic Dress-Up)',
			linkid: 'pdu',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'pdu.jpg',
            desc: '<i>Coming Soon</i> Easily browse and edit all users who have used your store.'
        },{
            text: 'MARCO Awards Group',
			linkid: 'marco',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'marco.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        },{
            text: 'JDS Industries',
			linkid: 'jds',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'jds.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        }]
    },{
        title: 'Categories',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Categories',
			linkid: 'manageCategories',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'manageCategories.jpg',
            desc: '<i>Coming Soon</i> Explains what product categories are and how to work with them.'
        },{
            text: 'Add a New Category',
			linkid: 'addNewCategory',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'addNewCategory.jpg',
            desc: '<i>Coming Soon</i> Tutorial on how to add a new product into your store.'
        }]
    },{
        title: 'Products',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Products',
			linkid: 'manageProducts',
            url: 'http://video.awardscart.com/homepage/homepage.html',
            icon: 'manageProducts.jpg',
            desc: '<i>Coming Soon</i> How to manage the products that you sell in your online store.'
		},{
            text: 'Add a New Product',
			linkid: 'addNewProduct',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'addNewProduct.jpg',
            desc: '<i>Coming Soon</i> Tutorial on how to add a new product into your store.'
        },{
            text: 'Manage Price Group',
			linkid: 'managePriceGroup',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'managePriceGroup.jpg',
            desc: '<i>Coming Soon</i> Demonstrates how to change the group pricing of related products'
        },{
            text: 'Manufacturers',
			linkid: 'manufacturers',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'manufacturers.jpg',
            desc: '<i>Coming Soon</i> Quickly learn how to manage and configure product manufacturers.'
        },{
            text: 'Bulk Product Loader',
			linkid: 'bulkProductLoader',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'bulkProductLoader.jpg',
            desc: '<i>Coming Soon</i> See how easy it is to load and edit large quantities of new products in your store.'
        },{
            text: 'Bulk Images Loader',
			linkid: 'bulkImagesLoader',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'bulkImagesLoader.jpg',
            desc: '<i>Coming Soon</i> Demonstrates how to load a bulk set of product images into your store.'
        },{
            text: 'Thumbnail Generator',
			linkid: 'thumbnailGenerator',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'thumbnailGenerator.jpg',
            desc: '<i>Coming Soon</i> Tutorial on how to have the system generate multiple sizes of product images for you.'
        },{
            text: 'Global Attributes',
			linkid: 'globalAttributes',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'globalAttributes.jpg',
            desc: '<i>Coming Soon</i> Learn how to set up and use global attributes for products.'
        },{
            text: 'Recommended Products',
			linkid: 'recommendedProducts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'recommendedProducts.jpg',
            desc: '<i>Coming Soon</i> Configure recommended products based on customers purchasing certain products.'
        },{
            text: 'Gift Certificates',
			linkid: 'giftCertificates',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'giftCertificates.jpg',
            desc: '<i>Coming Soon</i> Easily set up and offer gift certificates for your customers.'
        }]
    },{
        title: 'Users',
        samples: [{
            text: 'Browse Users',
			linkid: 'browseUsers',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'browseUsers.jpg',
            desc: '<i>Coming Soon</i> Easily browse and edit all users who have used your store.'
        },{
            text: 'Add a New User',
			linkid: 'addNewUser',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'addNewUser.jpg',
            desc: '<i>Coming Soon</i> Learn how to manually add a new user into your system.'
        }]
    },{
        title: 'Orders',
        samples: [{
            text: 'Browse Orders',
			linkid: 'browseOrders',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'browseOrders.jpg',
            desc: '<i>Coming Soon</i> Take a look at how easy it is to browse, view and fulfill orders placed in your store.'
        },{
            text: 'Export to Quickbooks',
			linkid: 'exportQuickbooks',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'exportQuickbooks.jpg',
            desc: '<i>Coming Soon</i> Demo on how to export data into Quickbooks format.'
        }]
    },{
        title: 'Emails',
        iconCls:'icon-grid',
        samples: [{
            text: 'Newsletter Email Wizard',
			linkid: 'newsletterEmailWizard',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'newsletterEmailWizard.jpg',
            desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'
        },{
            text: 'Product Update Email Wizard',
			linkid: 'productUpdateEmailWizard',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'productUpdateEmailWizard.jpg',
            desc: 'An example of a traditional property grid as typically seen in development IDEs.'
        },{
            text: 'Sent Email Archive',
			linkid: 'sentEmailArchive',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'sentEmailArchive.jpg',
            desc: 'An editable grid loaded from XML that shows multiple types of grid ediors as well as defining custom data records.'
        },{
            text: 'Default Email Top & Bottom',
			linkid: 'defaultEmailTopBottom',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'defaultEmailTopBottom.jpg',
            desc: '<i>New</i> An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',
            status: 'new'
        },{
            text: 'Notification Emails',
			linkid: 'notificationEmails',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'notificationEmails.jpg',
            desc: 'A simple read-only grid loaded from XML data.'
        },{
            text: 'Subscriber Email Addresses',
			linkid: 'subscriberEmailAddresses',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'subscriberEmailAddresses.jpg',
            desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
        },{
            text: 'Import Email Addresses',
			linkid: 'importEmailAddresses',
            url:  'grid/progress-bar-pager.html',
            icon: 'importEmailAddresses.jpg',
            desc: '<i>New</i> An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',
            status: 'new'
        },{
            text: 'Export User Email Addresses',
			linkid: 'exportUserEmailAddresses',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'exportUserEmailAddresses.jpg',
            desc: '<i>New</i> A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',
            status: 'new'
        },{
            text: 'Export Subscriber Email Addresses',
			linkid: 'exportSubscriberEmailAddresses',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'exportSubscriberEmailAddresses.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Check Bounced Email Addresses',
			linkid: 'checkBouncedEmailAddresses',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'checkBouncedEmailAddresses.jpg',
            desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'
        }]
    },{
        title: 'Administrators',
        iconCls:'icon-tabs',
        samples: [{
            text: 'Browse Adminstrators',
			linkid: 'browseAdministrators',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'browseAdministrators.jpg',
            desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'
        },{
            text: 'Create a New Account',
			linkid: 'createNewAdminAccount',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'createNewAdminAccount.jpg',
            desc: '<i>New</i> An example of an overflow menu that appears to the right of the TabPanel tab strip'
        },{
            text: 'Update Your Profile',
			linkid: 'updateYourProfile',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'updateYourProfile.jpg',
            desc: '<i>New</i> A custom example on how to setup tab grouping using vertical tabs.'
        }]
    },{
        title: 'Cart Settings',
        iconCls:'icon-grid',
        samples: [{
            text: 'Payment Methods',
			linkid: 'paymentMethods',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'paymentMethods.jpg',
            desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'
        },{
            text: 'Shipping Management',
			linkid: 'shippingManagement',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'shippingManagement.jpg',
            desc: 'An example of a traditional property grid as typically seen in development IDEs.'
        },{
            text: 'Edit Taxes',
			linkid: 'editTaxes',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editTaxes.jpg',
            desc: 'An editable grid loaded from XML that shows multiple types of grid ediors as well as defining custom data records.'
        },{
            text: 'Edit Discounts & Promo Codes',
			linkid: 'editDiscountsPromoCodes',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editDiscountsPromoCodes.jpg',
            desc: '<i>New</i> An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',
            status: 'new'
        },{
            text: 'Edit Text Pages',
			linkid: 'editTextPages',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editTextPages.jpg',
            desc: 'A simple read-only grid loaded from XML data.'
        },{
            text: 'Forms Control & Custom Fields',
			linkid: 'formsControlCustomFields',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'formsControlCustomFields.jpg',
            desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
        },{
            text: 'File Manager',
			linkid: 'fileManager',
            url:  'grid/progress-bar-pager.html',
            icon: 'fileManager.jpg',
            desc: '<i>New</i> An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',
            status: 'new'
        },{
            text: 'Database & Backup Tools',
			linkid: 'databaseBackupTools',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'databaseBackupTools.jpg',
            desc: '<i>New</i> A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',
            status: 'new'
        },{
            text: 'Frontpage Slideshow Setting',
			linkid: 'frontpageSlideshowSetting',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'frontpageSlideshowSetting.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Product Review Settings',
			linkid: 'productReviewSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'checkBouncedEmailAddresses.jpg',
            desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'
        }]
    },{
        title: 'Appearance',
        iconCls:'icon-grid',
        samples: [{
            text: 'Change Site Colors',
			linkid: 'changeSiteColors',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'changeSiteColors.jpg',
            desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'
        },{
            text: 'Edit Site Colors',
			linkid: 'editSiteColors',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteColors.jpg',
            desc: 'An example of a traditional property grid as typically seen in development IDEs.'
        },{
            text: 'Edit Site Layout',
			linkid: 'editSiteLayout',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteLayout.jpg',
            desc: 'An editable grid loaded from XML that shows multiple types of grid ediors as well as defining custom data records.'
        },{
            text: 'Catalog & Product Page Settings',
			linkid: 'catalogProductPageSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'catalogProductPageSettings.jpg',
            desc: '<i>New</i> An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',
            status: 'new'
        },{
            text: 'Edit Site Headers Text and Images',
			linkid: 'editSiteHeadersTextImages',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteHeadersTextImages.jpg',
            desc: 'A simple read-only grid loaded from XML data.'
        },{
            text: 'Edit Site Buttons Text and Images',
			linkid: 'editSiteButtonsTextImages',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteButtonsTextImages.jpg',
            desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
        },{
            text: 'Edit Default Site Images',
			linkid: 'editDefaultSiteImages',
            url:  'grid/progress-bar-pager.html',
            icon: 'editDefaultSiteImages.jpg',
            desc: '<i>New</i> An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',
            status: 'new'
        },{
            text: 'Edit Site Header & Footer',
			linkid: 'editSiteHeaderFooter',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteHeaderFooter.jpg',
            desc: '<i>New</i> A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',
            status: 'new'
        },{
            text: 'Edit Site Home Page',
			linkid: 'editSiteHomePage',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteHomePage.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Edit Site Fonts',
			linkid: 'editSiteFonts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'editSiteFonts.jpg',
            desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'
        }]
	},{
        title: 'Global Cart Settings',
        iconCls:'icon-grid',
        samples: [{
            text: 'Company Information',
			linkid: 'companyInformation',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'companyInformation.jpg',
            desc: 'An example of a traditional property grid as typically seen in development IDEs.'
        },{
            text: 'Global Site Settings',
			linkid: 'globalSiteSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'globalSiteSettings.jpg',
            desc: 'An editable ghows multiple types of grid ediors as well as defining custom data records.'
        },{
            text: 'Order & Cart Settings',
			linkid: 'orderCartSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'orderCartSettings.jpg',
            desc: '<i>New</i> cations to an entire record at once. Also demonstrates the Ext.chart package. ',
            status: 'new'
        },{
            text: 'Security Settings',
			linkid: 'securitySettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'securitySettings.jpg',
            desc: 'A simple read-only grid loaded from XML data.'
        },{
            text: 'Bestseller Settings',
			linkid: 'bestsellerSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'bestsellerSettings.jpg',
            desc: 'A grid with pas-domain data loading and custom- rendered expandable row bodies.'
        },{
            text: 'Proxy Settings',
			linkid: 'proxySettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'proxySettings.jpg',
            desc: '<i>New</i> An exampntegrate the Progress Bar with the Paging Toolbar using a custom plugin.'
        },{
            text: 'Gift Message',
			linkid: 'giftMessage',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'giftMessage.jpg',
            desc: '<i>New</i> A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.'
        },{
            text: 'Digital Products',
			linkid: 'digitalProducts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'digitalProducts.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Printable Invoice Settings',
			linkid: 'printableInvoiceSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'printableInvoiceSettings.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Search Engine Settings',
			linkid: 'searchEngineSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'searchEngineSettings.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Wholesale Settings',
			linkid: 'wholesaleSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'wholesaleSettings.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'POP3 & SMTP Email Settings',
			linkid: 'popSmtpEmailSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'popSmtpEmailSettings.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Country List',
			linkid: 'countryList',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'countryList.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'Languages & Currencies',
			linkid: 'languageCurrencies',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'languageCurrencies.jpg',
            desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
        },{
            text: 'CCS Settings',
			linkid: 'ccsSettings',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'ccsSettings.jpg',
            desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'
        }]
    },{
        title: 'Charts & Reports',
        iconCls:'icon-tabs',
        samples: [{
            text: 'Charts',
			linkid: 'charts',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'charts.jpg',
            desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'
        },{
            text: 'Reports',
			linkid: 'reports',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'reports.jpg',
            desc: '<i>New</i> An example of an overflow menu that appears to the right of the TabPanel tab strip'
        }]
    },{
        title: 'Marketing',
        iconCls:'icon-layout',
        samples: [{
            text: 'Google Base',
			linkid: 'googleBase',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'googleBase.jpg',
            desc: 'Comprehensive showcase of ts several custom and combination layouts and combination examples.'
        },{
            text: 'Shopzilla Data Feed',
			linkid: 'shopzillaDataFeed',
            url: 'http://video.awardscart.com/viewer/ac_add_product.jpg',
            icon: 'shopzillaDataFeed.jpg',
            desc: 'A basic accordion layout within a border layout.'
        },{
            text: 'Sale Prices',
			linkid: 'salePrices',
            url: 'http://video.awardscart.com/homepage/homepage.html',
            icon: 'salePrices.jpg',
            desc: 'A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.'
        },{
            text: 'iDev Affiliate Integration',
			linkid: 'idevAffiliate',
            url: 'http://video.awardscart.com/viewer/ac_add_product.jpg',
            icon: 'idevAffiliateIntegration.jpg',
            desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'
        }]
    },{
        title: 'Plug-ins',
        iconCls:'icon-combo',
        samples: [{
            text: 'Data Export',
			linkid: 'dataExport',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'dataExport.jpg',
            desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'
        },{
            text: 'Gift Certificates',
			linkid: 'giftCertficates',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'giftCertficates.jpg',
            desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'
        },{
            text: 'Product Feeds',
			linkid: 'productFeeds',
            url: 'http://video.awardscart.com/comingsoon/comingsoon.html',
            icon: 'productFeeds.jpg',
            desc: 'Customized combo with template-based list rendering, remote loading and paging.'
        }]
	}];

    for(var i = 0, c; c = catalog[i]; i++){
        c.id = 'sample-' + i;
    }

	var menu = Ext.get('sample-menu-inner'), 
		ct = Ext.get('sample-box-inner');
	
	var tpl = new Ext.XTemplate(
        '<div id="sample-ct">',
            '<tpl for=".">',
            '<div><a name="{id}" id="{id}"></a><h2><div unselectable="on">{title}</div></h2>',
            '<dl>',
                '<tpl for="samples">',
                    '<dd ext:linkid="{linkid}">',
						'<a id="{linkid}" href="{url}" onclick="return hs.expand(this)">',
							'<img title="{text}" src="{icon}"/>',
						'</a>',
                        '<div>',
							'<h4>{text}</h4>',
							'<p>{desc}</p>',
						'</div>',
                    '</dd>',
                '</tpl>',
            '<div style="clear:left"></div></dl></div>',
            '</tpl>',
        '</div>'
    );

	tpl.overwrite(ct, catalog);
	
	
	var tpl2 = new Ext.XTemplate(
        '<tpl for="."><a href="#{id}" hidefocus="on" class="{cls}" id="a4{id}"><img src="http://video.awardscart.com/viewer/s.jpg" class="{iconCls}">{title}</a></tpl>'
    );
    tpl2.overwrite(menu, catalog);
	
	
	function calcScrollPosition(){
		var found = false, last;
		ct.select('a[name]', true).each(function(el){
			last = el;
			if(el.getOffsetsTo(ct)[1] > -5){
				activate(el.id)
				found = true;
				return false;
			}
		});
		if(!found){
			activate(last.id);
		}
	}
	
	var bound;
	function bindScroll(){
		ct.on('scroll', calcScrollPosition, ct, {buffer:250});
		bound = true;
	}
	function unbindScroll(){
		ct.un('scroll', calcScrollPosition, ct);
		bound = false;
	}
	function activate(id){
		Ext.get('a4' + id).radioClass('active');
	}
	
	ct.on('mouseover', function(e, t){
        if(t = e.getTarget('dd')){
            Ext.fly(t).addClass('over');
        }
    });
    ct.on('mouseout', function(e, t){
        if((t = e.getTarget('dd')) && !e.within(t, true)){
            Ext.fly(t).removeClass('over');
        }
    });
  	ct.on('click', function(e, t){
        if((t = e.getTarget('dd', 5)) && !e.getTarget('a', 3)){
			var linkid = Ext.fly(t).getAttributeNS('ext', 'linkid');
			if(linkid){
				return hs.expand(document.getElementById(linkid));	
				//return hs.htmlExpand(document.getElementById(linkid), { objectType: 'iframe', width: 700, height: 600 } );	
			}
        }else if(t = e.getTarget('h2', 3, true)){
			t.up('div').toggleClass('collapsed');
		}		
    });  

	menu.on('click', function(e, t){
		e.stopEvent();
		if((t = e.getTarget('a', 2)) && bound){
			var id = t.href.split('#')[1];
			var top = Ext.getDom(id).offsetTop;
			Ext.get(t).radioClass('active');
			unbindScroll();
			ct.scrollTo('top', top, {callback:bindScroll});
		}
	});
	
	Ext.get('samples-cb').on('click', function(e){
		var img = e.getTarget('img', 2);
		if(img){
			Ext.getDom('samples').className = img.className;
			calcScrollPosition.defer(10);
		}
	});
	
	bindScroll();
});