// initiate defaults

lining_pm = "0";
lining_swatch_pm = "25385";
lining_swatch_img = lining_swatch_pm + ".png";
dummytest = 'not set by external script';

// initiate skus

var base = 'http://image01.demandmade.com/IMGSRV';
var quality = "+quality-85/";
base_sku_id = '';
sym_product_id = '';
sec_product_id = '';
lin_product_id = '';
second_pm = '';
style_name = '';
second_ang_pm = '';// object
var session = new Object;

// for tool tip library

var domTT_oneOnly = true;


function showdesigner(){ 
	document.getElementById('designer').style.visibility="visible";
	document.getElementById('designer_hide').style.visibility="visible";
}

function hidedesigner(){ 
	document.getElementById('designer').style.visibility="hidden";
	document.getElementById('designer_hide').style.visibility="hidden";
}

// for development

function setspoken(value){
	spoken = value;
}

function speak(value){
	//alert(value);
}

function debug(objectname){
	var h = $H(objectname);
	// alert(h.inspect());
}

//function init_bag(){}

// end for development

// ajax

function sendcolors(myelementid,bagdir,color1,color2,liningcolor,symboltype,primary_pm,angle_pm,second_pm,second_ang_pm,lining_pm,lining_swatch_pm,base_sku_id,sym_product_id,sec_product_id,lin_product_id,bagname){
	var querystring = 'style=' + bagdir + '&primcolor=' + color1 + '&seccolor=' + color2 + '&liningcolor=' + liningcolor + '&symboltype=' + symboltype + '&primary_pm=' + primary_pm + '&angle_pm=' + angle_pm + '&second_pm=' + second_pm + '&second_ang_pm=' + second_ang_pm + '&lining_pm=' + lining_pm + '&lining_swatch_pm=' + lining_swatch_pm + '&base_sku_id=' + base_sku_id + '&sym_product_id=' + sym_product_id + '&sec_product_id=' + sec_product_id + '&lin_product_id=' + lin_product_id + '&style_name=' + bagname,
	myAjax = new Ajax.Updater (myelementid,'/ajax/summary',{
		method: 'post',
		asynchronous: true,
		parameters: querystring,
		evalScripts: true
		,onComplete: debug(session) // delete or comment this after debug

	});
	//alert(querystring);
	document.getElementById(myelementid).style.visibility = "visible";
	
}

function switchstep(myelementid,step,bagdir,oncomp, is_ghost){
	var querystring = 'style=' + bagdir + '&is_ghost=' + is_ghost;
	myAjax = new Ajax.Updater (myelementid,'/ajax/' + step,{
		method: 'post',		
		postBody: querystring,
		onFailure: function(){
			 alert("step " + step + " querystring " + querystring);
		},
		evalScripts: true
	});
}

function savestate(step){ // saves current step to session variable
	var querystring = 'step=' + step;
		myAjax = new Ajax.Request ('/ajax/savestep',{
		method: 'post',		
		parameters: querystring
	});
}

function collection(step){ // saves current step to session variable
	var querystring = 'step=' + step;
		myAjax = new Ajax.Updater ('bagsamples','/ajax/showbags',{
		method: 'post',		
		parameters: querystring
	});
}

function switchbag(barcode,title,description){ // saves current step to session variable
	var querystring = 'barcode=' + barcode + "&title=" + title + "&description=" + description;
	var fadeOut = new fx.Opacity('bigbagright',{duration: 1000, onComplete: function(){
		myAjax = new Ajax.Updater ('bigbag','/ajax/bigbag',{
		method: 'post',		
		asynchronous: true,
		parameters: querystring
	})}});
	var fadeIn = new fx.Opacity('bigbagright',{duration: 1000});
	fadeOut.custom(1,.65);
	fadeIn.custom(.65,1)
}


// function to load values via mason each page load -- call this function in onload_js()  -- not used; delete?

function include_dom(script_filename) {
    var html_doc = document.getElementsByTagName('head').item(0);
    var js = document.createElement('script');
    js.setAttribute('language', 'javascript');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', script_filename);
    html_doc.appendChild(js);
    return false;
}

