Ext.namespace("WCS", "WCS.lang", "WCS.layout", "WCS.carousel");

WCS.layout.ColumnLayout = function(cfg){
    Ext.apply(this, cfg);
};

Ext.extend(WCS.layout.ColumnLayout, Ext.util.Observable, {
	layoutType: null,
	
	carousel: null,
	
	resizables: [],
	
	appearingImages: [],
	
	slidingImages: [],
	
	tooltips: [],
	
	flipperButtons: [],
	
	renderedPanels: [],
	
	cells: [],
	
	displayElement: function(element) {
		jQuery(element).appear({ duration: 3.0 });
	},
	
	layout: function(layoutType) {
		this.resizables = [];
		this.appearingImages = [];
		this.slidingImages = [];
		this.tooltips = [];
		this.flipperButtons = [];
		this.renderedPanels = [];
		this.cells = [];
		this.layoutType = layoutType;
		this.autoScroll = false;
		this.carousel = null;
		        
		this.renderBanner();
		this.generate(layoutType);
		
		
		var main = Ext.get("wcs-mainPanel");
		main.dom.innerHTML = "";
		this.mainPanel = new Ext.Panel({
			renderTo: "wcs-mainPanel",
            layout:"table",
			border: false,
			bodyBorder: false,
			autoScroll: this.autoScroll,
            height: Ext.lib.Dom.getViewHeight() - WCS.layout.bannerHeight,
            width: Ext.lib.Dom.getViewWidth(),
            layoutConfig:{columns:2},
            items: this.cells
		});

		if (Ext.isEmpty(this.carousel)) {
		    // Default configuration properties.
		    var config = {
		        vertical: false,
		        start: 1,
		        offset: 1,
		        size: null,
		        scroll: 3,
		        visible: null,
		        animation: 'normal',
		        easing: 'swing',
		        auto: 0,
		        wrap: null
		    };
		    var images = null;
		    var carouselCallback = function(){};
			if (layoutType == "home") {
				config.vertical = true;
				config.auto = 5.0;
				config.wrap = "circular";
				config.animation = 10000;
				config.easing = "linear";
				config.scroll = 1;
				config.visible = 1;
				images = WCS.carousel.seats;
			} else if (layoutType == "presentProductions") {
				config.vertical = false;
				config.auto = 5.0;
				config.wrap = "circular";
				config.animation = 5000;
				config.easing = "linear";
				config.scroll = 1;
				config.visible = 1;
				images = WCS.presentPlayers;
				carouselCallback = function(obj) {
	            	var win = Ext.getCmp('popup-win');
	            	if (win) {
	            		win.close();
	            	}
	            	if (!Ext.isEmpty(obj.bio)) {
		                win = new Ext.Window({
		                    autoScroll : true,
		                    resizable : true,
		                    id: 'popup-win',
		                    title: obj.name,
		                    autoShow: true,
		                    closable: true,
		                    draggable: true,
		                    maximizable:false,
		                    layout: 'fit',
		                    shadow: false,
		                    modal: true,
		                    width: 500,
		                    height: 350,
		                    html: '<div class="presentBio">' + obj.bio + '</div>',
		                    y: 75,
		                    padding: 5
		                });
		                win.show();
	            	}
	            };
			} else if (layoutType == "pastProductions") {
				config.vertical = true;
				config.auto = 0;
				config.wrap = "circular";
				config.animation = 'normal';
				config.easing = "linear";
				config.scroll = 1;
				config.visible = 2;
				images = WCS.pastPlayers;
				carouselCallback = function(obj) {
	            	var win = Ext.getCmp('popup-win');
	            	if (win) {
	            		win.close();
	            	}
	            	if (!Ext.isEmpty(obj.bio)) {
		                win = new Ext.Window({
		                    autoScroll : true,
		                    resizable : true,
		                    id: 'popup-win',
		                    title: obj.name,
		                    autoShow: true,
		                    closable: true,
		                    draggable: true,
		                    maximizable:false,
		                    layout: 'fit',
		                    shadow: false,
		                    modal: true,
		                    width: 500,
		                    height: 350,
		                    html: '<div class="pastBio">' + obj.bio + '</div>',
		                    y: 75,
		                    padding: 5
		                });
		                win.show();
	            	}
	            };
			} else if (layoutType == "calendar") {
				config.vertical = true;
				config.auto = 0.01;
				config.wrap = "circular";
				config.animation = 15000;
				config.easing = "linear";
				config.textscroller = true;
				images = WCS.carousel.upcomingEvents;
			}
			
			if (!Ext.isEmpty(images)) {
				this.carousel = new WCS.Carousel(images, carouselCallback, config);
			}
		}
		
        Ext.EventManager.onWindowResize(this.resizeWindow, this);
        
        for(var i = 0; i < this.tooltips.length; i++) {
            var tooltip = new Ext.ToolTip(this.tooltips[i]);
        }
        
        for(var i = 0; i < this.flipperButtons.length; i++) {
            var button = new Ext.Button(this.flipperButtons[i]);
        }
        
        for(var i = 0; i < this.renderedPanels.length; i++) {
            var panel = new Ext.Panel(this.renderedPanels[i]);
        }
        
        if (layoutType == "home") {			
			Ext.get("wcs-contact-icon").on('click', function() {
				var win = new WCS.FormWindow();
				win.launchWindow("Contact", {
					height: 490, 
					width: 720
				});
			});
			
			Ext.get("wcs-donate-icon").on('click', function() {
		    	document.forms["payPalForm"].submit();
			});
        }
  
        if (layoutType == "bio") {
            var tooltip = new Ext.ToolTip({
            	target: "bio-image",
            	title: WCS.lang.clickToEmail
            });
            
            var el = Ext.get("bio-image");
            el.on("click", function(evt, obj) {
    			var win = new WCS.FormWindow();
    			win.launchWindow("Contact", {
    				height: 490, 
    				width: 720,
    				emailRecipient: WCS.emails.bio
    			});
            });
        }
  
        if (layoutType == "presentProductions") {
	        for(var i = 0; i < WCS.presentPlayers.length; i++) {
	        	if (!Ext.isEmpty(WCS.presentPlayers[i].bio)) {
		            var tooltip = new Ext.ToolTip({
		            	target: "carouselImage" + i,
		            	title: WCS.lang.clickForBio,
		            	mouseOffset: [-200, 0]
		            });
	        	}
	        }  
	        
            var el = Ext.get("wcs-directions");
            if (el) {
	            el.on("click", function(evt, obj) {
	            	var win = Ext.getCmp('map-win');
	            	if (win) {
	            		win.close();
	            	}
	            	win = new Ext.Window({
	                    autoScroll : false,
	                    resizable : false,
	                    id: 'map-win',
	                    title: "Map of the Atlas Performing Arts Center",
	                    autoShow: true,
	                    closable: true,
	                    draggable: true,
	                    maximizable:false,
	                    layout: 'fit',
	                    shadow: false,
	                    modal: true,
	                    width: 445,
	                    height: 515,
	                    html: '<iframe width="100%" height="100%" src="http://dcblacktheatrefestival.com/dcblacktheatrefestival_015.htm"></iframe>',
	                    y: 150
	                });
	                win.show();
	                
//	                window.open("http://www.mapquest.com/maps?2c=Washington&2s=DC&2a=1333+H+St+NE&2z=20002&2y=US&form=directions&CID=lfddlink","directionswin","left=20,top=20,width=690,height=500,toolbar=1,resizable=0");
	            });
            }
        }
        
        if (layoutType == "pastProductions") {
	        for(var i = 0; i < WCS.pastPlayers.length; i++) {
	        	if (!Ext.isEmpty(WCS.pastPlayers[i].bio)) {
		            var tooltip = new Ext.ToolTip({
		            	target: "carouselImage" + i,
		            	title: WCS.lang.clickForBio,
		            	mouseOffset: [-200, 0]
		            });
	        	}
	        }  
        }
        
        if (layoutType == "gallery") {
        	jQuery(document).ready(function($) { 
        		// We only want these styles applied when javascript is enabled
    			$('div.content').css('display', 'block');

    			// Initially set opacity on thumbs and add
    			// additional styling for hover effect on thumbs
    			var onMouseOutOpacity = 0.67;
    			$('#thumbs ul.thumbs li').opacityrollover({
    				mouseOutOpacity:   onMouseOutOpacity,
    				mouseOverOpacity:  1.0,
    				fadeSpeed:         'fast',
    				exemptionSelector: '.selected'
    			});
    			
    			// Initialize Advanced Galleriffic Gallery
    			var gallery = $('#thumbs').galleriffic({
    				delay:                     2500,
    				numThumbs:                 7,
    				preloadAhead:              7,
    				enableTopPager:            false,
    				enableBottomPager:         false,
    				imageContainerSel:         '#slideshow',
    				controlsContainerSel:      '#controls',
    				captionContainerSel:       '#caption',
    				loadingContainerSel:       '#loading',
    				renderSSControls:          true,
    				renderNavControls:         true,
    				playLinkText:              'Play Slideshow',
    				pauseLinkText:             'Pause Slideshow',
    				prevLinkText:              '&lsaquo; Previous Photo',
    				nextLinkText:              'Next Photo &rsaquo;',
    				nextPageLinkText:          'Next &rsaquo;',
    				prevPageLinkText:          '&lsaquo; Prev',
    				enableHistory:             false,
    				autoStart:                 true,
    				syncTransitions:           true,
    				defaultTransitionDuration: 900,
    				onSlideChange:             function(prevIndex, nextIndex) {
    					// 'this' refers to the gallery, which is an extension of $('#thumbs')
    					this.find('ul.thumbs').children()
    						.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    						.eq(nextIndex).fadeTo('fast', 1.0);

    					// Update the photo index display
    					this.$captionContainer.find('div.photo-index')
    						.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
    				},
    				onPageTransitionOut:       function(callback) {
    					this.fadeTo('fast', 0.0, callback);
    				},
    				onPageTransitionIn:        function() {
    					var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
    					var nextPageLink = this.find('a.next').css('visibility', 'hidden');
    					
    					// Show appropriate next / prev page links
    					if (this.displayedPage > 0)
    						prevPageLink.css('visibility', 'visible');

    					var lastPage = this.getNumPages() - 1;
    					if (this.displayedPage < lastPage)
    						nextPageLink.css('visibility', 'visible');

    					this.fadeTo('fast', 1.0);
    				}
    			});

    			/**************** Event handlers for custom next / prev page links **********************/

    			gallery.find('a.prev').click(function(e) {
    				gallery.previousPage();
    				e.preventDefault();
    			});

    			gallery.find('a.next').click(function(e) {
    				gallery.nextPage();
    				e.preventDefault();
    			});
    			
//    		    var initLen = 14;
//    			for (var i = initLen; i < imageGallery.length; i++) {
//    				var galleryImg = imageGallery[i];
//    				galleryImg.description = galleryImg.description ? galleryImg.description : '';
//    				
//    				var html = "";
//    				
//    				html += '<li>';
//    				html += '<a class="thumb" name="galleryImg' + i + '" href="' + galleryImg.image + '" title="' + galleryImg.title + '">';
//    				html += '<img src="' + galleryImg.thumbnail + '" alt="' + galleryImg.title + '" height="100px" width="100px" />';
//    				html += '</a>';
//    				html += '<div class="caption">';
//    				html += '<div class="image-title">' + galleryImg.title + '</div>';
//    				html += '<div class="image-desc">' + galleryImg.description + '</div>';
//    				html += '</div>';
//    				html += '</li>';
//    				
//    				gallery.appendImage(html);
//    			}
    			
        	});
        }
        
        if (layoutType == "futureProductions") {
    		var castingForm1 = Ext.get("casting_form1");
    		if (castingForm1) {
	    		castingForm1.on('click', function() {
	    			var win = new WCS.FormWindow();
	    			win.launchWindow("Casting", { height: 340 });
	    		});
    		}
    		var castingForm2 = Ext.get("casting_form2");
    		if (castingForm2) {
	    		castingForm2.on('click', function() {
	    			var win = new WCS.FormWindow();
	    			win.launchWindow("Casting", { height: 340 });
	    		});
    		}
        }
        
        if (layoutType == "staff") {
	        for(var i = 0; i < WCS.staff.length; i++) {
	        	if (!Ext.isEmpty(WCS.staff[i].email)) {
		            var tooltip = new Ext.ToolTip({
		            	target: "staff-image" + i,
		            	title: WCS.lang.clickToEmail
		            });
		            
		            var el = Ext.get("staff-image" + i);
		            el.on("click", function(evt, obj) {
		            	var index = parseInt(obj.id.replace("staff-image",""));
		    			var win = new WCS.FormWindow();
		    			win.launchWindow("Contact", {
		    				height: 490, 
		    				width: 720,
		    				emailRecipient: WCS.staff[index].email
		    			});
		            });
	        	}
	        }  
        }
        
        if (layoutType == "friends") {
            var el = Ext.get("friend_logo");
            el.on("click", function(evt, obj) {
    			var win = new WCS.FormWindow();
    			win.launchWindow("Contact", {
    				height: 490, 
    				width: 720,
    				emailSubject: "I’d like to learn more about becoming a WCS Friend."
    			});
            });
            
        	if (WCS.friends.length > 0) {
		        for(var i = 0; i < WCS.friends.length; i++) {
		            var url = WCS.friends[i].url;
		            var name = WCS.friends[i].name;
		            var tooltip = new Ext.ToolTip({
		            	target: "friend" + i,
		            	title: name
		            });
		            
		            var el = Ext.get("friend" + i);
		            if (el && url) {
			            el.on("click", function(evt, obj) {
			            	var index = parseInt(obj.id.replace("friend",""));
			            	var win = Ext.getCmp('popup-win');
			            	if (win) {
			            		win.close();
			            	}
			            	win = new Ext.Window({
			                    autoScroll : false,
			                    resizable : true,
			                    id: 'popup-win',
			                    title: WCS.friends[index].name,
			                    autoShow: true,
			                    closable: true,
			                    draggable: true,
			                    maximizable:true,
			                    layout: 'fit',
			                    shadow: false,
			                    modal: true,
			                    width: Ext.lib.Dom.getViewWidth() - 100,
			                    height: Ext.lib.Dom.getViewHeight() - 100,
			                    html: '<iframe width="100%" height="100%" src="' + WCS.friends[index].url + '">',
			                    y: 75
			                });
			                win.show();
			            });
		            }
		        }  
        	} 
        }
	},
	
	renderBanner: function() {
		var layoutType = !Ext.isEmpty(WCS.lang[this.layoutType]) ? WCS.lang[this.layoutType] : this.layoutType;
		var taglinePanel = Ext.get("tagline");
		if (taglinePanel) {
			taglinePanel.dom.innerHTML = "";
			this.taglinePanel = new Ext.Panel({
				id: 'taglinePanel',
	    		border: false,
	    		renderTo: 'tagline',
	    		height: 25,
	            html: WCS.lang.WCSProductions + ' - ' + layoutType + '<span id="taglineImage">' + WCS.lang.tagline + '</span>'
			});
		}
	},
	
	generate: function(layoutType) {
		var viewHeight = Ext.lib.Dom.getViewHeight() - WCS.layout.bannerHeight;
		var firstColHTML = "";
		var secondColHTML = "";
		var firstColAutoscroll = false;
		var secondColAutoscroll = true;
		
		if(layoutType == "home") {
		    var isPaypal = location.search.indexOf("paypal=success") > -1 ? true : false;
		    if (isPaypal) {
		    	Ext.Msg.alert(WCS.lang.donation, WCS.lang.paypalSuccessMsg);
		    }
		    
			this.firstColWidth = 200;
			firstColHTML = '<div id="wcs-carousel"><ul id="mycarousel" class="jcarousel-skin-ie7"></ul></div>';
			this.appearingImages.push("wcs-logo");
			secondColHTML = '<div id="wcs-logo" ><center><img src="images/home_logo.jpg" /></center></div>' +
							'<div id="wcs-tagline"><center><img src="images/IPET.jpg" /></center></div>' +
							'<div id="wcs-mission-statement">' + WCS.lang.introText + '</div>';
			secondColHTML += '<div id="footer"><center><img id="wcs-contact-icon" src="images/contact_image.jpg" /><img id="wcs-donate-icon" src="images/donate_image.jpg" /></center></div>';
		} else if(layoutType == "bio") {
			var viewWidth = (Ext.lib.Dom.getViewWidth() / 2);	// half page minus 10px for padding 
			this.firstColWidth = viewWidth;
			
			// define image, setting width to half the page minus 10px for padding
			firstColHTML = '<div id="wcs-image"><div><center><img id="bio-image" src="images/bio_image.jpg" height="' + viewHeight + '" width="' + (viewWidth - 60) + '" /></center></div></div>';
			this.resizables.push("bio-image");
			this.appearingImages.push("wcs-image");
			
			secondColHTML = '<div id="wcs-bio-text"><br />' + WCS.lang.bioText + '</div>';
		} else if(layoutType == "futureProductions") {
			var viewWidth = (Ext.lib.Dom.getViewWidth() / 2);	// half page minus 10px for padding 
			this.firstColWidth = viewWidth;
			
			// define image, setting width to half the page minus 10px for padding
			firstColHTML = '<br /><div id="future1">' + 
								'<div>' + 
									'<center><img id="future-image1" src="' + WCS.images.future1Image + '" height="' + (viewHeight - 75) + '" width="' + (viewWidth - 135) + '" /></center>' + 
								    '<center><div id="future-button1"></div></center>' +
								'</div>' + 
								'<div>' + 
//									'<div id="future-text1" height="' + (viewHeight - 25) + '" width="' + (viewWidth - 60) + '" style="overflow:auto;" >' + WCS.images.future1Text + '<br /><p><a href="#" id="casting_form1">Casting Form</a></p></div>' +
									'<div id="future-text1" height="' + (viewHeight - 75) + '" width="' + (viewWidth - 135) + '" style="overflow:auto;" >' + WCS.images.future1Text + '<br /></div>' +
									'<center><div id="future-button2"></div></center>' +
								'</div>' + 
						   '</div>';
			this.resizables.push("future-image1");
			this.resizables.push("future-text1");
			this.appearingImages.push("future1");
			this.flipperButtons.push({
				renderTo: "future-button1",
				text: WCS.images.future1Title,
				overCls: "highlight-button",
				handler: function() {
			    	jQuery('#future1').quickFlipper();
				}
			});
			this.flipperButtons.push({
				renderTo: "future-button2",
				text: WCS.images.future1Title,
				overCls: "highlight-button",
				handler: function() {
			    	jQuery('#future1').quickFlipper();
				}
			});
			
			secondColHTML = '<br /><div id="future2">' + 
								'<div>' + 
									'<center><img id="future-image2" src="' + WCS.images.future2Image + '" height="' + (viewHeight - 75) + '" width="' + (viewWidth - 135) + '" /></center>' + 
								    '<center><div id="future-button3"></div></center>' +
								'</div>' + 
								'<div>' + 
//									'<div id="future-text2" height="' + (viewHeight - 25) + '" width="' + (viewWidth - 60) + '" style="overflow:auto;" >' + WCS.images.future2Text + '<br /><p><a href="#" id="casting_form2">Casting Form</a></p></div>' +
									'<div id="future-text2" height="' + (viewHeight - 75) + '" width="' + (viewWidth - 135) + '" style="overflow:auto;" >' + WCS.images.future2Text + '<br /></div>' +
									'<center><div id="future-button4"></div></center>' +
								'</div>' + 
						    '</div>';
			this.resizables.push("future-image2");
			this.resizables.push("future-text2");
			this.appearingImages.push("future2");
			this.flipperButtons.push({
				renderTo: "future-button3",
				text: WCS.images.future2Title,
				overCls: "highlight-button",
				handler: function() {
					jQuery('#future2').quickFlipper();
				}
			});
			this.flipperButtons.push({
				renderTo: "future-button4",
				text: WCS.images.future2Title,
				overCls: "highlight-button",
				handler: function() {
					jQuery('#future2').quickFlipper();
				}
			});
			secondColAutoscroll = false;
		} else if(layoutType == "staff") {
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			this.firstColWidth = 0;
			secondColAutoscroll = true;
			this.autoScroll = false;
			
			secondColHTML += '<table width="' + (viewWidth - 20) + '" border="0">';
			secondColHTML += '<tr><td colspan=2 valign="middle"><center><img id="staffQuote" src="images/business_quote.jpg" height=150 width=600 /></center></td></tr>';
			secondColHTML += '<tr><td colspan=2>&nbsp;</td></tr>';
			
			for (var i = 0; i < WCS.staff.length; i++) {
				if (i % 2 == 0) {
					secondColHTML += '<tr><td><div id="staff' + i + '">' + 
										'<div><center><img id="staff-image' + i + '" src="' + WCS.staff[i].image + '" height="275" width="250" /><br />' + WCS.staff[i].name + '<br /><b>' + WCS.staff[i].title + '</b></center></div>' + 
									 '</div></td>';
				} else {
					secondColHTML += '<td><div id="staff' + i + '">' + 
										'<div><center><img id="staff-image' + i + '" src="' + WCS.staff[i].image + '" height="275" width="250" /><br />' + WCS.staff[i].name + '<br /><b>' + WCS.staff[i].title + '</b></center></div>' + 
									 '</div></td></tr>';
				}
			}
			
			secondColHTML += '</table>';

		} else if (layoutType == "presentProductions") {
			firstColAutoscroll = false;
			secondColAutoscroll = true;
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			this.firstColWidth = 0;
			
			secondColHTML += '<table id="wcs-present-table" width="' + (viewWidth - 20) + '" border="0"><tr>';
			secondColHTML += '<td valign="top"><img id="presentProduction" src="images/WCS_layout_DCBTF.jpg" height="100%" width="100%" /></td>';
			
			secondColHTML += '<td valign="top" width="300px"><div id="wcs-present-info">' + WCS.lang.presentInfo;
			secondColHTML += '<center><a href="#"><img id="wcs-directions" border="0" height"75" width="150" src="images/directions_and_map.jpg"></a></center>';
			secondColHTML += '<div class="presentInfoSubHeader"><center>MEET THE CAST';
//			secondColHTML += '</center></div></div></td>';
//			secondColHTML += '<td valign="top" width="200">';
//			secondColHTML += '<div id="wcs-cast-carousel"><ul id="mycarousel" class="jcarousel-skin-ie7"></ul></div>';
			secondColHTML += '<ul id="mycarousel" class="jcarousel-skin-ie7"></ul>';
//			secondColHTML += '<form id="wcs-tickets-info" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">' +
//							 '<input type="hidden" name="cmd" value="_s-xclick">' +
//							 '<input type="hidden" name="hosted_button_id" value="3K73J8PQPZ878">' +
//							 '<input type="image" src="images/purchase_dvd_image.jpg" border="0" name="submit" alt="Click here to purchase a DVD">' +
//							 '<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"><br /><br />' +
//							 '</form>';		
	    	secondColHTML += '</center></div></td>';
			secondColHTML += '</tr></table>';			
		} else if (layoutType == "pastProductions") {
			firstColAutoscroll = false;
			secondColAutoscroll = true;
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			this.firstColWidth = 0;
			
			secondColHTML += '<table width="' + (viewWidth - 20) + '" border="0"><tr>';
			secondColHTML += '<td valign="top"><img id="pastProduction" src="images/VLproduction_Page.jpg" height="600" width="500" /></td>';
			
			secondColHTML += '<td valign="top"><div id="wcs-past-info">' + WCS.lang.pastInfo;
			secondColHTML += '<div class="pastInfoBody"><center>';
			secondColHTML += '<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">' +
							 '<input type="hidden" name="cmd" value="_s-xclick">' +
							 '<input type="hidden" name="hosted_button_id" value="3K73J8PQPZ878">' +
							 '<input type="image" src="images/purchase_dvd_image.jpg" border="0" name="submit" alt="Click here to purchase a DVD">' +
							 '<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">' +
							 '<a href="gallery.html"><img id="imgPictureGallery" alt="" border="0" src="images/picturegallery_image.jpg"></a><br />' +
							 '</form>';		
			secondColHTML += '</center></div>';
			secondColHTML += '<div class="pastPurchaseInfo">';
			secondColHTML += '<p>' + WCS.lang.purchaseDVDtext + '</p>';
			secondColHTML += '</div></div></td>';
			secondColHTML += '<td valign="top" width="200">';
			secondColHTML += '<div id="wcs-cast-carousel"><ul id="mycarousel" class="jcarousel-skin-ie7"></ul></div>';
	    	secondColHTML += '</td>';
			secondColHTML += '</tr></table>';			
		} else if (layoutType == "gallery") {
			firstColAutoscroll = false;
			secondColAutoscroll = true;
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			this.firstColWidth = 0;
			
			secondColHTML += '<center>';
			secondColHTML += '<div id="page">';
		    secondColHTML += '<div id="container">';
		    secondColHTML += '<div class="navigation-container">';
		    secondColHTML += '<div id="thumbs" class="navigation">';
		    secondColHTML += '<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>';
		    secondColHTML += '<ul class="thumbs noscript">';
		    
//		    var initLen = 14;
//		    if (imageGallery.length < initLen) {
//		    	initLen = imageGallery.length;
//		    }
			for (var i = 0; i < imageGallery.length; i++) {
				var galleryImg = imageGallery[i];
				galleryImg.description = galleryImg.description ? galleryImg.description : '';
				
			    secondColHTML += '<li>';
			    secondColHTML += '<a class="thumb" name="galleryImg' + i + '" href="' + galleryImg.image + '" title="' + galleryImg.title + '">';
			    secondColHTML += '<img src="' + galleryImg.thumbnail + '" alt="' + galleryImg.title + '" height="100px" width="100px" />';
			    secondColHTML += '</a>';
			    secondColHTML += '<div class="caption">';
			    secondColHTML += '<div class="image-title">' + galleryImg.title + '</div>';
			    secondColHTML += '<div class="image-desc">' + galleryImg.description + '</div>';
			    secondColHTML += '</div>';
			    secondColHTML += '</li>';
			}
		    
	    	secondColHTML += '</ul>';
		    secondColHTML += '<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>';
	    	secondColHTML += '</div></div>';
			secondColHTML += '<div class="content">';
			secondColHTML += '<div class="slideshow-container">';
			secondColHTML += '<div id="controls" class="controls"></div>';
			secondColHTML += '<div id="loading" class="loader"></div>';
			secondColHTML += '<div id="slideshow" class="slideshow"></div>';
			secondColHTML += '</div>';
			secondColHTML += '<div id="caption" class="caption-container">';
			secondColHTML += '<div class="photo-index"></div>';
			secondColHTML += '</div>';
			secondColHTML += '</div>';
			secondColHTML += '<div style="clear: both;"></div>';
	    	secondColHTML += '</div></div>';
			secondColHTML += '</center>';
		} else if(layoutType == "friends") {
			this.firstColWidth = 0;
			firstColAutoscroll = false;
			secondColAutoscroll = true;
			
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			var padding = 20;
			var remainingWidth = viewWidth;
			var html = "";
			var maxImages = WCS.friends.length;
			
			html = '<span style="padding-left:' + padding + 'px;" ><center><img id="friend" src="images/friend_quote.png" height=150 width=600 /></center></span>';
			secondColHTML += '<div width="' + viewWidth + '" style="padding-bottom:20px">' + html + '</div>';
			
			html = '<span style="padding-left:' + padding + 'px;" ><img id="friend_logo" src="images/mock_logo.jpg" height="144" width="144" /></span>';
			if (maxImages == 0) {
				secondColHTML += '<div width="' + viewWidth + '" style="padding-bottom:20px">' + html + '</div>';
			}
			
			var logoWidth = 144 + padding;
			for (var i = 0; i < maxImages; i++) {
				var imageWidth = WCS.friends[i].width + padding;
				if (i == 0) imageWidth += logoWidth;
				if (remainingWidth < imageWidth) {
					secondColHTML += '<div width="' + viewWidth + '">' + html + '</div>';
					remainingWidth = viewWidth - imageWidth;
					html = '<span style="padding-left:' + padding + 'px;" ><img id="friend' + i + '" src="' + WCS.friends[i].image + '" height="' + WCS.friends[i].height + '" width="' + WCS.friends[i].width + '" /></span>';
					if (i == maxImages - 1) {
						secondColHTML += '<div width="' + viewWidth + '">' + html + '</div>';
					}
				} else if (i == maxImages - 1) {
					html += '<span style="padding-left:' + padding + 'px;" ><img id="friend' + i + '" src="' + WCS.friends[i].image + '" height="' + WCS.friends[i].height + '" width="' + WCS.friends[i].width + '" /></span>';
					secondColHTML += '<div width="' + viewWidth + '">' + html + '</div>';
				} else {
					remainingWidth -= imageWidth;
					html += '<span style="padding-left:' + padding + 'px;" ><img id="friend' + i + '" src="' + WCS.friends[i].image + '" height="' + WCS.friends[i].height + '" width="' + WCS.friends[i].width + '" /></span>';
				}
			}
		} else if(layoutType == "press") {
			this.firstColWidth = 0;
			firstColAutoscroll = false;
			secondColAutoscroll = true;
			
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			var padding = 20;
			var remainingWidth = viewWidth;
			var html = "";
			var maxImages = WCS.press.length;

			secondColHTML += '<div width="' + viewWidth + '" style="padding-bottom:20px">&nbsp;</div>';

			if (maxImages == 0) {
				secondColHTML += '<div width="' + viewWidth + '" style="padding-bottom:20px">&nbsp;</div>';
			}
			
			for (var i = 0; i < maxImages; i++) {
				var imageWidth = WCS.press[i].width + padding;
				if (remainingWidth < imageWidth) {
					secondColHTML += '<div width="' + viewWidth + '">' + html + '</div>';
					remainingWidth = viewWidth - imageWidth;
					html = '<span style="padding-left:' + padding + 'px;" ><embed id="press' + i + '" src="' + WCS.press[i].src + '" type="' + WCS.press[i].type + '" height="' + WCS.press[i].height + '" width="' + WCS.press[i].width + '" allowscriptaccess="always" allowfullscreen="true" ><br /><p class="pressDescription" style="width:' + WCS.press[i].width + 'px;"><i>' + WCS.press[i].description + '</i></p></embed></span>';
					if (i == maxImages - 1) {
						secondColHTML += '<div width="' + viewWidth + '">' + html + '</div>';
					}
				} else if (i == maxImages - 1) {
					html += '<span style="padding-left:' + padding + 'px;" ><embed id="press' + i + '" src="' + WCS.press[i].src + '" type="' + WCS.press[i].type + '" height="' + WCS.press[i].height + '" width="' + WCS.press[i].width + '" allowscriptaccess="always" allowfullscreen="true" ><br /><p class="pressDescription" style="width:' + WCS.press[i].width + 'px;"><i>' + WCS.press[i].description + '</i></p></embed></span>';
					secondColHTML += '<div width="' + viewWidth + '">' + html + '</div>';
				} else {
					remainingWidth -= imageWidth;
					html += '<span style="padding-left:' + padding + 'px;" ><embed id="press' + i + '" src="' + WCS.press[i].src + '" type="' + WCS.press[i].type + '" height="' + WCS.press[i].height + '" width="' + WCS.press[i].width + '" allowscriptaccess="always" allowfullscreen="true" ><br /><p class="pressDescription" style="width:' + WCS.press[i].width + 'px;"><i>' + WCS.press[i].description + '</i></p></embed></span>';
				}
			}
		} else if (layoutType == "calendar") {
			this.firstColWidth = 200;
			firstColAutoscroll = true;
			firstColHTML = '<div id="wcs-upcomingEventsCol"><div id="wcs-upcomingEvents"><center><h1 style="padding:7px 0px;font-size:22px;">Upcoming Events</h1></center></div><ul id="mycarousel" class="jcarousel-skin-ie7"></ul></div>';
			secondColAutoscroll = true;
			var viewWidth = Ext.lib.Dom.getViewWidth() - WCS.layout.menubarWidth;	
			
			// define div to which calendar will be rendered
			secondColHTML += '<iframe src="supercali/index.php" width="100%" height="100%" style="border:none;"></iframe>';
		} 

		this.firstCol = new Ext.Panel({
			id: "wcs-leftPanel",
			border: false,
			bodyBorder: false,
            height: this.firstColHeight ? this.firstColHeight : viewHeight,
            width: this.firstColWidth,
			autoScroll: firstColAutoscroll,
			html:  firstColHTML	
		});
		this.cells.push({
			layout: 'fit',
			items: this.firstCol
		});
		
		this.secondColWidth = Ext.lib.Dom.getViewWidth() - this.firstColWidth - WCS.layout.menubarWidth;
		this.secondCol = new Ext.Panel({
			id: "wcs-centerPanel",
			border: false,
			bodyBorder: false,
			height: this.secondColHeight ? this.secondColHeight : viewHeight,
			autoScroll: secondColAutoscroll,
			width: this.secondColWidth,
			html: secondColHTML
		});		
		this.cells.push({
			layout: 'fit',
			items: this.secondCol
		});
	},
	
    resizeWindow: function(newWidth, newHeight) 
    {
		var invalidWinSize = false;
		
		if(newWidth < 200) {
			newWidth = 200;
			invalidWinSize = true;
		}
		
		if(newHeight < 200) {
			newHeight = 200;
			invalidWinSize = true;
		}
		
		if (!invalidWinSize) {
			if (this.carousel == null) {
				this.layout(this.layoutType);
			} else {
//				window.location.reload();
			}
		}
    }
});