// create namespace
lookbook = {}
lookbook.currentlyShowing = new Array();
lookbook.productBoxes = new Array();

$(document).ready(function() {
	if ($.browser.msie) {
		// fuc.... IE does not know Array.indexOf, create it
		if(!Array.indexOf){
			Array.prototype.indexOf = function(obj){
				for(var i=0; i<this.length; i++){
					if(this[i]===obj){
						return i;
					}
				}
				return -1;
			}
		}
	}
	
	$('a[rel="closeProductWindow"]').click(function() {
		$('#productWindow').fadeOut('slow', function() {
			// resume playback
			if ($.browser.msie) {
				$f().play();
			} else {
				video.play();
			}
		});
		return false;
	});
	
	video = $('#activeVideo')[0];
	videoInt_currentTime = setInterval("video_currentTime()", 100);
	
	var cuepointsIE = new Array();
	$.each(lookbook.cuepointsIE, function(index, value) {
		cuepointsIE.push(value*1000);
	});
	
	$f("player", "/assets/libraries/flowplayer-3.2.2.swf", {
		// listen to following clip events 
		clip: {
			onPause: function() {
			},
			onResume: function() {
			},
			// trigger this function on the 3rd and 8th second of playback
			onCuepoint: [cuepointsIE, function(clip, point) {
				var productsToShow = new Array();
				var productsToStay = new Array();
				
				// find out which products to show at given timestamp
				$.each(lookbook.cuepoints, function() {
					if (point >= this[0]*1000 && point < this[1]*1000) {
						productsToShow.push(this[2]);
						productsToStay.push(this[2]);
					}
				});
				
				// check which products are currently showing and remove them from productsToShow variable
				$.each(lookbook.productBoxes, function() {
					var tmpIndex = $.inArray(this.productSku, productsToShow);
					if (tmpIndex != -1) {
						// item to show is already showing, delete it from productsToShow
						productsToShow.splice(tmpIndex, 1);
					}
				});
				// check what is in every box and hide it if not needed anymore
				$.each(lookbook.productBoxes, function() {
					if (this.active == true) {
						if (productsToStay.indexOf(this.productSku) < 0) {
							this.hide();
						}
					}
				});
				$.each(lookbook.productBoxes, function() {
					if (this.active == false) {
						// show here if there are products to show
						if (productsToShow.length > 0) {
							this.productSku = productsToShow[0];
							this.show();
							productsToShow.shift();
						}
					}
				});
			}]
		},
		// invoked when *player* loads (not a clip specific event)
		onLoad: function() {
		},
		onFinish: function() {
//			this.unload();
		}
	});
	
	/*
	Modal window disabled in favor of straight linking to the product 
	$('img[rel="product"]').live('click', function() {
		// open product window
//		$('#productWindow section article h2').html('wwww');
//		$('#productWindow').fadeIn('slow');
		var boxId = $(this).parent().parent().attr('id').substring(6, 7);
		lookbook.productBoxes[boxId-1].showModalWindow();
	});
	*/
	
	lookbook.productBoxes.push(new lookbook.productBox(1, 0));
	lookbook.productBoxes.push(new lookbook.productBox(2, 0));
	lookbook.productBoxes.push(new lookbook.productBox(3, 0));
	lookbook.productBoxes.push(new lookbook.productBox(4, 0));
});