// menu

function accordion(){
	showdesigner();
	var stretchers = document.getElementsByClassName('stretcher'); //div that stretches
	var toggles = document.getElementsByClassName('steps'); //h3s clicked
	var configs = document.getElementsByClassName('config'); //configs
	//accordion effect
	var myAccordion = new fx.Accordion(
		toggles, stretchers,{opacity: false, duration: 400}
	);
	//hash function
	function checkHash(){
		var found = false;
		toggles.each(function(h3, i){
			if (window.location.href.indexOf(h3.title) > 0){
				myAccordion.showThisHideOpen(stretchers[i]);
				found = true;
				toggles[i].className="stepson";
				configs[i].className="configon";
			}
		});
		return found;
	}
	if (!checkHash()){
		myAccordion.showThisHideOpen(stretchers[0]);
		var firsth3 = document.getElementById('select')
		firsth3.className="stepson";
		var firstconfig = document.getElementById('step1')
		firstconfig.className="configon";
		savestate('step1');
	}
}

// change style of active div in menu
	
function changeStyle(id,newclassname,oldclassname,fade){
	var toggles = document.getElementsByClassName(newclassname);
	for (var i = 0, j = toggles.length; i < j; i++){
		toggles[i].className=oldclassname;
	}
	document.getElementById(id).className=newclassname;
	var fadeIn = new fx.Opacity(id,{duration: fade});
	fadeIn.custom(0,1);
}

// cross fade main div
	
function changeFade(id,newclassname,oldclassname,fade){
	var toggles = document.getElementsByClassName(newclassname);
	for (var i = 0, j = toggles.length; i < j; i++){
		var fadeOut = new fx.Opacity(toggles[i],{duration: 100, onComplete: changeClass(toggles[i],oldclassname)} );
		fadeOut.custom(1,0);
	}
	var item = document.getElementById(id);
	var fadeIn = new fx.Opacity(id,{duration: fade});
	fadeIn.hide();
	item.className=newclassname;
	fadeIn.custom(0,1);
	// ajax to set step for return to page
	savestate(id);
}

function changeClass(id,newclassname){
	id.className=newclassname;
}

function primary(color,prim_pm, ang_pm, style) {
	// alert('primary called');
	base_sku_id = style;
	primary_pm = prim_pm;
	angle_pm = ang_pm;
	if (typeof primcolor != "undefined"){
		if (color != primcolor){
			primcolor = color;
			primary_img = primary_pm + '.png';
			angle_img = angle_pm + '.png';
		}
	} else {
		primcolor = color;
		primary_img = primary_pm + '.png';
        angle_img = angle_pm + '.png';
	}

	switcher(color,"primary","p_notselected");
}

function secondary(color, sec_pm, sec_ang_pm, second_product_id){
	second_pm = sec_pm;
	second_ang_pm = sec_ang_pm;
	sec_product_id = second_product_id;
	
	if (typeof seccolor != "undefined")
	{
		if (color != seccolor){
			seccolor = color;
			second_img = second_pm + '.png';
            second_ang_img = second_ang_pm + '.png';
		}
	} else {
		seccolor = color;
		second_img = second_pm + '.png';
        second_ang_img = second_ang_pm + '.png';
	}

	sec_product_id = second_product_id;

	//alert(primary_pm);
	switcher(color,"secondary","s_notselected");
}

