var ConfiguratorPreview = {

	init: function() {
		this.styleId   = null;
		this.styleName = null;
		this.panelId   = null;
		this.frameId   = null;

		this.interval  = null;
		this.currentStyleImage   = 1;
		this.currentPreviewName  = null;

		this.panels = null;
		this.styleDescriptions   = null;
		this.framingDescriptions = null;
		this.styleTypeDetails = null;

		var self = this;
		
		$(document).ready(function(){
/*			
			Balloon.register('#style-preview .view-details', {
				clickmode:true,
				contentCallback: function() {
					return self.styleDescriptions[self.styleId];
				}
			});

			Balloon.register('#design-quantity-selector .view-details', {
				clickmode:true,
				offsetY:-100,
				offsetX:-100,
				contentCallback: function() {
					return self.styleTypeDetails[self.styleId];
				}
			});
*/

			$('#style-preview .view-details').click(self.setStyleModal);
			
			$('#framing-preview .view-details').click(self.setFramingModal);
			
			$('#design-quantity-selector .view-details').click(self.setDesignQuantityModal);         

/*
			Balloon.register('#framing-preview .view-details', {
				clickmode:true,
				contentCallback: function() {
					return self.framingDescriptions[self.frameId];
				}
			});
*/
		})
	},

	showPreview: function(name) {
		if (this.currentPreviewName == name) {
			return;
		}

		if (null != this.currentPreviewName) {
			$('#' + this.currentPreviewName + '-preview').hide();
		}

		$('#' + name + '-preview').show();
		
		this.currentPreviewName = name;
	},

	setPanel: function(id) {
		this.panelId = id;

		if (null == this.styleId) {
			return;
		}
		
		var imageUrl = g_basePath + 'files/panels/' + this.styleId + '/' + id + '.jpg';

		$('#panel-preview .inner').fadeOut(300, function() {
			$(this).css('background-image', 'url(' + imageUrl + ')').fadeIn(200);
		});

		this.showPreview('panel');
	},

	setStyleModal: function() {
		var text = Configurator.styleObject.description;
		var title = Configurator.styleObject.name;
		new Boxy('<p>' + text + '</p>', {
		modal: true,
		center: true,
		title: title
		});
	},

	setFramingModal: function() {
		this.frameId = Configurator.framingId;
		// using ConfiguratorPreview as object since it is not liking 'this'
		var text = ConfiguratorPreview.framingDescriptions[this.frameId];
		var title = 'Framing';
		new Boxy('<p>' + text + '</p>', {
		modal: true,
		center: true,
		title: title
		});
	},
	
	setDesignQuantityModal: function() {
		// using ConfiguratorPreview as object since it is not liking 'this'
		var text = ConfiguratorPreview.styleTypeDetails[ConfiguratorPreview.styleId];
		var title = 'Design Quantity';
		new Boxy('<p>' + text + '</p>', {
		modal: true,
		center: true,
		title: title
		});
	},

	setFraming: function(id) {
		this.frameId = id;
		var styleId = (this.styleId != null) ? this.styleId : 1;
		$('#framing-preview .frame').css('background-image', 'url(' + g_basePath + 'files/frames/'  + id + '.jpg)');
		$('#framing-preview .frame .style').css('background-image', 'url(' + g_basePath + 'files/styles/'  + styleId + '/1.jpg)');
		this.showPreview('framing');
	},

	setPrinting: function (id) {
		var printing = this.printingSizes[id];
		var w = Math.round(printing.w * 3.45);
		var h = Math.round(printing.h * 3.45);
		$('#printing-preview .overlay').animate({width:w, height:h}, 500);

		if (this.panels[this.panelId]) {
			var panel = this.panels[this.panelId];
			if (panel.panel_category_id == 2) {
				$('#printing-preview').css('background-position', '-342px top');
			} else {
				$('#printing-preview').css('background-position', 'left top');
			}
		}

		this.showPreview('printing');
	},

	setStyle: function(id, name) {
		this.styleId = id;
		this.styleName = name;

		this.stopInterval();

		// preload images
		for (i = 1; i<4; i++) {
			var preloader = new Image;
			preloader.src = this.getStyleImageUrl(i);
		}
 
	//	Balloon.set(this.styleDescriptions[id]);
		
		this.updateView(true);
		this.startInterval();
		
		this.showPreview('style');
	},

	getStyleImageUrl: function(index) {
		return g_basePath + 'files/styles/' + this.styleId + '/' + index +'.jpg';
	},

	updateView: function(updateStyleName) {
		if (updateStyleName) {
			//$('#style-preview span').text(this.styleName);
		}

		var scope = this;
		var imageUrl = this.getStyleImageUrl(this.currentStyleImage);

		$('#style-preview .overlay ul li').removeClass('current');
		$('#style-preview .overlay ul li:eq(' + (this.currentStyleImage - 1) + ')').addClass('current');

		$('#style-preview .inner').fadeOut(200, function() {
			$(this).css('background-image', 'url(' + imageUrl + ')').fadeIn(200);
		});
	},

    clickableStyle: function() {
        $('#style-preview ul li span').click(function() {
            //vat imageUrl = this.getStyleImageUrl(this.currentStyleImage);
            var styleId = ConfiguratorPreview.styleId;
            //var liIndex = $('li').index(this);
            var liIndex = $('span').index($(this),$(this).parent()) - 3; // 3 less
            var imageUrl = g_basePath + 'files/styles/' + styleId + '/' + liIndex +'.jpg';

            //console.log(imageUrl);

            $('#style-preview .overlay ul li').removeClass('current');
            $('#style-preview .overlay ul li:eq(' + (liIndex - 1) + ')').addClass('current');

            $('#style-preview .inner').fadeOut(200, function() {
                $(this).css('background-image', 'url(' + imageUrl + ')').fadeIn(200);
            });

            ConfiguratorPreview.currentStyleImage = liIndex;
            ConfiguratorPreview.stopInterval();
        });
    },

	startInterval: function() {
		var scope = this;

		this.interval = setInterval(function(){
			scope.currentStyleImage = scope.currentStyleImage < 3
				? scope.currentStyleImage + 1
				: 1;

			scope.updateView(false);
		}, 2400);
	},

	stopInterval: function() {
		if (null !== this.interval) {
			clearInterval(this.interval);
		}

		this.currentStyleImage = 1;
	},

	// -----------------------
	//   SETTERS
	// -----------------------
	setPrintingSizes: function(sizes) {
		this.printingSizes = sizes;
	},

	setStyleDescriptions: function(descs) {
		this.styleDescriptions = descs;
	},

	setStyleTypeDetails: function(details) {
		this.styleTypeDetails = details;
	},

	setFramingDescriptions: function(descs) {
		this.framingDescriptions = descs;
	},

	setPanels: function(panels) {
		this.panels = panels;
	}
};

ConfiguratorPreview.init();

$(document).ready(function() {
    ConfiguratorPreview.clickableStyle();
});