/*
*	30web.com
*
*	Author: Clarence Liu - cl_liu@30web.com 
*	Last Updated: 2010-03-07
*/

ThirtyWeb.showE_CommercePortfolio = function(){
	ThirtyWeb.eCommerceMinValue = 5;
	ThirtyWeb.eCommerceMaxValue = 10;

	ThirtyWeb.eCommerceArray = new Array();

	ThirtyWeb.eCommerceArray[10] = {websiteName: '<a class="eComm" target="_blank" href="http://www.magneticcalendars2011.com">Magnetic Calendars</a>',
																	websiteId: 10,
																	websiteImg: 'images/websites/magCal2010.jpg',
																	imgWidth: 1020,
																	imgHeight: 908,
																	websiteImgThumb: 'images/websites/magCal2010_small.jpg',
																	websiteDescription: ''};

	ThirtyWeb.eCommerceArray[9] = {websiteName: '<a class="eComm" target="_blank" href="http://www.pmbranding.com">PM Branding Corp.</a>',
																	websiteId: 9,
																	websiteImg: 'images/websites/pmbranding.jpg',
																	imgWidth: 1036,
																	imgHeight: 962,
																	websiteImgThumb: 'images/websites/pmbranding_small.jpg',
																	websiteDescription: ''};

	ThirtyWeb.eCommerceArray[8] = {websiteName: '<a class="eComm" target="_blank" href="http://www.blacklabcomputers.ca">Blacklab Computers</a>',
																	websiteId: 8,
																	websiteImg: 'images/websites/blacklabComputers.jpg',
																	imgWidth: 1182,
																	imgHeight: 925,
																	websiteImgThumb: 'images/websites/blacklabComputers_small.jpg',
																	websiteDescription: ''};
																	
	ThirtyWeb.eCommerceArray[7] = {websiteName: '<a class="eComm" target="_blank" href="http://www.balloonbrand.com">Balloonbrand - RE/MAX Promotional Products</a>',
																	websiteId: 7,
																	websiteImg: 'images/websites/balloonbrand.jpg',
																	imgWidth: 981,
																	imgHeight: 1243,
																	websiteImgThumb: 'images/websites/balloonbrand_small.jpg',
																	websiteDescription: ''};
																	
	ThirtyWeb.eCommerceArray[6] = {websiteName: '<a class="eComm" target="_blank" href="http://www.branderseeds.com">Brander Seeds - Imprinted Seed Packets</a>',
																	websiteId: 6,
																	websiteImg: 'images/websites/branderSeeds.jpg',
																	imgWidth: 1045,
																	imgHeight: 1105,
																	websiteImgThumb: 'images/websites/branderSeeds_small.jpg',
																	websiteDescription: ''};				
	
	ThirtyWeb.eCommerceArray[5] = {websiteName: '<a class="eComm" target="_blank" href="http://www.clicpen.com">ClicPen - Low Cost Imprinted Pens</a>',
																	websiteId: 5,
																	websiteImg: 'images/websites/clicpen.jpg',
																	imgWidth: 1090,
																	imgHeight: 922,
																	websiteImgThumb: 'images/websites/clicpen_small.jpg',
																	websiteDescription: ''};

	ThirtyWeb.eCommerceShowImage = function(websiteId){
		var popUpImageWindow = new Ext.Window({
			title: '<font style="font-weight: normal">E-Commerce Portfolio:</font> ' + ThirtyWeb.eCommerceArray[websiteId].websiteName,
			modal: true,
			width: ThirtyWeb.eCommerceArray[websiteId].imgWidth + 35,
			height: 700,
			layout: 'border',
			items: [new Ext.Panel({
				id: 'imagePanel',
				autoScroll: true,
				region: 'center',
				html: '<div id="imagePopUpDiv"></div>'
			}),
			new Ext.Panel({
				region: 'south',
				height: 25,
				html: '',
				layout: 'hbox',
				items: [
					new Ext.Button({
						text: 'Previous',
						flex: 1,
						handler: function(){
							websiteId += 1;
							if (websiteId > ThirtyWeb.eCommerceMaxValue){
								websiteId = ThirtyWeb.eCommerceMaxValue;
							}
							popUpImageWindow.setWidth(ThirtyWeb.eCommerceArray[websiteId].imgWidth + 35);
							popUpImageWindow.setTitle('<font style="font-weight: normal">E-Commerce Portfolio:</font> ' + ThirtyWeb.eCommerceArray[websiteId].websiteName);
							document.getElementById('imagePopUpDiv').innerHTML = '<img src="' + ThirtyWeb.eCommerceArray[websiteId].websiteImg + '">';
						}
					}),
					new Ext.Button({
						text: 'Close',
						flex: 1,
						handler: function(){
							popUpImageWindow.close();
						}
					}),
					new Ext.Button({
						text: 'Next',
						flex: 1,
						handler: function(){
							websiteId -= 1;
							if (websiteId < ThirtyWeb.eCommerceMinValue){
								websiteId = ThirtyWeb.eCommerceMinValue;
							}
							popUpImageWindow.setWidth(ThirtyWeb.eCommerceArray[websiteId].imgWidth + 35);
							popUpImageWindow.center();
							popUpImageWindow.setTitle('<font style="font-weight: normal">E-Commerce Portfolio:</font> ' + ThirtyWeb.eCommerceArray[websiteId].websiteName);
							document.getElementById('imagePopUpDiv').innerHTML = '<img src="' + ThirtyWeb.eCommerceArray[websiteId].websiteImg + '">';
						}
					})
				]
			})]
		});
		popUpImageWindow.getComponent('imagePanel').on('afterrender', function(){
			document.getElementById('imagePopUpDiv').innerHTML = '<img src="' + ThirtyWeb.eCommerceArray[websiteId].websiteImg + '">';
		});
		popUpImageWindow.show();
	};

	ThirtyWeb.eCommerceThumbTemplate = new Ext.Template([
	'<table width="100%" height="225">',
		'<tr>',
			'<td>',
				'<a href="javascript:void(0)" onClick="ThirtyWeb.eCommerceShowImage({websiteId})">',
					'<img src="{websiteImgThumb}" border="0" width="250" height="210">',
				'</a>',
			'</td>',
		'</tr>',
		'<tr>',
			'<td class="indexText" style="font-size: 14px; font-weight: bold; padding:0; padding-top: 10px" >',
				'{websiteName}',
			'</td>',
		'</tr>',
	'</table>']);
	ThirtyWeb.eCommerceThumbTemplate.compile();

	//Default = 9
	ThirtyWeb.eCommerceThumbTemplate.append('eCommerceExamplesTd', ThirtyWeb.eCommerceArray[9]);

	//Slider
	var eCommerceSliderTip = new Ext.ux.SliderTip({
		getText: function(slider){
			return ThirtyWeb.eCommerceArray[slider.getValue()].websiteName;
		}
	});
	ThirtyWeb.eCommerceSlider = new Ext.Slider({
		id: 'eCommerceSlider',
		renderTo: 'eCommerceSliderTd',
		vertical: true,
		height: 225,
		increment: 1,
		value: 9,
		minValue: ThirtyWeb.eCommerceMinValue,
		maxValue: ThirtyWeb.eCommerceMaxValue,
		plugins: eCommerceSliderTip
	});
	ThirtyWeb.eCommerceSlider.on('change', function(slider, newValue){
		ThirtyWeb.eCommerceThumbTemplate.overwrite('eCommerceExamplesTd', ThirtyWeb.eCommerceArray[newValue]);
	});
};