function lining(color,lin_pm, lin_swatch_pm, lining_product_id,nocss){
	lining_pm = lin_pm;
	lining_swatch_pm = lin_swatch_pm;
	lining_img = lining_pm + ".png";
	// for fixing reload
	if (typeof lining_swatch_pm == "undefined")
	{
		lining_swatch_pm = "25385";
	}
	lining_swatch_img = lining_swatch_pm + ".png";
	lin_product_id = lining_product_id;
	if (typeof liningcolor != "undefined")
	{
		if (color != liningcolor) var doit = true;
	} else {
		var doit = true;
	}
	if (doit){
		var offimg = document.getElementsByClassName("lining_selected");
		for (var i = 0, j = offimg.length; i < j; i++){
				offimg[i].className="l_notselected";
		}
		document.getElementById("lining_" + color).className="lining_selected";
		document.getElementById("sym_lining_" + color).className="lining_selected";
		if (typeof seccolor == "undefined") seccolor = "none";
		if (typeof symboltype == "undefined") symboltype = "none";
		//alert(sym_product_id);
		// alert("lining");
		
		sendcolors('redraw',bagdir,primcolor,seccolor,color,symboltype,primary_pm,angle_pm,second_pm,second_ang_pm,lining_pm,lining_swatch_pm,base_sku_id,sym_product_id,sec_product_id,lin_product_id,style_name);
		liningcolor = color;
		//alert (second_pm);
		keepimg = 'box2';
		if (typeof nocss!="undefined" && nocss == 1) {
			switcher('','','',1);
		} else {
			switcher('','','');
		}
		//alert(typeof view_box2);
		if (typeof view_box2 != "undefined"){
			var item = document.getElementById('bag');
			var fadeIn = new fx.Opacity(item,{duration: 1000});
			var fadeOut = new fx.Opacity(item,{duration: 100});			
			fadeOut.custom(1,.65);
			document.getElementById('bag').src=view_box2;
			document.getElementById('bag').onload=function(){
				fadeIn.custom(.65,1);
			}
			var setthumb = document.getElementsByClassName('viewimgon');
			for (var i = 0, j = setthumb.length; i < j; i++){
						setthumb[i].className='viewimg';
				}
			var setthumb = document.getElementById('box2');
			setthumb.className = 'viewimgon';
		}

		//alert('keepimg lining=' + keepimg);
		zoomer=window['big_'+keepimg];
		if (typeof symboltype != "undefined" && symboltype!="none" && symboltype!="xnone"){
			setsymbol(symboltype);
		} else {
			setsymbol();
		}
		if (document.getElementById('symbolthumbs').style.display="block");
	}
	if (typeof nocss!="undefined" && nocss == 1) {
		switcher(color,"lining","l_notselected",1);
	} else {
		switcher(color,"lining","l_notselected");
	}
}

function setbag(bag, product_media, angle_product_media, int_angle_product_media,bagname,lin_pm, restore){	
	var thumbclick = document.getElementsByClassName('bag_selected');
	if (document.getElementById('bag_' + bag)) {
		for (var i = 0, j = thumbclick.length; i < j; i++){
				thumbclick[i].className='bag_notselected';
		}
		document.getElementById('bag_' + bag).className = 'bag_selected';
	}
	bagdir = bag;	
	// reset symbol, views and variables when changing bag	
	var thumbclick = document.getElementsByClassName('symbol_selected');
	for (var i = 0, j = thumbclick.length; i < j; i++){
				thumbclick[i].className='sy_notselected';
		}	
	document.getElementById('viewswitch').className = "invis";
	var thumbclick = document.getElementsByClassName('viewimgon');
	for (var i = 0, j = thumbclick.length; i < j; i++){
				thumbclick[i].className='viewimg';
		}
	document.getElementById('viewswitch2').className = "invis";
	var thumbclick = document.getElementsByClassName('viewimgon');
	for (var i = 0, j = thumbclick.length; i < j; i++){
				thumbclick[i].className='viewimg';
		}
	ghostsrc = base + '/com/sc/x400' + quality + 's/product_media/' + product_media + '.png/bag.jpg';
	thumbsrc = base + '/sc/x60/s/product_media/' + product_media + '.png';
	anglesrc = base + '/sc/x60/s/designguru/blank.gif';
	yourbagsrc = '/images/designguru/blank.gif';
	symbolsrc = 'http://image01.demandmade.com/IMGSRV/sc/x320/com+quality-85/l1/s/product_media/25385.png/lining.jpg';
	lining_pm = lin_pm;	
	var item = document.getElementById('ghost');
	item.className='ghostborder';
	var fadeOut = new fx.Opacity(item,{duration: 100});
	var fadeIn = new fx.Opacity(item,{duration: 1000});
	fadeOut.custom(1,.65);
	document.getElementById('ghost').src=ghostsrc;	
	document.getElementById('ghost').onload=function(){
		fadeIn.custom(.65,1);
	}
	document.getElementById('bag').src=ghostsrc;
	document.getElementById('finalbag').src=ghostsrc;
	document.getElementById('yourbagimg').src=yourbagsrc;
	document.getElementById('view1').src=thumbsrc;
	document.getElementById('view2').src=anglesrc;
	document.getElementById('finalview1').src=thumbsrc;
	document.getElementById('finalview2').src=anglesrc;
	document.getElementById('symbol').src=symbolsrc;
	document.getElementById('finalsymbolimg').src='';	
	
	// clear any previous selections unless restoring from session or barcode
	if (typeof restore == 'undefined') {
		delete(primcolor);
		delete(seccolor);
		delete(symboltype);
		delete(liningcolor);
		delete(step3open);
		delete(keepimg);
		delete(style_name);
	}

	style_name = bagname;
	sendcolors('redraw',bag,'','','','',product_media,angle_product_media,'','',int_angle_product_media,'','','','','',bagname);		

        switchstep('step2ajax','step2',bagdir,'',1);
        switchstep('step3ajax','step3','none');
	clearsec();
}

