(function() {
    var window = this, undefined, widget = window.jsx.widget;
    var config = {
    	collapsedWidth:214,
    	expandedWidth:430
    };

    var TemplateC = jsx.widget.TemplateC = function(element) {
		var self = this, i = 0, globvars = {};
		this.element = element;
		this.textPanels = $(element).find(".text-panel");
		this.imagePanels = $(element).find(".image-panel");
		this.mouseMasks = $(element).find(".mouse-mask");
		this.currentImage = {element:null, index:0};
		this.currentText = {element:null, index:0};
		
		this.mouseMasks.hover(
			function() {
				$(this).addClass('over');
			}, 
			function() {
				$(this).removeClass('over');
			}
		);
		
		this.mouseMasks.each(function(i) {
		
			function collapseHide(options) {
				var called = false;
				
				if (self.currentImage.element) {
					called = true;
					if (self.currentImage.direction && self.currentImage.direction == 'left') {
						options.direction = 'left';
					}
					self.collapseImage(self.currentImage.element, options);
				} 
				if (self.currentText.element) {
					if (!called) {
						self.hideText(self.currentText.element, options);
					} else {
						self.hideText(self.currentText.element);
					}
					called = true;
				}			
				if (!called && options.complete && typeof options.complete == "function") {
					options.complete.call();
				}
			}
			
			globvars.imageCollapsed = false;
			globvars.textHidden = false;
			
			switch (i) {
				case 0:

					$(this).click(function(e) {
						self.mouseMasks.removeClass('active');
						$(this).addClass('active');
						collapseHide({complete:function() {
							if (self.currentImage.element) {
								if (self.currentImage.element.width() == config.collapsedWidth) {
									globvars.imageCollapsed = true;
								}
							} else {
								globvars.imageCollapsed = true;
							}
							
							if (self.currentText.element) {
								if (0 == self.currentText.element.position().top) {
									globvars.textHidden = true;
								}
							} else {
								globvars.textHidden = true;
							}
							
							if (globvars.imageCollapsed && globvars.textHidden) {
								if (self.currentImage.element) self.currentImage.element.removeClass('front');
								if (self.currentText.element) self.currentText.element.removeClass('front');
								//self.expandImage(1, {direction:"left"});
								//self.showText(0);		
							}
						}});
					});	
					break;
				
				case 1:
					$(this).click(function(e) {
						self.mouseMasks.removeClass('active');
						$(this).addClass('active');
						collapseHide({complete:function() {
							if (self.currentImage.element) {
								if (self.currentImage.element.width() == config.collapsedWidth) {
									globvars.imageCollapsed = true;
								}
							} else {
								globvars.imageCollapsed = true;
							}
							
							if (self.currentText.element) {
								if (0 == self.currentText.element.position().top) {
									globvars.textHidden = true;
								}
							} else {
								globvars.textHidden = true;
							}
							
							if (globvars.imageCollapsed && globvars.textHidden) {
								if (self.currentImage.element) self.currentImage.element.removeClass('front');
								if (self.currentText.element) self.currentText.element.removeClass('front');
								self.expandImage(0);
								self.showText(1);		
							}
						}});
					});	
					break;
					
				case 2:
					$(this).click(function(e) {
						self.mouseMasks.removeClass('active');
						$(this).addClass('active');
						collapseHide({complete:function() {
							if (self.currentImage.element) {
								if (self.currentImage.element.width() == config.collapsedWidth) {
									globvars.imageCollapsed = true;
								}
							} else {
								globvars.imageCollapsed = true;
							}
							
							if (self.currentText.element) {
								if (0 == self.currentText.element.position().top) {
									globvars.textHidden = true;
								}
							} else {
								globvars.textHidden = true;
							}
							
							if (globvars.imageCollapsed && globvars.textHidden) {
								if (self.currentImage.element) self.currentImage.element.removeClass('front');
								if (self.currentText.element) self.currentText.element.removeClass('front');
								self.expandImage(2);
								self.showText(2);		
							}
						}});
					});	
					break;
					
				case 3:
					$(this).click(function(e) {
						self.mouseMasks.removeClass('active');
						$(this).addClass('active');
						collapseHide({complete:function() {
							if (self.currentImage.element) {
								if (self.currentImage.element.width() == config.collapsedWidth) {
									globvars.imageCollapsed = true;
								}
							} else {
								globvars.imageCollapsed = true;
							}
							
							if (self.currentText.element) {
								if (0 == self.currentText.element.position().top) {
									globvars.textHidden = true;
								}
							} else {
								globvars.textHidden = true;
							}
							
							if (globvars.imageCollapsed && globvars.textHidden) {
								if (self.currentImage.element) self.currentImage.element.removeClass('front');
								if (self.currentText.element) self.currentText.element.removeClass('front');
								self.showText(3);		
							}
						}});
					});	
					break;
			}
			
		});
	};
	jsx.widget.TemplateC.prototype.expandImage = function(index, params) {
		var self = this;
		var image = this.imagePanels.eq(index);
		
		image.addClass("front");	
		self.currentImage = {element:image, index:index};

		if (params && params.direction == 'left') {
			self.currentImage.direction = params.direction;	
			image.addClass('front');
			image.animate({
				left:0,
				width:config.expandedWidth
			});
		} else {			
			image.animate({
				width:config.expandedWidth
			});
		}		
	};
	jsx.widget.TemplateC.prototype.collapseImage = function(image, params) {
		var self = this;
				
		if (typeof image == "number") {
			image = this.imagePanels.eq(image);
		} 
		
		if (params && params.direction == 'left') {	
			image.animate({
				left:(config.expandedWidth - config.collapsedWidth),
				width:config.collapsedWidth
			}, params);
		} else {			
			image.animate({
				width:config.collapsedWidth
			}, params);
		}		

	};
	jsx.widget.TemplateC.prototype.showText = function(text, params) {
		var self = this;
				
		if (typeof text == "number") {
			text = this.textPanels.eq(text);
		}
		
		text.addClass('front');
		self.currentText = {element:text, index:text};
		
		text.animate({
			top:0
		}, params);
	};
	jsx.widget.TemplateC.prototype.hideText = function(text, params) {
		var self = this, newTop = 0;
				
		if (typeof text == "number") {
			text = this.textPanels.eq(text);
		}
		
		newTop = -text.outerHeight();	
		text.addClass('front');
		text.animate({
			top:newTop
		}, params);
	};
})();