lookbook.productBox = function(boxId, sku) {
	// private variables
	var productsData = new Array();
	var that = this;
	
	// public variables
	this.boxId = boxId;
	this.productSku = sku;
	this.productThumb = null;
	this.productCaption = null;
	this.active = false;
	this.brand = '';
	
	this.show = function () {
		this.getProductData();
		
		$('#pBox_0'+this.boxId+' .productThumb').html(this.productThumb);
		$('#pBox_0'+this.boxId+' .productCaption').html(this.productCaption);
		$('#pBox_0'+this.boxId+' .productThumb img').fadeIn('slow');
		$('#pBox_0'+this.boxId+' .productCaption').fadeIn('slow');
		if (this.productSku != 0) {
			lookbook.currentlyShowing.push(this.productSku);
			this.active = true;
		}
	};
	
	this.hide = function() {
		if (this.productSku != 0) {
			lookbook.currentlyShowing.splice(lookbook.currentlyShowing.indexOf(this.produckSku), 1);
		}
		this.active = false;
		this.productSku = 0;
		this.productThumb = null;
		this.productCaption = null;
		$('#pBox_0'+this.boxId+' .productThumb img').fadeOut('fast');
		$('#pBox_0'+this.boxId+' .productCaption').fadeOut('fast');
	};
	
	this.getProductData = function() {
		$.each(lookbook.products, function() {
			if (that.productSku == this.sku) {
				//?cm_mmc=Behind%20the%20Scenes-_-Monsoon-_-September-_-Product
				if (lookbook.brand == 'accessorize') {
					that.productThumb = '<a href="http://www.accessorize.com/invt/'+this.sku+'?cm_mmc=Behind%20the%20Scenes-_-'+lookbook.brand+'-_-September-_-'+this.sku+'" target="_blank"><img src="http://www.accessorize.com/content/ebiz/accessorizeeu/invt/'+this.sku+'/'+this.sku+'_T.jpg" rel="product" alt="Click to view" /></a>';
				} else {
					that.productThumb = '<a href="http://www.monsoon.co.uk/invt/'+this.sku+'?cm_mmc=Behind%20the%20Scenes-_-'+lookbook.brand+'-_-September-_-'+this.sku+'" target="_blank"><img src="http://www.monsoon.co.uk/content/ebiz/monsoon/invt/'+this.sku+'/'+this.sku+'_s1.jpg" rel="product" alt="Click to view" /></a>';
				}
				that.productCaption = this.name+' <span class="pink price11">&pound;'+this.price+'</span>';
			}
		});
	};
	
	this.showModalWindow = function() {
		if ($('#productWindow').css('display') == 'none') {
			var clickedSku = $(this)[0].productSku;
			$.each(lookbook.products, function() {
				if (this.sku == clickedSku) {
					var productDataFull = this;
					$('#productWindow article h2').html(productDataFull.name+'<br/>&pound;'+productDataFull.price);
					$('#productWindow p[rel="description"]').html(productDataFull.description2);
					$('#productImages').html('');
					var c = productDataFull.images.length;
					for (var i=0; i<c; i++) {
//						$('#productImages').append('<img src="http://www.monsoon.co.uk/content/ebiz/monsoon/invt/'+productDataFull.sku+'/'+productDataFull.images[i]+'" alt="" />');
//						$('#productImages img:first').addClass('active');
						$('#productImages').append('<div><img src="http://www.monsoon.co.uk/content/ebiz/monsoon/invt/'+productDataFull.sku+'/'+productDataFull.images[i]+'" alt="" /></div>');
						$('#productImages div:first').addClass('active');
					}
				}
			});
			$('#productWindow').fadeIn('slow', function() {
				// stop video playback
				if ($.browser.msie) {
					$f().pause();
				} else {
					video.pause();
				}
			});
		}
	};
}

function video_currentTime() {
	var productsToShow = new Array();
	var productsToStay = new Array();
	
	if (video.ended === false) {
		// find out which products to show at given timestamp
		$.each(lookbook.cuepoints, function() {
			if (video.currentTime > this[0] && video.currentTime < this[1]) {
				productsToShow.push(this[2]);
				productsToStay.push(this[2]);
			}
		});
		
		// check which products are currently showing and remove them from productsToShow variable
		$.each(lookbook.productBoxes, function() {
			var tmpIndex = $.inArray(this.productSku, productsToShow);
			if (tmpIndex != -1) {
				// item to show is already showing, delete it from productsToShow
				productsToShow.splice(tmpIndex, 1);
			}
		});
		
		// check what is in every box and hide it if not needed anymore
		$.each(lookbook.productBoxes, function() {
			if (this.active == true) {
				if (productsToStay.indexOf(this.productSku) < 0) {
					this.hide();
				}
			}
		});
		$.each(lookbook.productBoxes, function() {
			if (this.active == false) {
				// show here if there are products to show
				if (productsToShow.length > 0) {
					this.productSku = productsToShow[0];
					this.show();
					productsToShow.shift();
				}
			}
		});
	} else {
		// fire anything if needed at the end of the video playback
//		clearInterval(videoInt_currentTime);
	}
}

/*
function slideSwitch() {
	if ($('#productImages div').length > 1) {
		var $active = $('#productImages div.active');
		
		if ( $active.length == 0 ) $active = $('#productImages div:last');
		
		// use this to pull the divs in the order they appear in the markup
		var $next = $active.next().length ? $active.next() : $('#productImages div:first');
		
		$active.addClass('last-active');
		
		$('div.last-active').animate({opacity: 0.0}, 1000);
		$next.css({opacity: 0.0})
			.addClass('active')
			.animate({opacity: 1.0}, 1000, function() {
				$active.removeClass('active last-active');
			});
	}
}
$(function() {
	setInterval( "slideSwitch()", 5000 );
});
*/