function setsymbol(symbol,symbol_product_id){	// also sets blank image
	symboltype = symbol;
	sym_product_id = symbol_product_id;
	//alert("setsymbol " + sym_product_id);

	var source = 's/product_media/';
        var thumb = base + '/sc/x60/com/';
        var largebag = base + '/sc/x320/com' + quality;

	if (typeof symboltype == 'undefined' || symboltype=="none" || symboltype=="xnone") {
		var composite = 'l1/' + source + lining_swatch_img + '/lining.jpg';
	} else {
		var composite = 'l1/' + source + lining_swatch_img + '/l2/s/designguru/symbols/' + symboltype + '.png/lining.jpg';
	}
	// speak(composite);

	symbolsrc= largebag + composite;
	finalsymbolsrc= thumb + composite;
	// alert("setsymbol");
	sendcolors('redraw',bagdir,primcolor,seccolor,liningcolor,symboltype,primary_pm,angle_pm,second_pm,second_ang_pm,lining_pm,lining_swatch_pm,base_sku_id,symbol_product_id,sec_product_id,lin_product_id,style_name);		
	
	if (typeof symbol != 'undefined') {
		var thumbclick = document.getElementsByClassName('symbol_selected');
		for (var i = 0, j = thumbclick.length; i < j; i++){
					thumbclick[i].className='sy_notselected';
			}
		elemid = 'thumb_' + symbol;
		document.getElementById(elemid).className = 'symbol_selected';
		if (document.getElementById('step3').style.visibility == 'hidden'){
			document.getElementById('symbol').src = symbolsrc;
		} else {
			var sym = document.getElementById('symbol');
			var symIn = new fx.Opacity(sym,{duration: 1000});
			var symOut = new fx.Opacity(sym,{duration: 100});			
		
			symOut.custom(1,.65);
			document.getElementById('symbol').src = symbolsrc;
			document.getElementById('symbol').onload=function(){
				symIn.custom(.65,1);
			}	
		}
	}
	else
	{
		document.getElementById('symbol').src = symbolsrc;
	}
	document.getElementById('finalsymbolimg').src = finalsymbolsrc;
//	document.getElementById('remsym').className = "symon";
}

function clearsec(){
	delete(seccolor);
	sec_product_id = '';
	switcher('',"secondary","s_notselected");
}

