Ext.onReady(function(){
	
	var catalog = [{
        title: 'Site Appearance Tutorials',
		cls:'active',
        iconCls:'icon-grid',
        samples: [{
            text: 'Edit Site Colors',
			linkid: 'editSiteColors',
            url: 'EditSiteColors',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteColors.jpg',
            desc: 'Learn how to define the color schemes and color settings for a particular store template.'
        },{
            text: 'Edit Site Headers',
			linkid: 'editSiteHeadersTextImages',
            url: 'EditSiteHeaders',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteHeadersTextImages.jpg',
            desc: 'Understand how to assign header images within various sections of your store.'
        },{
            text: 'Edit Site Fonts',
			linkid: 'editSiteFonts',
            url: 'EditSiteFonts',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteFonts.jpg',
            desc: 'Understand how to choose the font styles used in many areas of your online store including size, style and weight.'
        },{
            text: 'Edit Site Buttons',
			linkid: 'editSiteButtons',
            url: 'EditSiteButtons',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteButtonsTextImages.jpg',
            desc: 'Learn and decide which button styles and text your store should use and display.'
        }]
	},{
		title: 'Homepage Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Edit Home Page',
			linkid: 'editSiteHomePage',
            url: 'EditHomePage',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteHomePage.jpg',
            desc: 'There are a number of home page settings that you can choose from and use and this video shows how to do it.'
        },{
            text: 'Manage Frontpage Slideshow',
			linkid: 'frontpageSlideshow',
            url: 'ManageFrontpageSlideshow',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/frontpageSlideshowSetting.jpg',
            desc: 'Learn how to control the rotating home page banner that appears on your store's home page.'
		}]
	},{
		title: 'Layout Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Edit Site Layout',
			linkid: 'editSiteLayout',
            url: 'EditSiteLayout',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteLayout.jpg',
            desc: 'Learn how to use our very powerful mechanism to control the layout of your store and the custom side sections within your site.'
        },{
            text: 'Add Custom Box',
			linkid: 'addCustomBox',
            url: 'AddACustomBox',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editSiteLayout.jpg',
            desc: 'Understand how to create your own custom box sections within your site.'
        },{
            text: 'Catalog & Product Settings',
			linkid: 'catalogProductPageSettings',
            url: 'CatalogAndProductSettings',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/catalogProductPageSettings.jpg',
            desc: 'Learn to define how products are displayed within your store in the catalog areas and product searches.'
		}]
	},{
		title: 'Text Page Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Add Edit Text Pages',
			linkid: 'editTextPages',
            url: 'AddEditTextPage',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editTextPages.jpg',
            desc: 'Learn how you can add information or text pages to your site that can be accessed by both the top and bottom menu bars.'
		}]
	},{
		title: 'Product Review Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Product Review Settings',
			linkid: 'productReviewSettings',
            url: 'ProductReviewSettings',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/productReviewSettings.jpg',
            desc: 'Watch how to manage the product review settings for your store, as well as view and approve visitor comments and product ratings.'
		}]
	},{
		title: 'Shipping Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Shipping Management',
			linkid: 'shippingManagement',
            url: 'ShippingManagement',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/shippingManagement.jpg',
            desc: 'Learn how to control the shipping methods of your store including UPS, FED-EX and USPS.'
		}]
    },{
        title: 'Category Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Category Products',
			linkid: 'manageCategories',
            url: 'ManageCategoryProducts',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/manageCategories.jpg',
            desc: 'Learn how to control which products should be shown or hidden within a category.'
        }]
	},{
		title: 'Product Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Recommended Products',
			linkid: 'recommendedProducts',
            url: 'ManageRecommendedProducts',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/recommendedProducts.jpg',
            desc: 'Learn how to designate recommended products that will appear for your customers.'
        },{
            text: 'Bulk Edit Products',
			linkid: 'manageProducts',
            url: 'BulkEditProducts',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/bulkProductLoader.jpg',
            desc: 'Understand how to edit many products at the same time.'
		},{
            text: 'Product Attributes',
			linkid: 'manageProducts',
            url: 'ProductAttributes',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/manageProducts.jpg',
            desc: 'Learn how to manage all of your product's custom attributes.'
		},{
            text: 'Manage Global Attributes',
			linkid: 'globalAttributes',
            url: 'ManageGlobalAttributes',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/globalAttributes.jpg',
            desc: 'Understand how you can define global attributes that can be accessed and used within your store's products.'
        }]
    },{
		title: 'Pricing Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Category Pricing',
			linkid: 'manageCategoryPricing',
            url: 'ManageCategoryPricing',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/manageCategories.jpg',
            desc: 'Learn how to control the pricing of products within a category.'
        },{
            text: 'Manage Category Discounts',
			linkid: 'manageCategoryDiscounts',
            url: 'ManageCategoryDiscounts',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/manageCategories.jpg',
            desc: 'Understand how to control the discount schedules of products within a category.'
        },{
            text: 'Manage Category Sale Prices',
			linkid: 'manageCategorySalePrices',
            url: 'ManageCategorySalePrices',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/manageCategories.jpg',
            desc: 'Learn how to control the sale prices of products within a category.'
        },{
            text: 'Edit Discounts & Promo Codes',
			linkid: 'editDiscountsPromoCodes',
            url: 'EditDiscountsAndPromoCodes',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editDiscountsPromoCodes.jpg',
            desc: 'Learn how to add global discounts for quantity purchases and define promotion codes for your customers.'
        },{
            text: 'Customer Experience',
			linkid: 'customerExperience',
            url: 'customer',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/editDiscountsPromoCodes.jpg',
            desc: 'Learn how to add global discounts for quantity purchases and define promotion codes for your customers.'
        },{
            text: 'Manage Price Groups',
			linkid: 'managePriceGroup',
            url: 'ManagePriceGroups',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/managePriceGroup.jpg',
            desc: 'Understand how to control product pricing by creating price groups within your store and then assigning them to products.'
		}]
    },{
		title: 'Charts & Reports Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Charts',
			linkid: 'charts',
            url: 'ManageCharts',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/charts.jpg',
            desc: 'Learn how to use the screen that displays graphical representation of page views, unique hosts and dollars spent in your store.'
        },{
            text: 'Manage Reports',
			linkid: 'reports',
            url: 'ManageReports',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/reports.jpg',
            desc: 'Understand the area that allows you to view many different types of reports regarding your website and store.'
		}]
    },{
		title: 'Miscellaneous Tutorials',
		iconCls:'icon-apps',
        samples: [{
            text: 'Manage Adminstrators',
			linkid: 'browseAdministrators',
            url: 'ManageAdmins',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/browseAdministrators.jpg',
            desc: 'Learn how to browse and manage all of the adminstrators within your store including their login information.'
        },{
            text: 'Global Cart Settings',
			linkid: 'globalCartSettings',
            url: 'GlobalCartSettings',
            icon: 'http://www.awardscart.com/wp-content/uploads/2010/06/viewer/globalCartSettings.jpg',
            desc: 'Understand how to change some of the more common global settings pages within the admin area.'
		}]
	}];

    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="http://video.awardscart.com/{url}/{url}_controller.swf" title="{text} Tutorial" onclick="return hs.htmlExpand(this, &#123; objectType: &#39;swf&#39;, width: 800, objectWidth: 800, objectHeight: 618, maincontentText: &#39;You need to upgrade your Flash player&#39;, swfOptions: &#123; version: &#39;7&#39;, expressInstallSwfurl: &#39;http://video.awardscart.com/{url}/expressInstall.swf&#39;, quality: &#39;best&#39;, bgcolor: &#39;#1a1a1a&#39;, flashvars: &#123; autostart: true, thumb: &#39;FirstFrame.png&#39;, thumbscale: 45, color: &#39;0x1A1A1A,0x1A1A1A&#39; &#125; &#125; &#125;)">',
							'<img title="" src="{icon}"/>',
						'</a>',
                        '<div class="highslide-heading">',
							'{text} (Tutorial)',
						'</div>',
                        '<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://www.awardscart.com/wp-content/uploads/2010/06/viewer/s.gif" 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');
			var url = Ext.fly(t).getAttributeNS('ext', 'url');
			if(linkid){
				return hs.htmlExpand(document.getElementById(linkid),
				{
					objectType: 'swf',
					width: 804,
					objectWidth: 800,
					objectHeight: 618,
					maincontentText: 'You need to upgrade your Flash player',
					swfOptions:
					{
						version: '7',
						expressInstallSwfurl: 'http://video.awardscart.com/'+url+'/expressInstall.swf',
						quality: 'best',
						bgcolor: '#1a1a1a',
						flashvars: {
							autostart: true,
							thumb: 'FirstFrame.png',
							thumbscale: 45,
							color: '0x1A1A1A,0x1A1A1A'
						}
					}
				} );
			}
        }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();
});