/* Author:
 * 
 */ 



var GP = function ($){
	
	/*
	 * Business layer
	 */
	var BLOs = {};
	BLOs.productsTree = {};
	BLOs.allProducts = {};
	// BLOs.productsLoaded = false; //always true, preloaded server side
	BLOs.productsLoaded = true;
	BLOs.looks = {};
	// BLOs.looksLoaded = false;
	BLOs.looksLoaded = true;
	BLOs.images = {};
	BLOs.state={};
	BLOs.state.zoomPath = '';
	/*
	 * Initialization values. interface standard dimensions and the like
	 */
	var INIT = {};
	INIT.webroot = 'http://www.pollmangreta.com/';
	INIT.sendMailInterface = 'sendMail.php';
	
	INIT.lookSidePaneWidth = 300;
	INIT.lookMargin = 5;
	INIT.lookaInitH = 70;
	INIT.lookaHoverH = 100;
	INIT.defaultTextColor = '#222222';
	
	INIT.prodCategsThumbWidth = 200;
	INIT.prodCategsThumbHeight = 200;
	INIT.prodCategsThumbMargin = 10;
	
	INIT.aboutGretaHtml = 'Style is a funny thing. Who decides whether you\'ve got it or not?';
	INIT.aboutGretaHtml +='</br>';
	INIT.aboutGretaHtml +='</br>';
	INIT.aboutGretaHtml +='I absolutely love watching people on the street and thinking that what they are wearing forms a composition that\'s wrong on so many levels but so a fascinating and outright cool at the same time. After all, inspiration is everywhere, in art, architecture, music, film, senses and memories, they all have a story within. Ultimately, the clothes that a woman wears are there to add joy to her life and make her feel confident.';
	INIT.aboutGretaHtml +='</br>';
	INIT.aboutGretaHtml +='</br>';
	INIT.aboutGretaHtml +='Whenever I start work on a new collection I draw, in fact, men\'s clothing. At this stage I don\'t think about things like curves, waist and hips, comfort comes first. The feminine side then takes over and I get crazy with the design, patterns and layers, going over the detailing stages time and again, until the results are garments that are both comfortable and sensual. ';

	INIT.contactGretaHtml = '<img src="img/pollmangreta-URL.png" width="96" height="96"></br></br>';
	INIT.contactGretaHtml += 'info |a_t| pollmangreta.com</br></br>Sales: +40-723-158115</br></br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+40-730-062328</br></br>';
	
	INIT.loadingImg = $('<img>',{'src':'img/loading.gif'});
	//what if we got a deep link from the interwebs
	INIT.URLObj = {};
	
	
	/*
		HISTORY BITS and state change
	*/
	
	var History = window.History,
		State = History.getState();
		History.pushState({'dummy':'state'},'Greta Pollman','');
	console.log(State);
	
	// Bind to State Change
	History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
		// Log the State
		State = History.getState(); // Note: We are using History.getState() instead of event.state
		console.log('statechange:', State.data, State.title, State.url);
		displayContent();
	});
	
	
	
	function displayContent()
	{
		console.log('displaying contrent for: ', State.data);
		var page = State.data.page;
		
		switch(page)
		{
			case 'home':
				$('#prodDetailOverlay, #looksZoom').remove();//hide any overlay, product Detail or look zoom
				cleanUpStartUpAnimation();
				destroyTopMenu(); hideTopLogo();
				fullInterfaceRESET();
				showHomePage();
				break;
			case 'collectionsMenu':
				$('#prodDetailOverlay, #looksZoom').remove();//hide any overlay, product Detail or look zoom
				$('#homePage, [id^="looksCol"]').fadeOut(); 
				removeProductsSection(); 
				destroyTopMenu();
				showCollectionsMenu();
				break;
			case 'about':
				$('#prodDetailOverlay, #looksZoom').remove();//hide any overlay, product Detail or look zoom
				$('#homePage').fadeOut();
				showContactMenu();
				break;
			case 'lookbook':
				$('#prodDetailOverlay, #looksZoom').remove();//hide any overlay, product Detail or look zoom 
				removeProductsSection(); 
				hideCollectionsMenu();
				var looksCol;// make local
				if(State.data.looksCol) // request made from within the application . it's not a user landing here via external link
				{
					looksCol = State.data.looksCol;
				}
				
				showLooksForCollection(looksCol);
				showTopLogo();
				break;
			
			case 'products':
				$('#prodDetailOverlay, #looksZoom').remove();//hide any overlay, product Detail or look zoom 
				$('#homePage, [id^="looksCol"]').fadeOut(); 
				showTopLogo();
				var looksCol;
				if(State.data.looksCol) // request made from within the application . it's not a user landing here via external link
				{
					looksCol = State.data.looksCol;
				}
				//reewrite top menu
				writeTopMenuProductsCollection(looksCol);
				$('[id^="looksCol"]').fadeOut(); 
				//display products categories
				if(!State.data.cat)
				{
					writeProductsCategories(looksCol);
					$('#productsDiv').fadeOut('fast',function(){$(this).remove();});
				}
				else
				{
					//a category was chosen
					var categ = State.data.cat;
					//update top menu
					if(!$('#topMenuLooks #categNume').length)
					{
						$('#topMenuLooks').append($('<li>',{'id':'categNume','class':'selected', 'text':categ}));
					}
					else
					{
						$('#topMenuLooks #categNume').text(categ);
					}
					$('#topMenuLooks #liProducts').removeClass('selected');
					var colTitle = BLOs.productsTree['colectie'+looksCol.replace('looksCol','')].colTitlu;
					
					$('#topMenuLooks #liProducts').html('<a href="?p=products&collection='+colTitle.split(' ').join('_')+'">PRODUCTS</a>');
					$('#topMenuLooks #liProducts a').hover(function() {
						$(this).stop().animate({'color':'green'});
					}, function() {
						$(this).stop().animate({'color':'#333333'});
					});
					$('#topMenuLooks #liProducts a').click(function(e) {
						e.preventDefault();
						$('#topmenu').html('');
						
						var colNr = looksCol.replace('looksCol','');
						var colTitle = BLOs.productsTree['colectie'+colNr].colTitlu;
						History.pushState({page:'products','looksCol':looksCol},'Products - '+colTitle+' | Greta Pollman', '?p=products&collection='+colTitle.split(' ').join('_'));

						$('#productsDiv').fadeOut('fast',function(){
							$(this).remove();
						});
						
						hideLeftRightScrollers();
					});
				
					$('[id^="prodsCol"]').remove();
					writeProducts(looksCol.replace('looksCol',''), categ);
	
				}
				break;
			
			case 'pDet':
				var prodCod = State.data.c,
					product;
				for (var i=0; i<BLOs.allProducts.length; i++)
				{
					(BLOs.allProducts[i].cod == prodCod) ? product = BLOs.allProducts[i]: 0;
				}
				console.log('ptoduct is:: ', product);
				showProductDetail(0,product);
				break;	
				
			default:
				$('#homePage').remove();
				startupAnimation(); console.log('calling stratup animation');
				break;
		}
		
	};
	

	BLOs.getProducts = function ()
	{
		var requestObj = {
			'tableName':'productData_vw',
			'orderArr':['colectieId','ASC']};
		
		//write the tree : colectie -> Categ -> Cod: titlu
		function buildProductsTree (JSONobj)
		{
			var colectieId, catId, branch;
			var treeObj = {};
			var colectiiIds = [];
			var catIds = [];
			
			//console.log (JSONobj);
			BLOs.allProducts = JSONobj;
			
			for (var i = 0; i<JSONobj.length; i++)
			{
				colectieId = JSONobj[i].colectieId; 
				($.inArray(colectieId, colectiiIds)==-1) ? colectiiIds.push(colectieId) :0 ;
				
				catId = JSONobj[i].catId; 
				($.inArray(catId, catIds)==-1) ? catIds.push(catId) : 0 ;
				
				branch = treeObj['colectie'+colectieId] = {
					'colectieId':colectieId,
					'colTitlu':JSONobj[i].colTitlu,
					'colSezon':JSONobj[i].colSezon,
					'colAn':JSONobj[i].colAn,
					'categorii':{}
					};
				
			}
			//console.log (treeObj);
			//console.log (colectiiIds);
			//console.log (catIds);
			
			for (var i in colectiiIds)
			{
				//console.log('colectie'+colectiiIds[i]);
				for (var j in JSONobj)
				{
					if(JSONobj[j].colectieId === colectiiIds[i])
					{
						colectieId = JSONobj[j].colectieId;
						// split by categories
						//console.log (JSONobj[j].catNume);
						treeObj['colectie'+colectieId].categorii[JSONobj[j].catNume] = {
							'catId':JSONobj[j].catId,
							'catNume':JSONobj[j].catNume,
							'colSezon' : JSONobj[j].colSezon,
							'colAn' : JSONobj[j].colAn,
							'colDescription':'',
							'produse':{}
						};
					}
				}
			}
			//console.log (treeObj);
			
			//console.log ('===================');
			//console.log ('Dsitributing products');
			
			for (var i in JSONobj)
			{
				//run through them all, decide which collection & category and place accordingly
				var tmpCol = JSONobj[i].colectieId;
				var tmpCateg = JSONobj[i].catNume;
				var tmpCod = JSONobj[i].cod;
				treeObj['colectie'+JSONobj[i].colectieId].categorii[JSONobj[i].catNume].produse[JSONobj[i].cod] = JSONobj[i];
				
				
			}
			BLOs.productsTree = treeObj;
			//console.log (BLOs);
			
			//load collections descriptions
			var colectiiObj = JSON.parse($('#colectiiData').attr('data-value'));
			//console.log(colectiiObj);
			// MADAU.DAL.SQLite.read({'tableName':'colectii'},function(colectiiObj){
			
				var colId,
					desc;
				//reply is nice array
				for(var i=0; i<colectiiObj.length; i++)
				{
					colId = colectiiObj[i].colId;
					desc = colectiiObj[i].colDescription;
					BLOs.productsTree['colectie'+colId].colDescription = desc;
				}
				BLOs.productsLoaded = true;
				
			
			
		}
		
		
		
		// MADAU.DAL.SQLite.read(requestObj, function callbackFunc(output){
											// buildProductsTree(output);
		// });
		var productData = JSON.parse($('#productData').attr('data-value'));
		buildProductsTree(productData);
	}
	
	BLOs.getLooks = function ()
	{
		
		function processLooks(looksObj)
		{
			var look,
				lookId,
				collectionId,
				looksCollectionsArr = [],
				i;
			
			//console.log('looks reply');
			//console.log(looksObj);
			
			for (look in looksObj)
			{
				($.inArray(looksObj[look].look_CollectionId, looksCollectionsArr) == -1) ? looksCollectionsArr.push(looksObj[look].look_CollectionId) : 0 ;
			}
			//console.log ('looksCollectionsArr '+ looksCollectionsArr);
			//create looks holding BLOs for each collection
			for (lookId in looksCollectionsArr)
			{
				collectionId = looksCollectionsArr[lookId];
				BLOs.looks['looksCol'+collectionId] = [];
				//iterate through all looks = looksObj lookig for collectionId
				for (i in looksObj)
				{
					if(looksObj[i].look_CollectionId == collectionId)
					{
						BLOs.looks['looksCol'+collectionId].push(looksObj[i]);
					}
				}
				//console.log('new blo');
				//console.log(BLOs);
			}
			//BLOs created
			//proceed to outputing the html
			BLOs.looksLoaded = true;
			console.log(BLOs);
		}
		
		// MADAU.DAL.SQLite.read({'tableName' : 'looks'}, function (reply){
				// processLooks(reply);				
			// });
		var looksData = JSON.parse($('#looksData').attr('data-value'));
		processLooks(looksData);
	}
	
	
	
	
	BLOs.checkDataLoaded = function()
	{
		var checkSI;
		
		function check()
		{
			if(BLOs.productsLoaded && BLOs.looksLoaded)
			{
				//showHomePage();
				clearInterval(checkSI);
				// console.log('Data loaded');
				// console.log(BLOs);
			}
			else
			{
				console.log ('loading data ... looks and products ....');
			}
		}
		
		checkSI = setInterval(check,30);
		
	} 
	
	
	
	
	
	function writeSkeleton()
	{
		var wrapper = $('<div>', {id:'wrapper'}),
			topmenu = $('<div>', {id:'topmenu'}),
			content = $('<div>', {id:'content'}),
			footer = $('<div>', {id:'footer'});
		
		
		
		// wrapper.append(topmenu,content,footer);
		wrapper.append(footer,content,topmenu);
		$('#container').append(wrapper);
		
		//footer BECAME top menu and vice versa
		//$('#footer').append($('<img>',{'src':'img/logo_greta_pollman-transp.png'}));
		showTopLogo();
	}
	
	function showTopLogo()
	{
		if(!$('#topLogo').length)
		{
			writeTopLogo();
		}
		else
		{
			$('#topLogo').show();
		}
	
		
		function writeTopLogo()
		{
			//footer BECAME top menu and vice versa
			$('#footer').append($('<a>',
								{'href':'?p=home',
								'html':'<img src="img/logo_greta_pollman-transp.png">',
								'id':'topLogo'}
								));
			$('#topLogo').click(function(e) {
				e.preventDefault();
				
				History.pushState({page:'home'}, "Home page | Greta Pollman", "?p=home");
				
			});
		}
	
	}
	function hideTopLogo()
	{
		$('#topLogo').hide();
	}
	
	//IStarttup Animation
	function startupAnimation()
	{
		
		var bgrPanoramaLoaded = false,
			bgrPanSpeed  = 6,
			moveBgrRightSI,
			moveBgrLeftSI;
		
		
		function whiteBarAnim()
		{
			var whiteBar = $('<div>', {id :'whiteBar'}),
				loadImg = $('<img>', {src:'img/load-indic-white-on-litegrey.gif'});
			var centerStage = $(window).height()/2;	
			
			$('#container').append(whiteBar);
			$('#whiteBar').css({'top':centerStage});
			//$('#whiteBar').append(loadImg);
			
			function drawWhiteBar()
			{
				var w = $('#whiteBar').width();
				w += ($(window).width() - w +60)*.02;
				$('#whiteBar').width(w);
				$('#whiteBar img').css({'left':w-40});
				
				if($('#whiteBar').width() > $(window).width() && bgrPanoramaLoaded)
				{
					clearInterval(whiteBarSI);
					console.log('cleared interval white bar');
					
					//proceed to setting up and opening grey barndoors
					setupGreyBarnDoors();
					//proceed to setting up the panorama
					setupBgrPanorama();
				}
			}
			var whiteBarSI = setInterval(drawWhiteBar,30);
		}
		setTimeout(whiteBarAnim,1500);
		
		function loadBgrPanorama()
		{
			var bgrPanorama = new Image();
			bgrPanorama.src = 'img/bgr-panorama.jpg';
			bgrPanorama.onload = function(){
				console.log ('bgr panorama finished loading');
				bgrPanoramaLoaded = true;
			}
			
		}
		loadBgrPanorama();
		
		function setupGreyBarnDoors ()
		{
			var topDoor = $('<div>', {id:'topDoor', 'class':'barnDoor'}),
				bottomDoor = $('<div>', {id:'bottomDoor', 'class':'barnDoor'});
				
			$('#container').append(topDoor,bottomDoor);	
			bottomDoor.append($('<a>',{'href':'#homePage','text':'Skip intro'}));
			$('#bottomDoor a').click(function(e) {
				e.preventDefault();
				closeBarnDoors();
			});
						
			$('#topDoor').css({'top':'0px', 'left':'0px'});
			$('#bottomDoor').css({'top':$(window).height()/2, 'left':'0px'});
			
			MADAU.UI.winSize.setResizable('#topDoor',{'height':50, 'relativeTo':'window'});
			MADAU.UI.winSize.setResizable('#bottomDoor',{'height':50, 'relativeTo':'window'});
			MADAU.UI.winSize.trigger();

		}
		
		function setupBgrPanorama()
		{
			var bgrPanoramaHolder = $('<div>', {id:'bgrPanoramaHolder'});
			
			$('#container').append(bgrPanoramaHolder);
			MADAU.UI.winSize.setResizable('#bgrPanoramaHolder',{'height':100, 'relativeTo':'window'});
			MADAU.UI.winSize.trigger();
			
			bgrPanoramaHolder.append($('<img>', {'src':'img/bgr-panorama.jpg'}));
			panBgrPanoramaRight();
			openBarnDoors();
		}
		
		function openBarnDoors ()
		{
			var limit = 10,// amount of the barndoor still showing at the top and bottom
				targetY = 10 ; 
			
			function moveDoors()
			{
				var currentYtop = parseInt($('#topDoor').css('top').replace('px','')),
					currentYbottom = parseInt($('#bottomDoor').css('top').replace('px','')),
					targetYtop, targetYbottom,
					moveToYtop, moveToYbottom;
				targetYtop = limit - $('#topDoor').height();
				targetYbottom = $(window).height()-limit;
				
				currentYtop += (targetYtop - currentYtop) * .1;
				currentYbottom += (targetYbottom - currentYbottom) * .1;
				
				$('#topDoor').css({'top':currentYtop+'px'});
				$('#bottomDoor').css({'top':currentYbottom+'px'});
				
				if($(window).height() - currentYbottom < 20)
				{
					clearInterval(moveDoorsSI);
				}
			}
			var moveDoorsSI = setInterval(moveDoors, 30);
			
		}
		
		function panBgrPanoramaRight()
		{
			function moveBgrLeft()
			{
				var bgrXPos = $('#bgrPanoramaHolder img').position().left,
					minXPos = $(window).width() - $('#bgrPanoramaHolder img').width();
				bgrXPos -= bgrPanSpeed;
				//console.log(bgrXPos);
				$('#bgrPanoramaHolder img').css({'left':bgrXPos+'px'});
				if(Math.abs(minXPos - bgrXPos) < 10)
				{
					console.log('stop movin left');
					clearInterval(moveBgrLeftSI);
					panBgrPanoramaCenter();
				}
			}
			moveBgrLeftSI = setInterval(moveBgrLeft, 30);
		}
		
		function panBgrPanoramaCenter()
		{
			function moveBgrRight()
			{
				var bgrXPos = $('#bgrPanoramaHolder img').position().left,
					maxXPos = -$('#bgrPanoramaHolder img').width()/2 + $(window).width()/2;
				bgrXPos += bgrPanSpeed;
				$('#bgrPanoramaHolder img').css({'left':bgrXPos+'px'});
				//console.log (bgrXPos+' max: '+maxXPos);
				if(maxXPos < bgrXPos )
				{
					console.log('stop movin right');
					clearInterval(moveBgrRightSI);
					//blur
						// $('#bgrPanoramaHolder img').pixastic("blurfast", {amount:0.4});
						// $('#bgrPanoramaHolder img').css({'left': bgrXPos+'px'});
					setTimeout(closeBarnDoors,1000);
				}
			}
			moveBgrRightSI = setInterval(moveBgrRight,30);
		}
		
		function closeBarnDoors()
		{
			function moveDoors()
			{
				var currentYtop = parseInt($('#topDoor').css('top').replace('px','')),
					currentYbottom = parseInt($('#bottomDoor').css('top').replace('px','')),
					targetYtop, targetYbottom;
				targetYtop = 0;
				targetYbottom = $(window).height()/2;
				
				currentYtop += (targetYtop - currentYtop) * .1;
				currentYbottom += (targetYbottom - currentYbottom) * .1;
				
				$('#topDoor').css({'top':currentYtop+'px'});
				$('#bottomDoor').css({'top':currentYbottom+'px'});
				
				if(currentYbottom - $(window).height()/2 < 1)
				{
					console.log('barn doors have closed');
					clearInterval(moveBgrRightSI);
					clearInterval(moveBgrLeftSI);
					clearInterval(moveDoorsSI);
					cleanUpStartUpAnimation();
				}
			}
			$('#bottomDoor a').remove(); //hide skip intro but
			var moveDoorsSI = setInterval(moveDoors, 30);
		}
		
		
	} //end startupAnimation
	
	function cleanUpStartUpAnimation()
	{
		console.log('cleaning up');
		$('#topDoor, #bottomDoor, #bgrPanoramaHolder, #whiteBar').remove();
		//showHomePage();
		History.pushState({page:'home'}, "Home page | Greta Pollman", "?p=home");
	}
	
	function fullInterfaceRESET()
	{
		$('#container').html('');
		writeSkeleton();
	}
	
	function showHomePage()
	{
		//FULL INTERFACE RESET
		fullInterfaceRESET();
		
		function writeHomePage ()
		{
			var homePage = $('<div>',{id:'homePage'}),
				logoHolder = $('<div>', {id: 'logoHome'}),
				contact = $('<div>', {id: 'contactHome'}),
				collections = $('<div>', {id: 'collectionsHome'});
			
			logoHolder.append($('<img>',{src:'img/logo_greta_pollman-transp.png'}));
			collections.append($('<a>',{'class':'homePageBut', text:'COLLECTIONS', href:'?p=collections'}));
			contact.append($('<a>',{'class':'homePageBut', text:'ABOUT', href:'?p=about'}));
			homePage.append(logoHolder, collections, contact);
			
			$('#content').append(homePage);
			
			$('.homePageBut').hover(function(){
				$(this).stop().animate({'color':'green'});
			},function(){
				$(this).stop().animate({'color':'#333333'});
			});
			
			$('#collectionsHome a').click(function(e){
				e.preventDefault();
				homePage.fadeOut('fast', function(){
					//showCollectionsMenu();
					History.pushState({page:'collectionsMenu'}, "Collections | Greta Pollman", "?p=collections");
					});
			});
			$('#contactHome a').click(function(e){
				e.preventDefault();
				homePage.fadeOut('fast', function(){
					//showContactMenu();
					History.pushState({page:'about'}, "About | Greta Pollman", "?p=about");
				});
			});
			
			//RESIZEABILITY
			//console.log ('parent of homepage height');
			//console.log ($('#homePage').parent());
			//console.log ($('#homePage').parent().css('height'));
			MADAU.UI.winSize.setResizable('#homePage', {'heightInPx':-100, 'relativeTo':'window'});
			MADAU.UI.winSize.trigger();
			//POSITIONING
			// MADAU.UI.position.setPositionable('#logoHome',{'topPercent':40});
			var logoX = homePage.width()/2-145;
			// console.log('logoX si '+logoX);
			$('#logoHome').css({'left':+logoX+'px','top':'47%'});
			// MADAU.UI.position.setPositionable('#collectionsHome',{'topPercent':80, 'leftMargin':true});
			// MADAU.UI.position.setPositionable('#contactHome',{'topPercent':80});
			$('#collectionsHome').css({'left':0,'top':'80%'});
			$('#contactHome').css({'right':0,'top':'80%'});
			// MADAU.UI.position.trigger();
			
			
			
			fadeInHomePage();
			
		}
		
		function fadeInHomePage()
		{
			$('#homePage').fadeIn('fast');
		}
		
		//execute
		if(!$('#homePage').length)
		{
			writeHomePage();
		}
		else
		{
			fadeInHomePage();
		}
		
		
	}
	

	function showCollectionsMenu ()
	{
		function writeCollectionsMenu()
		{
			var ul = $('<ul>', {'id':'collectionsMenu'}),
				li,
				a,
				colectie;
			
			for (colectie in BLOs.productsTree)
			{
				console.log(colectie);
				a = $('<a>', {'href':'?p=lookbook&collection='+BLOs.productsTree[colectie].colTitlu.split(' ').join('_'), 'name':'looksCol'+colectie.replace('colectie','')});
				a.append($('<span>',{'class':'titlu','text':BLOs.productsTree[colectie].colTitlu}));
				a.append('<br/>');
				a.append($('<span>',{'class':'sezon','text':BLOs.productsTree[colectie].colSezon+' '+BLOs.productsTree[colectie].colAn}));
				li = $('<li>');
				li.append(a);
				ul.append(li);
			}
			
			//console.log ('------------ul is:');
			//console.log (ul);
			
			li = $('<li>',{'class':'homeLink'});
			li.append($('<a>',{'href':'?p=home', 'text':'HOME'}));
			ul.append(li);
			
			$('#content').append(ul, $('<div>',{'id':'descColHtml'}));
			
			
			
			//define rollover animations
			$('#collectionsMenu li').hover(function(){
				var titlu  = $(this).find('.titlu');
				var sezon  = $(this).find('.sezon');
				(titlu) ? titlu.stop().animate({'color':'white'}) : 0;
				(sezon) ? sezon.stop().animate({'color':'white'}) : 0;
				if($(this).hasClass('homeLink'))
				{
					$(this).children().animate({'color':'white'});
				}
				else
				{
					displayColDescription($(this).children('a').attr('name').replace('looksCol',''));
				}
				
			},function(){
				var titlu  = $(this).find('.titlu');
				var sezon  = $(this).find('.sezon');
				(titlu) ? titlu.stop().animate({'color':'green'}) : 0;
				(sezon) ? sezon.stop().animate({'color':'#333333'}) : 0;
				$(this).hasClass('homeLink') ? $(this).children().stop().animate({'color':'#333333'}) : 0;
			});
			
			
			function displayColDescription(colId)
			{
				var colDesc;
				
				colDesc = BLOs.productsTree['colectie'+colId].colDescription;
				
				$('#descColHtml').html(colDesc);
			}
			
			//click actions
			$('#collectionsMenu li a').click(function (e){
				e.preventDefault();
				$('#descColHtml').remove();
				
				
				if ($(this).parent().hasClass('homeLink')) 
				{
					hideCollectionsMenu(function (){
						//after fadeout animatiuon finished
						//showHomePage();
						History.pushState({page:'home'}, "Home page | Greta Pollman", "?p=home");
					});
				}
				else
				{
					var looksCol = $(this).attr('name');
					hideCollectionsMenu(function(){	
						var colNr = looksCol.replace('looksCol','');
						var colTitle = BLOs.productsTree['colectie'+colNr].colTitlu;
						History.pushState({page:'lookbook','looksCol':looksCol}, 'Lookbook '+colTitle+' | Greta Pollman', '?p=lookbook&collection='+colTitle.split(' ').join('_'));

					});
				}
			});
			
			MADAU.UI.position.setPositionable('#collectionsMenu',{'leftPercent':10, 'bottomMargin':true});
			MADAU.UI.position.trigger();
			
			
			fadeInCollectionsMenu();
		}
		
		function fadeInCollectionsMenu()
		{
			$('#collectionsMenu').fadeIn('fast');
		}
		
		//create if doesn't exist
		if(!$('#collectionsMenu').length)
		{
			writeCollectionsMenu();
		}
		else //if exists, simply show
		{
			fadeInCollectionsMenu();
		}
		hideTopLogo(); // if it is showing	
		hideLeftRightScrollers(); //if showing	

	}
	
	function hideCollectionsMenu(callback)
	{
		$('#collectionsMenu').fadeOut('fast', function (){
			if (callback)
			{
				callback(); /// for example call back would be show the home page
			}
		});
	}
	
	
	function showContactMenu ()
	{
		function writeContactmenu()
		{
			var ul = $('<ul>', {'id':'contactMenu'}),
				liSales = $('<li>', {id:'sales'}),
				liInfo = $('<li>', {id:'info'}),
				liHome = $('<li>', {id:'home'});
			
			liSales.append( $('<a>', {text: 'ABOUT', href : '#'}));
			liInfo.append( $('<a>', {text: 'CONTACT', href : '#'}));
			liHome.append( $('<a>', {text: 'HOME', href : '?p=home', 'class':'home'}));
			
			ul.append(liSales, liInfo, liHome);
			
			
			
			$('#content').append(ul,$('<div>',{'id':'aboutHTML'}));
			
			//rolovers
			$('#contactMenu a').hover(function (){
				$(this).stop().animate({'color':'white'});
				if($(this).text()=='ABOUT')
				{
					showAboutSection();
				}
				if($(this).text()=='CONTACT')
				{
					showContactSection();
				}
			}, function (){
				if($(this).text()!='HOME')
				{
					$(this).stop().animate({'color':'green'});
				}
				else
				{
					$(this).stop().animate({'color':'#333333'});
				}
			}).click(function(e) {
				e.preventDefault();
			});
			
			//clicks
			$('#contactMenu #home').click(function (e){
				e.preventDefault();
				hideContactMenu(function (){
					History.pushState({page:'home'}, "Home page | Greta Pollman", "?p=home");
				});
				
			});
			
			function showAboutSection()
			{
				$('#aboutHTML').html(INIT.aboutGretaHtml);
			}
			
			function showContactSection()
			{
				var showEmailLink = $('<a>', {'id':'showEmailForm','text':'Send email inquiry','href':'#'}),
					emailForm = $('<form>',{'id':'emailForm'});
					
				
					
				$('#aboutHTML').html(INIT.contactGretaHtml);
				$('#aboutHTML').append(showEmailLink);
				$('#aboutHTML').append(emailForm);
				
				showEmailLink.click(function(){
					$(this).remove();//basically remove the anchor text to prevent new clicks
					
					emailForm.append('Your name','<br>');
					emailForm.append($('<input>',{'type':'text','name':'nameField','id':'nameField','class':'emailInput required'}),'<br>');
					emailForm.append('Your email address','<br>');
					emailForm.append($('<input>',{'type':'text','name':'emailField','id':'emailField','class':'emailInput required email'}),'<br>');
					emailForm.append('Message','<br>');
					emailForm.append($('<textarea>',{'name':'messageArea','id':'messageArea','class':'emailInput required'}),'<br>');
					emailForm.append($('<input>',{'type':'button','value':'Send','class':'emailInput','id':'sendButton'}));
					emailForm.animate({'height':'290px'});
					
					$('.emailInput').hover(function() {
						$(this).removeClass('emailInput').addClass('emailInputHover');
					}, function() {
						$(this).removeClass('emailInputHover').addClass('emailInput');
					});
					
					$('.emailInput, .emailInputHover').focus(function() {
						$(this).css({'background-color':'white'});
					});
					$('.emailInput, .emailInputHover').blur(function() {
						$(this).css({'background-color':''});
					});
					
					$('#sendButton').click(function() {
						var formData = emailForm.serialize();
						//console.log(emailForm);
						console.log(formData);
						
						if(emailForm.valid())
						{
							var xhr = $.ajax({
								//context: this,
								type: "POST",
								url: INIT.sendMailInterface,
								data: formData,
								beforeSend:function(){
									emailForm.animate({'height':'30px'});
									emailForm.html(INIT.loadingImg,' Sending email ...');
								},
								success:function(reply){
									console.log(reply);
									emailForm.html(reply);
								},
								error: function(xhr,textStatus,errorThrown){
									console.log ('Error sending email '+INIT.sendMailInterface+'  '+textStatus + ' : ' + errorThrown);
								}	
								
							});
							
						}
						
					});
			
				});
				
				emailForm.validate();
			}
			
			
			fadeInContactMenu();
		}
		
		function fadeInContactMenu()
		{
			$('#contactMenu').fadeIn('fast');
		}
		
		if (!$('#contactMenu').length)
		{
			writeContactmenu();
		}
		else
		{
			fadeInContactMenu();
		}
		
		hideTopLogo(); // if showing
	}
	
	function hideContactMenu (callback)
	{
		$('#contactMenu').fadeOut('fast', function (){
			if(callback)
			{
				callback();
			}
		});
	}
	
	function showLooksForCollection(looksCol)
	{
		
		var colArr = BLOs.looks[looksCol],
			nrLooks = colArr.length, i,
			lookHolder;
		//console.log ('showing looks ', colArr);
		
		//first write top menu
		writeTopMenuLooksCollection(looksCol);
		
		function writeLooksCol(looksCol)
		{
			var looksColDiv = $('<div>', {'id': looksCol}),
				looksColDivWidth = 300, //temporray. We augment when images have loaded
				checkImagesLoadedSI,
				showSidePaneST,
				mainImgNaturalWidth,
				mainImgNaturalHeight,
				mainImgApectRatio,
				mainImgDesiredHeight,
				aspectRatios={};
			
			looksColDiv.css({'width': nrLooks*305});
			
			$('#content').append(looksColDiv);
			
			MADAU.UI.winSize.setResizable('#'+looksCol, {'height':75, 
														'relativeTo': 'parent', 
														'minHeight':500,
														'maxHeight':500});
			MADAU.UI.winSize.trigger();
			MADAU.UI.position.setPositionable('#'+looksCol, {'vertCenter':true});
			MADAU.UI.position.trigger();
			
			for (i in colArr)
			{
				lookHolder = $('<div>', {'id':'lookHolder'+i, 'class':'lookHolder'});
								
				looksColDiv.append(lookHolder);
				MADAU.UI.winSize.setResizable('#'+looksCol+' #lookHolder'+i, {'height':100, 'relativeTo':'parent'});
				
			}
			MADAU.UI.winSize.trigger();
			
			//preload images
			BLOs.images[looksCol] = {};
			
			
			//insert images -> load in RAM
			for (i in colArr)
			{
				//lookHolder = $('#'+looksCol+' #lookHolder'+i);
				BLOs.images[looksCol]['img'+i] = new Image();
				BLOs.images[looksCol]['img'+i].src = colArr[i].look_imgThu;
				BLOs.images[looksCol]['img'+i].className= 'mainImg closed';
				BLOs.images[looksCol]['img'+i].name= i;
				//height and width
				mainImgNaturalHeight = colArr[i].h1;
				mainImgNaturalWidth = colArr[i].w1;
				mainImgApectRatio = mainImgNaturalWidth / mainImgNaturalHeight;
				aspectRatios['aspect'+i] = mainImgApectRatio; 
				
				//console.log('mainImgNaturalHeight mainImgNaturalWidth '+mainImgNaturalHeight+' '+mainImgNaturalWidth);
				
				BLOs.images[looksCol]['img'+i].onload = function (){
					var displayNumber = parseInt(this.name)+1;
					(displayNumber<10)?displayNumber = '0'+displayNumber:0;
					
					lookHolder = $('#'+looksCol+' #lookHolder'+this.name);
					mainImgDesiredHeight = lookHolder.height();
					//console.log ('mainImgDesiredHeight '+mainImgDesiredHeight);
					this.height = mainImgDesiredHeight;
					this.width = Math.ceil(mainImgDesiredHeight*aspectRatios['aspect'+this.name]);
					
					lookHolder.append(this);
					lookHolder.append($('<span>',{'class':'lookNumber','text':displayNumber}));
					
					lookHolder.css({'width': $('#'+looksCol+' #lookHolder'+this.name+' .mainImg').width()});
					looksColDivWidth += $('#'+looksCol+' #lookHolder'+this.name+' .mainImg').width(); //image width
					looksColDivWidth += INIT.lookMargin; //image margin
					$('#'+looksCol).css({'width': looksColDivWidth});
					
					mainImgClickActions(this.name, displayNumber);
				};
				//lookHolder.append(BLOs.images[looksCol]['img'+i]);
			}
			console.log('BLOS cu imagini =====');
			console.log (BLOs);
			
			
			
			//define click action for mainInmgs
			function mainImgClickActions(name)
			{
				
				function openClose(elem)
				{
					var scrollLeftTo = 0;
					
					if(!elem.hasClass('open'))
					{
						//if other open , close that
						$('#'+looksCol+' .open').each(function (){
							//hide the side pane if its showing 
							var lookCounter = parseInt($(this).parent().attr('id').replace('lookHolder',''));
							hideLookSidePane(looksCol, lookCounter);
							
							//clear the side pane showing timeout if it was just called
							clearTimeout(showSidePaneST);
							
							var imgWidth = $(this).width();
							$(this).removeClass('open').addClass('closed');
							$(this).parent().animate({'width':imgWidth});
						});
					}
					
					
					if (elem.hasClass('closed'))
					{
						//  open
						elem.removeClass('closed').addClass('open');
						// this open side bar 
						var lookDiv = elem.parent(),
							origWidth = elem.width();
						lookDiv.animate({'width':origWidth+INIT.lookSidePaneWidth});
						
						// horizaontal scroll container so that this is in focus as it where
						//compute the width of previous siblings
						scrollLeftTo = computePrevSiblingsWidth(parseInt(elem.parent().attr('id').replace('lookHolder','')));
						
						//scroll teh content div accordingly
						//$('#content').scrollLeft(scrollLeftTo-30);
						$('#content').animate({'scrollLeft':scrollLeftTo-30});
						
						//build and or display products links inside the side pane
						//timeout to be cleared whenever we try and close a side pane or opening a new one 
						//this prevents timeouts overlapping
						clearTimeout(showSidePaneST);
						showSidePaneST = setTimeout(function(){
							showLookSidePane(looksCol, parseInt(elem.parent().attr('id').replace('lookHolder','')));
						}, 800);
						
					}
				}
				
				function justClose(looksCol, lookCounter)
				{
					hideLookSidePane(looksCol, lookCounter);
					
					//clear the side pane showing timeout if it was just called
					clearTimeout(showSidePaneST);
					
					//CHANGE
					var mainimg = $('#'+looksCol+' #lookHolder'+lookCounter+' .mainImg');
					console.log('#looksCol'+looksCol+' #lookHolder'+lookCounter+' .mainImg');
					var imgWidth = mainimg.width(); 
					console.log(mainimg);
					mainimg.removeClass('open').addClass('closed');
					mainimg.parent().animate({'width':imgWidth});
				}
				
				function computePrevSiblingsWidth(counter)
				{
					var imgWidth = 0,
						totalWidth = 0;
					//alert (counter);
					if (counter > 0) 
					{
						for (var i=0; i < counter; i++) 
						{
							imgWidth = $('#'+looksCol+' #lookHolder'+i+' .mainImg').width();
							totalWidth += imgWidth + INIT.lookMargin;
							
						};
					}
					else
					{
						totalWidth += INIT.lookMargin;
					};
					//console.log (totalWidth);
					return totalWidth;
				}
				
				
				function showLookSidePane(looksCol, lookCounter)
				{
					var lookProdsObj = JSON.parse(BLOs.looks[looksCol][lookCounter].look_CodesImages);
					var displayNumber = parseInt(lookCounter)+1;
					(displayNumber<10)?displayNumber = '0'+displayNumber:0;
					
					
					function writeLookSidePane()
					{
						var sidePane = $('<div>', {'class':'sidePane'}),
							title = $('<h1>', {'text': displayNumber}),
							closeBut = $('<a>',{'href':'#',
												'class':'closeSidePaneBut'}),
							codProd = '',
							prodData = {},
							prodDiv = {};
						
						title.append(closeBut);
						closeBut.click(function(e){
							e.preventDefault();
							justClose(looksCol, lookCounter);							
							//alert('clicky '+looksCol+' , '+ lookCounter);
						});
						
						sidePane.append(title);
						
						for(var i in lookProdsObj)
						{
							//console.log(lookProdsObj[i]);
							for (var j in lookProdsObj[i])
							{
								codProd = j;
								//find which product  it is and get other data
								for (var k in BLOs.allProducts)
								{
									//console.log(BLOs.allProducts[k]);
									if (BLOs.allProducts[k].cod == codProd) 
									{
										//console.log(BLOs.allProducts[k]);
										prodData.allProdsCounter = k;
										prodData.cod = codProd;
										prodData.titlu = BLOs.allProducts[k].titlu;
										prodData.thumbPath = BLOs.allProducts[k]['img'+lookProdsObj[i][j]+'thu'];
									};
								}
								prodDiv = $('<div>',{'class':'prodDiv', 'id':'prodDiv'+prodData.allProdsCounter});
								prodDiv.append($('<a>',{'html': '<img src="'+prodData.thumbPath+'">'}));
								prodDiv.append($('<h3>',{'html': prodData.titlu+'<br>'+prodData.cod}));
								sidePane.append(prodDiv);
							}
						}
						
						$('#'+looksCol+' #lookHolder'+lookCounter).append(sidePane);
						
						//define de rollovers
						$('.sidePane .prodDiv').hover(function(){
							$(this).children('a').stop().animate({'height':INIT.lookaHoverH});
							$(this).stop().animate({'height':INIT.lookaHoverH, 
												'color':'green', 
												'background-color':'#f9dcc9'});
						},function(){
							$(this).children('a').stop().animate({'height':INIT.lookaInitH});
							$(this).stop().animate({'height':INIT.lookaInitH,  
													'color':INIT.defaultTextColor,
													'background-color':'silver'});
						});
						
						//define click actions 
						$('.prodDiv').click(function(){
							showProductDetail($(this).attr('id').replace('prodDiv',''));
						});
						
						//after creation, show the fooker
						fadeInLookSidePane();
					}
					
					function fadeInLookSidePane()
					{
						$('#'+looksCol+' #lookHolder'+lookCounter+' .sidePane').fadeIn('slow');
					}
					
					//EXECUTE
					if($('#'+looksCol+' #lookHolder'+lookCounter+' .sidePane').length)
					{
						//exists, just show
						fadeInLookSidePane();
					}
					else
					{
						///create
						writeLookSidePane();
					}
					
				}
				
				function hideLookSidePane(looksCol, lookCounter)
				{
					//$('#'+looksCol+' #lookHolder'+lookCounter+' .sidePane').hide();
					$('#'+looksCol+' #lookHolder'+lookCounter+' .sidePane').remove();
				}
				
				
				//action
				$('#lookHolder'+name+' .closed').click(function (){
					
					var lookNumber, looksCol;
					
					if ($(this).hasClass('closed'))
					{
						openClose($(this));
					}	
					else
					{
						// an already open image was clicked, display the magnified zoomed image
						//call the function with collection id and look number
						lookNumber = $(this).parent().attr('id').replace('lookHolder','');
						//console.log('lookNumber '+lookNumber);
						looksCol = $(this).parent().parent().attr('id');
						//console.log('looksCol '+looksCol);
						showLookZoom(looksCol, lookNumber);
					}
				});

			}
			
			
			
			//scroll events
			$('#content').scroll(function (){
				//console.log($(this).scrollLeft());
			});
			
			
			
			fadeInLooksCol(looksCol);
		}
		
		function fadeInLooksCol(looksCol)
		{
			$('#'+looksCol).fadeIn('fast');
		}
		
		if(!$('#'+looksCol).length)
		{
			writeLooksCol(looksCol);
		}
		else
		{
			fadeInLooksCol(looksCol);
		}
		//ceck if looksCol2 exists. if yes fadeIn else write and fade in
		
		
		showLeftRightScrollers();
		
	}
	
	function  showLeftRightScrollers()
	{
		//write the autoscroll left and autoscroll right
		function writeLeftRightScrollers()
		{
			var scrollToLeftDiv = $('<div>',{'id':'scrollToLeftDiv'});
			var	scrollToRightDiv = $('<div>',{'id':'scrollToRightDiv'});;
			// var scrollToRightSI,
			// scrollToLeftSI;
				
			scrollToLeftDiv.append($('<a>'));
			scrollToRightDiv.append($('<a>'));
				
			$('#wrapper').append(scrollToLeftDiv, scrollToRightDiv);
			
			
			$('#scrollToRightDiv').hover(function() {
				$(this).css({'opacity':.9, 'filter':'alpha(opacity = 90)'});
				//scrollToRightSI = setInterval(scrollToRight,30);
			}, function() {
				$(this).css({'opacity':.3, 'filter':'alpha(opacity = 30)'});
				//clearInterval(scrollToRightSI);
			}).click(function() {
				var scrollTarget = $('#content').scrollLeft()+300;
				$('#content').animate({'scrollLeft':scrollTarget}, 200)
			});
			
			$('#scrollToLeftDiv').hover(function() {
				$(this).css({'opacity':.9, 'filter':'alpha(opacity = 90)'});
				//scrollToLeftSI = setInterval(scrollToLeft,30);
			}, function() {
				$(this).css({'opacity':.3, 'filter':'alpha(opacity = 30)'});
				//clearInterval(scrollToLeftSI);
			}).click(function() {
				var scrollTarget = $('#content').scrollLeft()-300;
				$('#content').animate({'scrollLeft':scrollTarget}, 200)
			});
			
			/*
			function scrollToLeft()
						{
							var scrollPos = $('#content').scrollLeft();
							$('#content').scrollLeft(scrollPos-15);
						}
						function scrollToRight()
						{
							var scrollPos = $('#content').scrollLeft();
							$('#content').scrollLeft(scrollPos+15);
						}*/
			
		}
		
		if (!$('#scrollToRightDiv, #scrollToLeftDiv').length)
		{
			writeLeftRightScrollers();
		}
		else
		{
			$('#scrollToRightDiv, #scrollToLeftDiv').show();
		}
	}
	
	function  hideLeftRightScrollers()
	{
		$('#scrollToRightDiv, #scrollToLeftDiv').hide();
	}
	
	function showLookZoom (looksCol, lookNumber)
	{
		// console.log (looksCol+' '+lookNumber);
		// console.log(BLOs.looks[looksCol][lookNumber].look_imgZoom);
		var zoomImg = new Image(),
			nrColectie,
			h1Text,
			scrollDownSI, scrollUpSI;
		
		$('#container').append($('<div>', {'id':'looksZoom'}));
		// MADAU.UI.winSize.setResizable('#looksZoom',{'height':100, 'relativeTo':'window'});
		// MADAU.UI.winSize.trigger();
		
		//write sometext in h1
		/*
		nrColectie = looksCol.replace('looksCol','');
				h1Text = [	BLOs.productsTree['colectie'+nrColectie].colTitlu,' ',
							BLOs.productsTree['colectie'+nrColectie].colSezon,' ',
							BLOs.productsTree['colectie'+nrColectie].colAn,'&nbsp; / &nbsp;<span>',
							' # ',parseInt(lookNumber),'</span>'].join('');
				$('#looksZoom').append($('<h1>', {'html': h1Text}));
				//close button in h1 = used as window top bar 
				// $('#looksZoom h1').append($('<img>', {'src':'img/CloseButton2.png'}));
				$('#looksZoom h1').append($('<a>', {'href':'#'}));
				*/
		
		//action for close but = hide and destroy looksZoom div
		/*
		$('#looksZoom h1 img').click(function(){
					closeZoom();
				});*/
		
		
		$('#looksZoom').click(function() {
			closeZoom();
		});
		
		function closeZoom()
		{
			$('#looksZoom').fadeOut('fast', function(){
				$(this).remove();
			});
			clearInterval(scrollUpSI);
			clearInterval(scrollDownSI);
		}
		
		
		
		
		//write the image container
		$('#looksZoom').append($('<div>', {'class':'zoomImgHolder'}));
		
		//preloader anmiation
		$('#looksZoom .zoomImgHolder').append($('<img>', {'src':'img/loadingBigWhiteOnGrey.gif', 'id':'loadingZoom'}));
		
		$('#looksZoom').append($('<div>',{'id':'zoomedLookBottomScroller'}));
		$('#zoomedLookBottomScroller').append($('<div>',{'id':'downPlay',
														'html':'<img src="img/small_play_south.gif">'}));
		$('#zoomedLookBottomScroller').hover(function() {
			$('#zoomedLookBottomScroller #downPlay').addClass('hover');
			$('#zoomedLookBottomScroller #downPlay').css({'opacity':1});
			scrollDownSI = setInterval(scrollDown, 30);
		}, function() {
			$('#zoomedLookBottomScroller #downPlay').removeClass('hover');
			$('#zoomedLookBottomScroller #downPlay').css({'opacity':0.3});
			clearInterval(scrollDownSI);clearInterval(scrollUpSI);
		});
		
		$('#looksZoom').append($('<div>',{'id':'zoomedLookTopScroller'}));
		$('#zoomedLookTopScroller').append($('<div>',{'id':'upPlay',
														'html':'<img src="img/small_play_north.gif">'}));
		$('#zoomedLookTopScroller').hover(function() {
			$('#zoomedLookTopScroller #upPlay').addClass('hover');
			$('#zoomedLookTopScroller #upPlay').css({'opacity':1});
			scrollUpSI = setInterval(scrollUp, 30);
		}, function() {
			$('#zoomedLookTopScroller #upPlay').removeClass('hover');
			$('#zoomedLookTopScroller #upPlay').css({'opacity':0.3});
			clearInterval(scrollUpSI);clearInterval(scrollDownSI);
		});
		
		
		function scrollDown()
		{
			var scrollTo = $('#looksZoom .zoomImgHolder').scrollTop()+15;
			$('#looksZoom .zoomImgHolder').scrollTop(scrollTo);
			//showHideScrollArrrows();
		}
		
		function scrollUp()
		{
			var scrollTo = $('#looksZoom .zoomImgHolder').scrollTop()-15,
				curScroll;
			$('#looksZoom .zoomImgHolder').scrollTop(scrollTo);
			//showHideScrollArrrows();
		}
		
		function showHideScrollArrrows()
		{
			var currScroll  = $('#looksZoom .zoomImgHolder').scrollTop(),
				imgHeight = $('#looksZoom .zoomImgHolder img').height(),
				divHeight = $('#looksZoom .zoomImgHolder').height();
			if (currScroll > 0)
			{
				$('#zoomedLookTopScroller #upPlay').show();
			}
			else 
			{
				$('#zoomedLookTopScroller #upPlay').hide();
				clearInterval(scrollUpSI);
			}
			
			if (currScroll == imgHeight - divHeight) 
			{
				console.log('should hide');
				$('#zoomedLookBottomScroller #downPlay').hide();
				clearInterval(scrollDownSI);
			}
			else
			{
				$('#zoomedLookBottomScroller #downPlay').show();
			}
		}
		
		
		//all built up, fade in nicely
		$('#looksZoom').fadeIn('fast', function(){
			//actual image loading
			zoomImg.src = BLOs.looks[looksCol][lookNumber].look_imgZoom;
			console.log(zoomImg);
			zoomImg.onLoad = imgeLoaded();
			function imgeLoaded()
			{
				$('#looksZoom #loadingZoom').remove();
				$('#looksZoom .zoomImgHolder').append($('<img>', {'src':zoomImg.src, 'id':'zoomedImg'}));
				console.log('loaded zoom');
	
			}
			
		});
		
		
	}
	
	
	function showProductZoom (zoomPath)
	{
		var zoomImg = new Image(),
			nrColectie,
			h1Text,
			scrollDownSI, scrollUpSI;
		
		$('#container').append($('<div>', {'id':'looksZoom'}));
		
		
		
		$('#looksZoom').click(function() {
			closeZoom();
		});
		
		function closeZoom()
		{
			$('#looksZoom').fadeOut('fast', function(){
				$(this).remove();
			});
			clearInterval(scrollUpSI);
			clearInterval(scrollDownSI);
		}
		
		//write the image container
		$('#looksZoom').append($('<div>', {'class':'zoomImgHolder'}));
		
		//preloader anmiation
		$('#looksZoom .zoomImgHolder').append($('<img>', {'src':'img/loadingBigWhiteOnGrey.gif', 'id':'loadingZoom'}));
		
		$('#looksZoom').append($('<div>',{'id':'zoomedLookBottomScroller'}));
		$('#looksZoom').append($('<div>',{'id':'zoomedLookTopScroller'}));
		
		$('#zoomedLookBottomScroller').hover(function() {
			scrollDownSI = setInterval(scrollDown, 30);
		}, function() {
			clearInterval(scrollDownSI);clearInterval(scrollUpSI);
		});
		
		$('#zoomedLookTopScroller').hover(function() {
			scrollUpSI = setInterval(scrollUp, 30);
		}, function() {
			clearInterval(scrollUpSI);clearInterval(scrollDownSI);
		});
		
		
		function scrollDown()
		{
			var scrollTo = $('#looksZoom .zoomImgHolder').scrollTop()+15;
			$('#looksZoom .zoomImgHolder').scrollTop(scrollTo);
			//showHideScrollArrrows();
		}
		
		function scrollUp()
		{
			var scrollTo = $('#looksZoom .zoomImgHolder').scrollTop()-15,
				curScroll;
			$('#looksZoom .zoomImgHolder').scrollTop(scrollTo);
			//showHideScrollArrrows();
		}
		
		//all built up, fade in nicely
		$('#looksZoom').fadeIn('fast', function(){
			//actual image loading
			zoomImg.src = zoomPath;
			console.log(zoomImg);
			zoomImg.onLoad = imgeLoaded();
			function imgeLoaded()
			{
				$('#looksZoom #loadingZoom').remove();
				$('#looksZoom .zoomImgHolder').append($('<img>', {'src':zoomImg.src, 'id':'zoomedImg'}));
				console.log('loaded zoom');
			
			}
			
		});
		
		
	}
	
	
	function showProductDetail(allProdsCounter, prodDataPassedIn)
	{
		var prodData,
			h, hHtml,
			mainImg = new Image (),
			sidepane = $('<div>',{'id':'sidePane'}),
			aThumbsDiv = $('<div>',{'id':'aThumbsDiv'}),
			aThumb;
		
		if(prodDataPassedIn)
		{
			prodData = prodDataPassedIn;
		}
		else
		{
			prodData = BLOs.allProducts[allProdsCounter];
		}
		
		console.log(' Start displaying product detail overlay '+allProdsCounter);
		console.log(prodData);
		
		//rewrite meta data for facebook
		$('meta[name="og:title"]').attr('content',prodData.titlu);
		$('meta[name="og:type"]').attr('content','product');
		$('meta[name="og:image"]').attr('content',INIT.webroot+prodData.img1);
		$('meta[name="og:url"]').attr('content',INIT.webroot+'?n='+prodData.titlu.split(' ').join('_')+'&p=pDet&c='+prodData.cod);
		$('meta[name="og:description"]').attr('content',prodData.desc);
		$('meta[name="og:description"]').attr('content',prodData.desc);
		$('meta[name="og:site_name"]').attr('content', 'Greta Pollman');
		$('meta[name="fb:admins"]').attr('content', '103765753011921,1526952695167');
				
		
		console.log($('#prodDetailOverlay').length);
		$('#container').append($('<div>', {'id':'prodDetailOverlay'}));
		
		
		
		hHtml = [prodData.colTitlu+' '+prodData.colSezon+' '+prodData.colAn, ' <br/> ',
						'<span>'+prodData.catNume+'</span>', ' <br/> ',
						prodData.cod+' '+prodData.titlu
						].join('');
		
		h = $('<h1>');
		
		//h.append($('<a>', {'href':'#'})); // this is actually the close button
		
		$('#prodDetailOverlay').append(h);
		
		//main image holder div
		$('#prodDetailOverlay').append($('<div>', {'id': 'mainImgHolder'}));
		MADAU.UI.winSize.setResizable('#mainImgHolder',{'heightInPx':-60, 'relativeTo':'window'});
		MADAU.UI.winSize.trigger();
		//preloaderimg
		$('#prodDetailOverlay #mainImgHolder').append($('<img>', {'src':'img/loadingBigWhiteOnGrey.gif', 'id':'loadingZoom'}));
		
		
		
		//thumbnails
		for(var i=1; i<=4; i++)
		{
			//console.log (prodData['img'+i+'thu']);
			if(prodData['img'+i+'thu'])
			{
				aThumb = $('<a>', {'class':'aThumb', 'href':i});
				aThumb.append($('<img>',{'src': prodData['img'+i+'thu']}));
				aThumbsDiv.append(aThumb);
				
			}
			
		}
		sidepane.append(aThumbsDiv);
		sidepane.prepend($('<div>',{'class':'fb-like',
									'data-send':'true',
									'data-width':450,
									'data-show-faces':'true'}));
		
		sidepane.prepend($('<p>',{'class':'productDescription', 'text':prodData.desc}));
		sidepane.prepend($('<h1>',{'html':hHtml}));
		
		$('#prodDetailOverlay').append(sidepane,
									$('<img>',{'src':'img/big-close-X.png','id':'closerProductDetail'}));
		
		
		//<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
		
		
		
		$('#prodDetailOverlay h1 a, #closerProductDetail').click(function(){
					$('#prodDetailOverlay').fadeOut('fast',function(){
						//if product detail was accessed from within the site
						$(this).remove();
						
						//if we're coming from the products section
						(State.data.fromProducts) ? History.back() : 0 ;
						
						//if product detail was accessed from an external link, show home animation
						if(State.data.externalLink)
						{
							History.pushState(null,'Greta Pollman','');
						}
					});
		});
		
		
		
		//thumbs actions
		$('#prodDetailOverlay .aThumb').click(function(e) {
			e.preventDefault();
			//remoce current main image loaded
			$('#zoomedImg, #loadingZoom').remove();
			//sjow preloader
			$('#prodDetailOverlay #mainImgHolder').append($('<img>', {'src':'img/loadingBigWhiteOnGrey.gif', 'id':'loadingZoom'}));
			
			loadMainImg(prodData['img'+$(this).attr('href')]);
			BLOs.state.zoomPath = prodData['img'+$(this).attr('href')+'zoom'];
			
		});
		
		
		
		//reusable able to be called from thumbnail chickkng
		function loadMainImg(path)
		{
			mainImg.src = path;
			mainImg.onLoad = imgLoaded();
			function imgLoaded()
			{
				$('#prodDetailOverlay #loadingZoom').remove(); //hide preloader
				$('#prodDetailOverlay #mainImgHolder').append($('<img>', {'src':mainImg.src, 'id':'zoomedImg'}));
				//write magnifier glass
				$('#prodDetailOverlay #mainImgHolder').append($('<img>',
															{'src':'img/search_magnifier.png',
															'class':'magnifier'}));
				
			}
		}
		
		$('#prodDetailOverlay #mainImgHolder').hover(function() {
			$(this).find('.magnifier').fadeIn('fast');
		}, function() {
			$(this).find('.magnifier').fadeOut('fast');
		}).click(function() {
			showProductZoom(BLOs.state.zoomPath);
		});
		
		$('#prodDetailOverlay').fadeIn('fast', function(){
			//load main image
			BLOs.state.zoomPath = prodData.img1zoom;
			loadMainImg(prodData.img1, BLOs.state.zoomPath);
		});
	}
	
	function writeTopMenuLooksCollection(looksCol)
	{
		var ul = $('<ul>',{'id':'topMenuLooks'}),
			liCollections = $('<li>', {'id':'liColections',
								'html':'<a href="?p=collections">COLLECTIONS /</a>'}),
			nrColectie = looksCol.replace('looksCol',''),
			numeColectie = BLOs.productsTree['colectie'+nrColectie].colTitlu,
			liNumeColectie = $('<li>', {'class':'numeColectie',
										'html': numeColectie+' &nbsp;/&nbsp; '+' LOOKS /'}),
			liProducts = $('<li>', {'id':'liProducts',
								'html':'<a href="?p=products&collection='+numeColectie.split(' ').join('_')+'">PRODUCTS</a>'});
		ul.append(liCollections, liNumeColectie);
		if(nrColectie!=1)
		{
			ul.append(liProducts);
		}
				
		$('#topmenu').html(ul); 
		
		//hovers
		$('#topmenu li a').hover(function() {
			$(this).stop().animate({'color':'green'});
		}, function() {
			$(this).stop().animate({'color':'#333333'});
		});
		
		$('#topmenu #liColections').click(function (e){
			e.preventDefault();
			console.log (looksCol);
			if($('#'+looksCol).length)
			{
				$('#'+looksCol).fadeOut('fast',function(){
					$(this).remove(); // destroy the lookCol container so that we free up memory of DOM and events
					//showCollectionsMenu();
					History.pushState({page:'collectionsMenu'}, "Collections | Greta Pollman", "?p=collections");
				});
			}
			else
			{
				//showCollectionsMenu();
				History.pushState({page:'collectionsMenu'}, "Collections | Greta Pollman", "?p=collections");
			}
			
			destroyTopMenu();
		});
		$('#topmenu #liProducts a').click(function(e) {
			e.preventDefault();
			//console.log ('clicki'+looksCol);
			switchToProducts(looksCol);
		});
		
	}
	
	
	function destroyTopMenu()
	{
		$('#topmenu').children().fadeOut('fast',function (){
			$('#topmenu').html('');
		});
	}
	
	function switchToProducts(looksCol)
	{
		//fadeout looks div
		//$('#'+looksCol).fadeOut('fast',function(){
		$('[id^="looksCol"]').fadeOut('fast',function(){
			$(this).remove();
					
			var colNr = looksCol.replace('looksCol','');
			var colTitle = BLOs.productsTree['colectie'+colNr].colTitlu;
			History.pushState({page:'products','looksCol':looksCol},'Products - '+colTitle+' | Greta Pollman', '?p=products&collection='+colTitle.split(' ').join('_'));
		});
		
	}
	
	function writeTopMenuProductsCollection(looksCol)
	{
		var ul = $('<ul>', {'id':'topMenuLooks'}),
			liCollections = $('<li>', {'id':'liColections',
								'html':'<a href="?p=collections">COLLECTIONS / </a>'}),
			nrColectie = looksCol.replace('looksCol',''),
			numeColectie = BLOs.productsTree['colectie'+nrColectie].colTitlu,
			liNumeColectie = $('<li>', {'class':'numeColectie',
										'html': numeColectie+' &nbsp;/ '+'<a href="?p=lookbook&collection='+numeColectie.split(' ').join('_')+'"> &nbsp; LOOKS /</a>'}),
			liProducts = $('<li>', {'id':'liProducts', 'class' : 'selected',
								'text':'PRODUCTS'});
			
		ul.append(liCollections, liNumeColectie, liProducts);
		
		$('#topmenu').html(ul);
		
		$('#topmenu a').hover(function() {
			$(this).stop().animate({'color':'green'});
		}, function() {
			$(this).stop().animate({'color':'#333333'});
		});
		
		$('#topmenu #liColections a').click(function (e){
			e.preventDefault();
			History.pushState({page:'collectionsMenu'}, "Collections | Greta Pollman", "?p=collections");
		});
		
		$('.numeColectie a').click(function(e) {
			e.preventDefault();
			var colNr = looksCol.replace('looksCol','');
			var colTitle = BLOs.productsTree['colectie'+colNr].colTitlu;
			History.pushState({page:'lookbook','looksCol':looksCol}, 'Lookbook '+colTitle+' | Greta Pollman', '?p=lookbook&collection='+colTitle.split(' ').join('_'));

		});
		
	}
	
	
	function writeProductsCategories(looksCol)
	{
		var colectieId = parseInt(looksCol.replace('looksCol','')),
			colData = BLOs.productsTree['colectie'+colectieId],
			categsArr = [],
			prodsCol = $('<div>',{'id':'prodsCol'+colectieId}),
			prodsColWidth = 0 ;
		//
		console.log('writeProductsCategories fro '+colectieId+' collection data below: ');
		console.log(colData);
		
		//first off hide left right scroller ears
		hideLeftRightScrollers();
		
		for (var i in colData.categorii)
		{
			categsArr.push(i);
		}
		
		console.log(categsArr);
		//the width of the prodsCol div wil lbe justy so to accomodate half of the array items
		//ie split them in tho rows down the middle/ each nbox is 200x200 + mrgin 10+10
		prodsColWidth = Math.ceil(categsArr.length/2)*(INIT.prodCategsThumbWidth+5+2*INIT.prodCategsThumbMargin)+10;
		prodsCol.css({'width':prodsColWidth});
		
		for (var i=0; i<categsArr.length; i++)
		{
			var thumbDiv = $('<a>',{'href':'?p=products&collections='+colData.colTitlu.split(' ').join('_')+'&cat='+categsArr[i].split(' ').join('_'),
									'class':'prodsCategsThumb',
										'html':'<span>'+categsArr[i]+'</span>'});
			var bgrImg = 'img/productCategs/'+colectieId+'/'+categsArr[i].toLowerCase().replace(' ','-')+'.jpg';
			thumbDiv.css({'background-image':'url("'+bgrImg+'")'});
			
			//write overlay
			var overlay = $('<span>',{'class':'overlay'});
			thumbDiv.prepend(overlay);
			
			prodsCol.append(thumbDiv);
		}
		
		console.log(prodsCol);
		if($('[id^="prodsCol"]').length)
		{
			$('[id^="prodsCol"]').remove(); // REMOVE if al;ready exists. avoid duplicates
		}
		$('#content').prepend(prodsCol);
		
		MADAU.UI.position.setPositionable('#prodsCol'+colectieId,{'vertCenter':true});
		MADAU.UI.position.trigger();
		
		$('.prodsCategsThumb').hover(function() {
			$(this).stop().animate({'border-color':'white'});
			$(this).find('span, div').fadeOut();
		}, function() {
			$(this).stop().animate({'border-color':'#C0C0C0'});
			$(this).find('span, div').fadeIn();
		});
		
		$('.prodsCategsThumb').click(function(e) {
			e.preventDefault();
			var categ = $(this).children('span').text();
			
			History.pushState({page:'products',
								'looksCol':looksCol,
								'cat':categ},
								categ+' - '+colData.colTitlu+' | Greta Pollman', 
								'?p=products&collection='+colData.colTitlu.split(' ').join('_')+'&cat='+categ);

			
		});	
		
			
		
	}
	
	function writeProducts(colectieId, categNume)
	{
		var productsData = BLOs.productsTree['colectie'+colectieId].categorii[categNume].produse,
			product = {},
			prodsCount = 0,
			productsDiv = $('<div>',{'id':'productsDiv' }),
			productsDivWidth = 0,
			productThumb,
			overlay = $('<div>',{'class':'overlay'});
		
		console.log(productsData);
		
		//make sure we don't write twice. bug
		if($('#productsDiv').length)
		{
			return;
		}
		
		
		for (var i in productsData)
		{
			prodsCount++;
			product = productsData[i];
			
			productThumb = $('<div>',{'id':'productThumb_'+i,
										'class':'prodsThumb',
										'html':'<div class="overlay"></div><span>'+product.titlu+'</span>'});
			productsDiv.append(productThumb);
									
		}
		
		productsDivWidth = Math.ceil(prodsCount/2)*(INIT.prodCategsThumbWidth+5+2*INIT.prodCategsThumbMargin)+10;
		productsDiv.css({'width':productsDivWidth});
		
		$('#content').prepend(productsDiv);
		
		//show left right scrollers if ther are more than 8 products
		(prodsCount>8)? showLeftRightScrollers():0;
		
		
		MADAU.UI.position.setPositionable('#productsDiv',{'vertCenter':true});
		MADAU.UI.position.trigger();
		
		
		loadProductsImages();
		
		
		$('.prodsThumb').hover(function() {
			$(this).stop().animate({'border-color':'white'});
			// $(this).find('span, div').fadeOut();
			$(this).find('div').fadeOut();
		}, function() {
			$(this).stop().animate({'border-color':'#C0C0C0'});
			// $(this).find('span, div').fadeIn();
			$(this).find('div').fadeIn();
		});
		
		$('.prodsThumb').click(function() {
			product = productsData[$(this).attr('id').replace('productThumb_','')];
			//showProductDetail(0,product);
			History.pushState({page:'pDet',
								'c':product.cod,
								'n':product.titlu,
								'fromProducts':true
								},
								product.titlu+' | Greta Pollman', 
								'?n='+product.titlu.split(' ').join('_')+'&p=pDet&c='+product.cod);
		});
		
		function loadProductsImages()
		{
			var imgObject,
				product,
				imgPath = '',
				thumbDivId = '',
				//loadImgsArr = [],
				//checkCompleteSI;
				imgAspectRatio,
				spanText;
			
			for (var i in productsData)
			{
				product = productsData[i];
				//imgPath = INIT.webroot+product.img1;
				imgPath = product.img1;
				thumbDivId = 'productThumb_'+i;
				
				console.log('loading '+imgPath+' inside '+thumbDivId);
				//console.log($('#'+thumbDivId));
				
				$('#'+thumbDivId).prepend('<img src="img/load-indic-white-on-litegrey.gif">');
				
				// imgObject = new Image();
				// imgObject.src = imgPath;
// 				
				imgAspectRatio = product.w1 / product.h1;
				console.log('imgAspectRatio '+imgAspectRatio);
				// imgObject.width = 200;
				// imgObject.height = Math.ceil(imgObject.width/imgAspectRatio);
				
				
				imgObject = $('<img>',{'src': imgPath,
										'width': 200,
										'height': Math.ceil(200/imgAspectRatio),
										'class': 'imgProductThumb'});
				console.log('imgObject');
				console.log(imgObject);
				
				
				$('#'+thumbDivId).append(imgObject);				
				//$('#'+thumbDivId).append('<img src="'+imgPath+'" class="imgProductThumb" width="200" height="'+Math.ceil(200/imgAspectRatio)+'">');
				
				//switch span of text back to the front
				spanText = $('#'+thumbDivId+' span').css({'z-index':10000});
		
			}
			

			
		
			
			
		}
		
	}
	
	
	function removeProductsSection()
	{
		$('.prodsCategsThumb').remove();
		$('#productsDiv').remove();
	}
	
	
	
	//STaRT EXECUTION
	
	//GET DATA
	//MADAU.DAL.SQLite.setDbInterface('include/SQLite2JSON.php');
	MADAU.DAL.SQLite.setDbInterface('include/MySQL2JSON.php');
	BLOs.getProducts();
	BLOs.getLooks();
	
	
	writeSkeleton();
	
	//startupAnimation();

	//showHomePage(); //remove at the finish
	//BLOs.checkDataLoaded(); // if yes, proceed showing tghe homepage 
	// this will get called at the end of startup animatibn
	
	MADAU.UI.winSize.setResizable('#wrapper',{'height':100, 'relativeTo':'window'});
	MADAU.UI.winSize.setResizable('#content',{'heightInPx':-100,'minHeight':500, 'relativeTo':'window'});
	MADAU.UI.winSize.trigger();
	
	
	//handle deep links by forcing the state to reflect the URL
	function urlToObject(){
		var urlString = window.location.search.replace('?',''),
			urlArr = urlString.split('&'),
			urlObj = {};
		//make object out of array
		for(var i = 0; i<urlArr.length; i++)
		{
			var itemString = urlArr[i],
				itemArr = itemString.split('=');
			urlObj[itemArr[0]] = itemArr[1];
		}
		console.log('rlObj is ',urlObj);
		return urlObj;
		
	}
	INIT.URLObj = urlToObject();
	
	function setStatefromUrlObject(urlObj)
	{
		console.log('setStatefromUrlObject has been called');
		switch (urlObj.p)
		{
			case 'home':
				console.log('pushing home');
				History.pushState({page:'home'}, "Home page | Greta Pollman", "?p=home");
				break;
			case 'collections':
				History.pushState({page:'collectionsMenu'}, "Collections | Greta Pollman", "?p=collections");
				break;
			case 'about':
				History.pushState({page:'about'}, "About | Greta Pollman", "?p=about");
				break;
			case 'lookbook':
				var looksCol = 'looksCol',
					colTitle = urlObj.collection.split('_').join(' ');
				//which collection has title
				for(var i in BLOs.productsTree)
				{
					//console.log(i);
					if(BLOs.productsTree[i].colTitlu == colTitle)
					{
						var colNr = i.replace('colectie','');
						looksCol = looksCol+colNr;
					}
				}
				History.pushState({page:'lookbook','looksCol':looksCol}, 'Lookbook '+colTitle+' | Greta Pollman', window.location.search );
				break;
			case 'products':
				var looksCol = 'looksCol',
					colTitle = urlObj.collection.split('_').join(' ');
				//which collection has title
				for(var i in BLOs.productsTree)
				{
					//console.log(i);
					if(BLOs.productsTree[i].colTitlu == colTitle)
					{
						var colNr = i.replace('colectie','');
						looksCol = looksCol+colNr;
					}
				}
				
				if(urlObj.cat)
				{
					console.log('categorie: ', urlObj.cat);
					History.pushState({page:'products',
								'looksCol':looksCol,
								'cat':urlObj.cat},
								urlObj.cat+' - '+colTitle+' | Greta Pollman', 
								window.location.search);
				}
				else
				{
					History.pushState({page:'products','looksCol':looksCol},'Products - '+colTitle+' | Greta Pollman', window.location.search );
				}
				
				break;
			
			case 'pDet':
				
				History.pushState({page:'pDet',
								'c':urlObj.c,
								'n':urlObj.n.split('_').join(' '),
								'externalLink':true
								},
								urlObj.n.split('_').join(' ')+' | Greta Pollman', 
								window.location.search);
				break;
			
			default:
				console.log('default p triggered');
				History.pushState(null,'Greta Pollman','');
				//do nothing, load startup animation
				break;
			
		}
	}
	setStatefromUrlObject(INIT.URLObj);
	

	
}(jQuery);