function clearsymbol(){
	delete(symboltype);

	symbolsrc= base + '/sc/320x/com' + quality + 'l1/s/designguru/' + bagdir + '/lining/' + liningcolor + '.png/lining.jpg';
	finalsymbolsrc= base + '/sc/x60/com/l1/s/designguru/' + bagdir + '/lining/' + liningcolor + '.png/lining.jpg';
	sym_product_id = '';
	document.getElementById("symbol").src =symbolsrc;
	document.getElementById('finalsymbolimg').src = finalsymbolsrc;
	document.getElementById('remsym').className = "symoff";
	sendcolors('redraw',bagdir,primcolor,seccolor,liningcolor,'none','',primary_pm,angle_pm,second_pm,second_ang_pm,lining_pm,lining_swatch_pm,base_sku_id,'',sec_product_id,lin_product_id,style_name);
}

function add_cart(fname) {
	speak(fname+ " " + sym_product_id + "," + lin_product_id + "," + sec_product_id + "," + base_sku_id);

	if (fname== "tell_a_friend") {
		document.tell_a_friend.sym_product_id.value = sym_product_id;
        	document.tell_a_friend.lin_product_id.value = lin_product_id;
        	document.tell_a_friend.sec_product_id.value = sec_product_id;
        	document.tell_a_friend.base_sku_id.value = base_sku_id;
        	document.tell_a_friend.item_type.value = 'bag';
        	document.tell_a_friend.submit();
        } 
	if (fname== "add_to_wishlist") {
                document.add_to_wishlist.sym_product_id.value = sym_product_id;
                document.add_to_wishlist.lin_product_id.value = lin_product_id;
                document.add_to_wishlist.sec_product_id.value = sec_product_id;
                document.add_to_wishlist.base_sku_id.value = base_sku_id;
                document.add_to_wishlist.item_type.value = 'bag';
                document.add_to_wishlist.submit();
	} else {
                document.add_to_cart.sym_product_id.value = sym_product_id;
                document.add_to_cart.lin_product_id.value = lin_product_id;
                document.add_to_cart.sec_product_id.value = sec_product_id;
                document.add_to_cart.base_sku_id.value = base_sku_id;
                document.add_to_cart.item_type.value = 'bag';
                document.add_to_cart.submit();
	}
}

// color and image switcher

