window.addEvent('domready',init)

var thumbEls
var prodEls
var selected = -1   // pour savoir quel element est selectionne
var busyOnEffect = false; // pour savoir si une animation de fade in est en cours ou pas

function init(){
	thumbEls = $ES('.thumbs a')				// small visuals
	prodEls = $ES('.product ul.prods li')	// big visuals
	prodInfoEls = $ES('.informationDiv ul.information li') // information grey boxes
	
	/* Hide Content till the images are loaded */
	thumbNameEls = $ES('p.name')
	$each(thumbNameEls,function(el,i){
		el.setStyle('display','none')					
	})
	
	$each(thumbEls,function(el,i){
		el.setStyle('display','none')					
	})
	
	$each(prodEls,function(el){
		el.setStyle('display','none')
	})
	
	$each(prodInfoEls,function(el){
		el.setStyle('display','none')
	})
	
	/* Load Images */
	var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar'); 
	var path = '../../img/_zh/_cn/whatsnew/08-06/';
	var sum = '';
	var images=new Array();
	
	thumbNameEls = $ES('p.name')

	$each(thumbNameEls,function(el,i){
		images[i]= path + 'v_' + i +'.jpg'
	})

	gallery.setStyles({'opacity': 0, 'display': 'none'});
	progress.setStyle('visibility', 'hidden');

	var galleryImgs = $$('#gallery img');
	if (galleryImgs.length > 0) galleryImgs.each(function(image) {	image.remove();	});
	progress.setStyle('visibility', 'visible');
	new Asset.images(images, {
		onProgress: function(i) {
			this.setStyles({
				'position': 'absolute',
				'opacity': 0,
				'left': (gallery.getCoordinates().width / 2) - (this.width / 2),
				'top': (gallery.getCoordinates().height / 2) - (this.height / 2)
			});
			loadedImages[i] = this;
			var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
			bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
		},
		onComplete: function() {
			progress.setStyle('visibility', 'hidden');
			
			
			$$('.thumbs').setStyle('display','block');
			$$('.information').setStyle('display','block');
			$each(thumbEls,function(el,i){
				el.setStyle('display','block')					
			})
			
			//init menu
			$each(thumbEls,function(el,i){
				el.addEvent('mouseover',function(){
					selectThumb(i,true)
					showName(i)
				})
				el.addEvent('mouseout',function(){
					hideName()
					selectThumb(i,false)
					
				})
				el.addEvent('click',function(){
					showProd(i)
					
				})
			})	
			showProd(0)					 //Show the first item
		}
	});



	
}

function showName(id){					// show name on roll over
	var thumbNameEl1 = thumbNameEls[id]
	var thumbEl = thumbEls[id]
	var thumbEl2 = thumbNameEls[id]
	var start= 2 //pointer to the beginning
	var marginName = start+(id*62) //increase by 62 pixel each time
	thumbEl2.setStyle('margin-left',marginName)
	thumbEl2.setStyle('display','block')
}

function hideName(){					// hide name
	$each(thumbNameEls,function(el,i){
		el.setStyle('display','none')
	})
}
function selectThumb(id,flag){			// to select the item
	if(id != selected){
		var thumbEl = thumbEls[id]
		
		if(flag){
			thumbEl.addClass('over')
		}else{
			thumbEl.removeClass('over')
		}
	}
}

function showProd(id){					// show the item selected
	if(selected == id){
		return
	}
	
	if(selected != -1){
		var thumbEl1 = thumbEls[selected]
		var prodEl1 = prodEls[selected]
		thumbEl1.removeClass('over')
		thumbEl1.removeClass('selected')
		
	}

	var thumbEl2 = thumbEls[id]
	var prodEl2 = prodEls[id]
	thumbEl2.addClass('over')
	thumbEl2.addClass('selected')

	var layer = $$('#lbOverlay');
	var drop = $('lbOverlay');

	if (busyOnEffect == false){
		var thumbEl3 = prodInfoEls[id]
		$each(prodInfoEls,function(el,i){
			el.setStyle('display','none')
		})
		thumbEl3.setStyle('display','block')
		layer.setStyle('opacity', '0');
		var path2 = "url('../../img/_zh/_cn/whatsnew/08-06/v_"+id+".jpg') no-repeat #FFFFFF"
		layer.setStyle('background',path2);
		var dropFx = drop.effect('opacity', {duration:1000, wait: true, onComplete : function(){busyOnEffect = false;}, onStart : function(){busyOnEffect = true;}});
		var test = dropFx.start(1);
		selected = id
	}
	else{
		(function(){
			var thumbEl3 = prodInfoEls[id]
			$each(prodInfoEls,function(el,i){
				el.setStyle('display','none')
			})
			thumbEl3.setStyle('display','block')
			layer.setStyle('opacity', '0');
			var path2 = "url('../../img/_zh/_cn/whatsnew/08-06/v_"+id+".jpg') no-repeat #FFFFFF"
			layer.setStyle('background',path2);
			var dropFx = drop.effect('opacity', {duration:1000, wait: true, onComplete : function(){busyOnEffect = false;}, onStart : function(){busyOnEffect = true;}});
			var test = dropFx.start(1);
			selected = id		
		}).delay(500);	
	}
}