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

ThirtyWeb.showWebsiteDesignPortfolio = function(){
	ThirtyWeb.webDesignMinValue = 7;
	ThirtyWeb.webDesignMaxValue = 10;

	ThirtyWeb.webDesignArray = new Array();

	ThirtyWeb.webDesignArray[10] = {websiteName: 'Romano Hair Design - Old',
																	websiteId: 10,
																	websiteImg: 'images/websites/romanoHairDesignOld.jpg',
																	imgWidth: 980,
																	imgHeight: 700,
																	websiteImgThumb: 'images/websites/romanoHairDesignOld_small.png',
																	websiteDescription: 'An inactive salon website we have since revamped'};

	ThirtyWeb.webDesignArray[9] = {websiteName: '<a class="eComm" target="_blank" href="http://www.romanohairdesign.com/dev">Romano Hair Design</a>',
																	websiteId: 9,
																	websiteImg: 'images/websites/romanoHairDesign.jpg',
																	imgWidth: 980,
																	imgHeight: 775,
																	websiteImgThumb: 'images/websites/romanoHairDesign_small.jpg',
																	websiteDescription: 'A revamp for a previous client with a new focus on Aveda products'};

	ThirtyWeb.webDesignArray[8] = {websiteName: '<a class="eComm" target="_blank" href="http://www.zsccl.com">ZS Confiance Consulting</a>',
																	websiteId: 8,
																	websiteImg: 'images/websites/zsccl.jpg',
																	imgWidth: 980,
																	imgHeight: 703,
																	websiteImgThumb: 'images/websites/zsccl_small.png',
																	websiteDescription: ''};
	
	ThirtyWeb.webDesignArray[7] = {websiteName: '<a class="eComm" target="_blank" href="http://www.plastic2fuel.com">Plastic2Fuel</a>',
																	websiteId: 7,
																	websiteImg: 'images/websites/plastic2fuel.jpg',
																	imgWidth: 990,
																	imgHeight: 629,
																	websiteImgThumb: 'images/websites/plastic2fuel_small.jpg',
																	websiteDescription: 'Plastic2Fuel - A new company with plastic to diesel/fuel technology'};

	ThirtyWeb.websiteShowImage = function(websiteId){
		var popUpImageWindow = new Ext.Window({
			title: '<font style="font-weight: normal">Website Design Portfolio:</font> ' + ThirtyWeb.webDesignArray[websiteId].websiteName,
			modal: true,
			width: ThirtyWeb.webDesignArray[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.webDesignMaxValue){
								websiteId = ThirtyWeb.webDesignMaxValue;
							}
							popUpImageWindow.setWidth(ThirtyWeb.webDesignArray[websiteId].imgWidth + 35);
							popUpImageWindow.center();
							popUpImageWindow.setTitle('<font style="font-weight: normal">Website Design Portfolio:</font> ' + ThirtyWeb.webDesignArray[websiteId].websiteName);
							document.getElementById('imagePopUpDiv').innerHTML = '<img src="' + ThirtyWeb.webDesignArray[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.webDesignMinValue){
								websiteId = ThirtyWeb.webDesignMinValue;
							}
							popUpImageWindow.setWidth(ThirtyWeb.webDesignArray[websiteId].imgWidth + 35);
							popUpImageWindow.center();
							popUpImageWindow.setTitle('<font style="font-weight: normal">Website Design Portfolio:</font> ' + ThirtyWeb.webDesignArray[websiteId].websiteName);
							document.getElementById('imagePopUpDiv').innerHTML = '<img src="' + ThirtyWeb.webDesignArray[websiteId].websiteImg + '">';
						}
					})
				]
			})]
		});
		popUpImageWindow.getComponent('imagePanel').on('afterrender', function(){
			document.getElementById('imagePopUpDiv').innerHTML = '<img src="' + ThirtyWeb.webDesignArray[websiteId].websiteImg + '">';
		});
		popUpImageWindow.show();
	};

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

	//Default = 9
	ThirtyWeb.websiteThumbTemplate.append('websiteDesignExamplesTd', ThirtyWeb.webDesignArray[9]);

	//Slider
	var websiteDesignSliderTip = new Ext.ux.SliderTip({
		getText: function(slider){
			return ThirtyWeb.webDesignArray[slider.getValue()].websiteName;
		}
	});
	ThirtyWeb.websiteDesignSlider = new Ext.Slider({
		id: 'websiteDesignSlider',
		renderTo: 'websiteDesignSliderTd',
		vertical: true,
		height: 325,
		increment: 1,
		value: 9,
		minValue: ThirtyWeb.webDesignMinValue,
		maxValue: ThirtyWeb.webDesignMaxValue,
		plugins: websiteDesignSliderTip
	});
	ThirtyWeb.websiteDesignSlider.on('change', function(slider, newValue){
		ThirtyWeb.websiteThumbTemplate.overwrite('websiteDesignExamplesTd', ThirtyWeb.webDesignArray[newValue]);
	});
};