function switcher(color,row,imgclass,nocss){
//	// alert('lining_pm ' + lining_pm);
//	// alert('row ' + row);

	if (typeof nocss == "undefined" && nocss != 1)
	{
		if (typeof row != "undefined" && typeof imgclass != "undefined")
		{
			var offimg = document.getElementsByClassName(row+"_selected");
			for (var i = 0, j = offimg.length; i < j; i++){
					offimg[i].className=imgclass;
			}
			if (color != ""){
				document.getElementById(row + "_" + color).className=row+"_selected";
			}
		}
	}
	if (typeof liningcolor == "undefined" || liningcolor == "not chosen yet"){
		var lcolor = "putty";
	} else {
		var lcolor = liningcolor;
	}

	var source = 's/product_media/';
	var bag = '/bag.jpg';

        var thumb = base + '/sc/x60/com/' + source;
        var largebag = base + '/sc/x400/com' + quality + source;
        var zoom = base + '/sc/x800/com' + quality + source;
        var xyb = base + '/sc/x100/com' + quality + source;
	
	if (typeof primcolor != "undefined")
	{	
		if (typeof seccolor != "undefined" && seccolor !="none")
		{
			primary_img = primary_pm + '.png';
			angle_img = angle_pm  + '.png';
			lining_img = lining_pm + '.png';
			second_img = second_pm + '.png';
			second_ang_img = second_ang_pm + '.png';
			document.getElementById('view1').src= thumb + primary_img + '/l2/' + source + 'overlay/' + second_img + bag;
			view_box1 = largebag + primary_img + '/l2/' + source + 'overlay/' + second_img + bag;
			document.getElementById('view2').src= thumb + angle_img + '/l2/' + source + 'overlay/'+ second_ang_img + '/l3/' + source + 'overlay/' + lining_img + bag;
			view_box2 = largebag + angle_img + '/l2/' + source + 'overlay/'+ second_ang_img + '/l3/' + source + 'overlay/' + lining_img + bag;
			document.getElementById('finalview1').src= thumb + primary_img + '/l2/' + source + 'overlay/' + second_img + bag;
			document.getElementById('finalview2').src= thumb + angle_img + '/l2/' + source + 'overlay/' + second_ang_img + '/l3/' + source + 'overlay/' + lining_img + bag;
			// zoom views
			big_box1 = zoom + primary_img + '/l2/' + source + 'overlay/' + second_img + bag;
			big_box2 = zoom + angle_img + '/l2/' + source + 'overlay/' + second_ang_img + '/l3/' + source + 'overlay/' + lining_img + bag;
			xyourbag = xyb + primary_img + '/l2/' + source + 'overlay/' + second_img + bag;
			if (typeof keepimg == "undefined") keepimg = 'box1';
			var item = document.getElementById('bag');
			var fadeIn = new fx.Opacity(item,{duration: 1000});
			var fadeOut = new fx.Opacity(item,{duration: 100});			
			if (typeof row != "undefined" && typeof imgclass != "undefined"){
				fadeOut.custom(1,.65);
				document.getElementById('bag').src=window['view_'+keepimg];	
				document.getElementById('finalbag').src=view_box1;
				document.getElementById('bag').onload=function(){
					fadeIn.custom(.65,1);
				}
			}
			if (typeof nocss == "undefined" && nocss != 1)
			{
				document.getElementById('options').className = "oon";
			}
			if (typeof liningcolor == "undefined") liningcolor = "not chosen yet";
			if (typeof symboltype == "undefined") symboltype = "none";
			// alert("switcher two colors");
			sendcolors('redraw',bagdir,primcolor,seccolor,liningcolor,symboltype,primary_pm,angle_pm,second_pm,second_ang_pm,lining_pm,lining_swatch_pm,base_sku_id,sym_product_id,sec_product_id,lin_product_id,style_name);		
		} else {
			primary_img = primary_pm + '.png';
			angle_img = angle_pm  + '.png';
			lining_img = lining_pm + '.png';

			document.getElementById('view1').src= thumb + primary_img + bag;
			view_box1 = largebag + primary_img + bag;
		        document.getElementById('view2').src= thumb + angle_img + "/l2/" + source + "overlay/" + lining_img + bag;
                        view_box2 =  largebag + angle_img + "/l2/" + source + "overlay/" + lining_img + bag;
			view_box2 = largebag + angle_img + '/l2/' + source + 'overlay/' + lining_img + bag;
			document.getElementById('finalview1').src= thumb + primary_img + bag;
			document.getElementById('finalview2').src= thumb + angle_img + "/l2/" + lining_img + bag;
			// zoom views
			big_box1 = zoom + primary_img + bag;
			big_box2 = zoom + angle_img + "/l2/" + source + "overlay/" + lining_img + bag;
			xyourbag = xyb + angle_img + "/l2/" + source + "overlay/" + lining_img + bag;
			if (typeof keepimg == "undefined") keepimg = 'box1';
			var item = document.getElementById('bag');
			var fadeIn = new fx.Opacity(item,{duration: 1000});
			var fadeOut = new fx.Opacity(item,{duration: 100});			
			if (typeof row != "undefined" && typeof imgclass != "undefined"){
				fadeOut.custom(1,.65);
				document.getElementById('bag').src=window['view_'+keepimg];	
				document.getElementById('finalbag').src=view_box1;
				document.getElementById('bag').onload=function(){
					fadeIn.custom(.65,1);
				}
			}
			if (typeof nocss == "undefined" && nocss != 1)
			{
				document.getElementById('options').className = "ooff";
				document.getElementById('secondary').className = "on";
			}
			if (typeof seccolor == "undefined") seccolor = "none";
			if (typeof liningcolor == "undefined") liningcolor = "not chosen yet";
			if (typeof symboltype == "undefined") symboltype = "none";
			// alert("switcher one color");
			sendcolors('redraw',bagdir,primcolor,seccolor,liningcolor,symboltype,primary_pm,angle_pm,second_pm,second_ang_pm,lining_pm,lining_swatch_pm,base_sku_id,sym_product_id,sec_product_id,lin_product_id,style_name);		
		}
	}
	document.getElementById('viewswitch').className = "vis";
	var thumbclick = document.getElementsByClassName('viewimgon');
	for (var i = 0, j = thumbclick.length; i < j; i++){
				thumbclick[i].className='viewimg';
		}
	//alert ('keepimg= ' + keepimg);
	if (typeof keepimg == "undefined") keepimg = 'box1';
	document.getElementById(keepimg).className = 'viewimgon';
	document.getElementById('finalbox1').className = 'viewimgon';
	var bigbox = document.getElementById('finalbox1');
	var mooObj = new fx.Opacity('bag'); // in case it doesn't fade in when reclicked
	mooObj.setOpacity(1);
	
	zoomer=window['big_'+keepimg];
	document.getElementById('zoomerpreloadimg').src=zoomer;
	if (typeof xyourbag != "undefined") document.getElementById('yourbagimg').src=xyourbag;
	var box = document.getElementById('box');
	if (box.style.visibility == "visible") togglezoom();
	if (typeof step3open == "undefined"){
		switchstep('step3ajax','step3',bagdir);
		step3open = true;
	}
}

