$$('.boxthumb img').each(function(e){
	e.observe('click', changeItem)
	e.observe('load', function(){ $('loader').hide()});
})
$$('.center img').each(function(e){
	e.observe('click', changeItem)
	e.observe('load', function(){ $('loader').hide()});
})
if (look) 
	var odetail = $('pdetail').innerHTML
var lock1 = 0
var lock2 = 0
var lock3 = 0
var lock4 = 0

function changeItem(event, e, colorSelected)
{	
	if (typeof(e)=="undefined") e = this
	
	if (e.up().hasClassName('center') || locked()) return
	var center = e.up(3).down('.center img');
	if ((center.getStyle('top')=='0px' || !center.getStyle('top')) && !zoomed)
	{
		flyIn(e, colorSelected)
		flyOut(e)
	}
	else
		reset(e)
}
function resetCallback(e)
{
	flyIn(e)
	flyOut(e)
}
function loadDetail(id)
{
	$$('#pdetail .subpdetail').invoke('hide')
	$('detail_'+id).show()
}
function flyIn(e, colorSelected)
{
	lock1 = 1
	var center = e.up(3).down('.center img')
	var wrapper = center.up()
	var width = center.width
	var height = center.height
	var offset = center.cumulativeOffset()
	var top = offset.top
	var left = offset.left
	wrapper.setStyle({position:'', overflow:''})
	
	var ooffset = e.cumulativeOffset()
	e.setStyle({top:ooffset.top, left:ooffset.left, position:'absolute', zIndex:'10000'})
	e.morph('width:'+width+'px;height:'+height+'px;top:'+top+'px;left:'+left+'px', {
		duration:0.5,
		afterFinish:function()
		{
			wrapper.insert(e)
			e.setStyle({zIndex:1,top:'',left:''})
			$('loader').show()
			e.src = e.src.gsub(tsize, osize) 

			DragHandler.attach(e)
			lock1 = 0
			if (typeof(selectColor) == 'function' && !colorSelected)
				selectColor(e)
		}
	});	
}

function flyOut(e)
{
	lock2 = 1
	var wrapper = e.up()
	var center = e.up(3).down('.center img')
	var width = e.width
	var height = e.height
	var offset = e.cumulativeOffset()
	var top = offset.top
	var left = offset.left
	
	center.setStyle({top:'', left:''})
	var ooffset = center.cumulativeOffset();
	center.setStyle({top:ooffset.top, left:ooffset.left, position:'absolute'})
	center.morph('width:'+width+'px;height:'+height+'px;top:'+top+'px;left:'+left+'px', {
		duration:0.5,
		afterFinish:function()
		{
			wrapper.insert(center)
			center.setStyle({position:'',top:'',left:''})
			center.src = center.src.gsub(osize, tsize)

			e.up().setStyle({position:'relative', overflow:'hidden'})
			
			if (look)
				loadDetail(e.id)

			DragHandler.detach(center)
			lock2 = 0
		}
	});
}

function zoom(i)
{
	if (locked()) return
	lock3 = 1
	if (!wrange[ratio_index + i]) 
		return;
	ratio_index += i;
	var width = wrange[ratio_index];
	var height = hrange[ratio_index]; 
	var target = $('lookwrapper').down('img');

	var top = target.getStyle('top') ? target.getStyle('top') : 0
	var left = target.getStyle('left') ? target.getStyle('left') : 0
	top = parseInt(top) - (height - target.height) + 100;
	left = parseInt(left) - (width - target.width)/2;

	target.morph('width:'+width+'px;height:'+height+'px;top:'+top+'px;left:'+left+'px', {
		duration:0.5, afterFinish:function(){
			$('loader').show()
			target.src = target.src.replace(/\/[0-9]+x[0-9]+\//, '/'+width+'x'+height+'/')
			lock3 = 0
	}});
	$('zin').hide();
	$('zin1').show();
	$('zout').hide();
	$('zout1').show();
	zoomed = true
}
function update_image(imgname)
{
	var img = $('lookwrapper').down('img');
	img.src = img.src.gsub(/\/[^\/]+\.[^.]+/, '/'+imgname);
}

function locked()
{
	return lock1 || lock2 || lock3 || lock4
}

function reset(e)
{
	if (locked()) return
	lock4 = 1
	var target = $('lookwrapper').down('img')
	target.morph('width:'+o_width+'px; height:'+o_height+'px; top:0px; left:0px', {
		duration:0.5, 
		afterFinish:function(){ 
			if(e) resetCallback(e)
			lock4 = 0
		}
	});
	target.src = target.src.replace(/\/[0-9]+x[0-9]+\//, '/'+o_width+'x'+o_height+'/')
	ratio_index = 0;
	$('zout').show();
	$('zout1').hide();
	$('zin').show();
	$('zin1').hide();
	zoomed = false
}

function zoomdbc()
{
	if (zoomed) reset()
	else zoom(1)
}


// Show Size Guides
function viewsizeguide() {
	$('sizechart').show();
	$('sizechart').setStyle({opacity:'0'});
	$('sizechart').morph('opacity:1', {duration:0.3});
	$('iframslide').hide();
}