// image switcher

function changeImg(imgsrc,imgid,clickid,classname,onclassname,fade){
	if (typeof fade == "undefined"){
		fade = 500;
	}
	if (typeof oldimgsrc == "undefined"){
		oldimgsrc = '';
	}
	var item = document.getElementById(imgid);
	var chgFadeIn = new fx.Opacity(item,{duration: fade});
	var chgFadeOut = new fx.Opacity(item,{duration: 100});			
	if (oldimgsrc != imgsrc){
		chgFadeOut.custom(1,.65);
		document.getElementById(imgid).src=imgsrc;
		document.getElementById(imgid).onload=function(){
			chgFadeIn.custom(.65,1);
		}
	}
	oldimgsrc = imgsrc;
	var thumbclick = document.getElementsByClassName(onclassname);
	for (var i = 0, j = thumbclick.length; i < j; i++){
				thumbclick[i].className=classname;
		}
	document.getElementById(clickid).className = onclassname;
	if (clickid == clickid.replace("final",""))	keepimg = clickid;
	zoomer=window['big_'+keepimg];
	var box = document.getElementById('box');
	if (box.style.visibility == "visible"){
		document.getElementById('zoomerpreloadimg').src=zoomer;
		box.style.backgroundImage = 'url(' + zoomer + ')';
		box.style.backgroundPosition= '-400px -400px';
		var zoomIn = new fx.Opacity(box,{duration: 2000});
		zoomIn.hide();
		zoomIn.custom(0,1);
	}
}

function zoom(e){
	var box = document.getElementById('box');
	if (box.style.visibility == "visible"){
		box.style.backgroundImage = 'url(' + zoomer + ')';
		getxy(e)
		x = x*2-150;
		y = y*2-150;
		if (x > 500) x = 500;
		if (x <= 0) x = 0;
		if (y > 500) y = 500;
		if (y <= 0) y = 0;
		box.style.backgroundPosition= '-' + x + 'px -' + y + 'px ';
		box.style.backgroundRepeat = 'no-repeat';
	}
}

function togglezoom(e){
	var box = document.getElementById('box');
	var designer = document.getElementById('designer_hide');
	var redraw = document.getElementById('redraw');
	if (box.style.visibility == "visible"){
		zoombox = document.getElementById('box');
		box.style.height = "0";
		box.style.width = "0";
		var zoomOut = new fx.Opacity(zoombox,{duration: 1000});
		zoomOut.custom(1,0);
		designer.style.visibility = "visible";
		designer.style.display = "block";
		box.style.height = "0";
		box.style.width = "0";
		redraw.style.marginTop = "6px";
		document.getElementById('bag').style.cursor="default";
		document.getElementById('clickzoom').style.display="block";
		document.getElementById('clickhide').style.display="none";
	} else if (typeof primcolor != "undefined"){
		zoombox = document.getElementById('box');
		box.style.backgroundImage = 'url(' + zoomer + ')';
		getxy(e);
		x = x*2-150;
		y = y*2-150;
		if (x > 500) x = 500;
		if (x <= 0) x = 0;
		if (y > 500) y = 500;
		if (y <= 0) y = 0;
		box.style.backgroundPosition= '-' + x + 'px -' + y + 'px ';
		box.style.backgroundRepeat = 'no-repeat';
		var zoomIn = new fx.Opacity(zoombox,{duration: 2000});
		zoomIn.hide();
		zoomIn.custom(0,1);
		box.style.height = "320px";
		box.style.width = "432px";
		designer.style.visibility = "hidden";
		designer.style.display = "none";
		//redraw.style.marginTop = "330px";
		document.getElementById('bag').style.cursor="Move";
		document.getElementById('clickhide').style.display="block";
		document.getElementById('clickzoom').style.display="none";
	}
}

function sellzoom(e,obj,zoombag,zi,offset){
        var box = document.getElementById('sellbox');
	zoombox = document.getElementById('sellbox');

	if (box.style.visibility != "visible") {
        box.style.backgroundImage = 'url(' + zoombag + ')';
        getxy(e);
	if (e.offsetX) {
	x = x*5;
        y = y*8;
	} else {
        x = x*5-offset;
        y = y*8-1500;
	}
        if (x > 390) x = 390;
        if (x <= 0) x = 0;
        if (y > 390) y = 390;
        if (y <= 0) y = 0;
        box.style.backgroundPosition= '-' + x + 'px -' + y + 'px ';
        box.style.backgroundRepeat = 'no-repeat';
	box.style.visibility = "visible";
        box.style.display = "block";
        var zoomIn = new fx.Opacity(zoombox,{duration: 2000});
        zoomIn.hide();
        zoomIn.custom(0,1);
	var br = document.getElementById('defaultimg');
        br.style.visibility = "hidden";
        br.style.display = "none";
        box.style.height = "390px";
        box.style.width = "390px";
	} else {
		sellzoomoff();
	}

	document.getElementById(obj).style.cursor="Move";
}

function sellmove(e,obj,zoombag,zi,offset){
	var box = document.getElementById('sellbox');
	//alert(box.style.visibility);
 	if (box.style.visibility == "visible") {

        zoombox = document.getElementById('sellbox');
        box.style.backgroundImage = 'url(' + zoombag + ')';
        getxy(e);
        if (e.offsetX) {
        x = x*5;
        y = y*4;
        } else {
        x = x*5-offset;
        y = y*4-100;
        }
        if (x > 390) x = 390;
        if (x <= 0) x = 0;
        if (y > 390) y = 390;
        if (y <= 0) y = 0;
        box.style.backgroundPosition= '-' + x + 'px -' + y + 'px ';
        box.style.backgroundRepeat = 'no-repeat';
        box.style.height = "390px";
        box.style.width = "390px";
        var br = document.getElementById('defaultimg');
        br.style.visibility = "hidden";
        br.style.display = "none";
	document.getElementById(obj).style.cursor="Move";
	}
}

function sellzoomoff(){
        var box = document.getElementById('sellbox');
	var br = document.getElementById('defaultimg');
        box.style.visibility = "hidden";
	box.style.display = "none";
	box.style.height = "0";
        box.style.width = "0";

//        var zoomOut = new fx.Opacity(box,{duration: 2000});
 //       zoomOut.custom(1,0);

	br.style.visibility = "visible";
        br.style.display = "block";
}

function getxy(e){ // gets coordinates for zoom movement
	if (!e) e = window.event; // works on IE, but not NS (we rely on NS passing us the event)
	if (e){
		if (e.offsetX || e.offsetY){ // works on IE6,FF,Moz,Opera7
			x = e.offsetX;
			y = e.offsetY;
		}
		else if (e.layerX || e.layerY){ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
			x = e.layerX;
			y = e.layerY;
		}
	}
}