var currentSection	= 'ring_info-pane';
var on_products_id	= 0;
var MooSneak = new Class({
	initialize: function(config, options) {
		this.config=config;
		this.selected = null;                 // set the currently selected node to nothing
		on_products_id = null;                 // set the currently selected product to nothing
		//create nest
		if(x=$(this.config.peekUpdateWrapper)){;}else{
		specials_wrapper = new Element('div', {'id': this.config.peekUpdateWrapper, 'styles': {'position':'absolute', 'left':0 ,'top':0, 'zIndex':123, 'visibility':'hidden', 'padding':0}}).injectInside(document.body);
		specials_close = new Element('a', {'id': 'specials_close', 'href': 'javascript:void(0)'}).injectInside(specials_wrapper);
		specials_close.innerHTML = '<img src="images/closebox.png" onload="fixPNG(this)" style="cursor:pointer">';
		specials_close.onclick = this.hideSpecialProductBox.bind(this);
		specials_close.onmouseover = 'this.style.cursor=\'pointer\'';
		specials_detail = new Element('div', {'id': this.config.peekUpdate, 'styles': {'zIndex':2, 'textAlign':'center', 'margin': '0 auto'}}).injectInside(specials_wrapper);
		}

		i=this.config.startCount;
		if(x=$(config.div)){
			$each($(config.div).getElementsByTagName('img'), function(img){
				img_parent = img.offsetParent;
				if(img_parent!=undefined && img_parent.id==config.divItem){
					if(this.config.mode==undefined){
						img.id = i + '_product';
						img.onmouseover = this.over.pass(img, this);
						img.onmouseout	= this.out.pass(img, this);
						peeker = new Element('div', {'id': i+'_product_sneak_it', 'styles': {'position':'absolute', 'width': options.initialWidth, 'height': options.initialHeight, 'left':options.initialLeft ,'top':options.initialTop, 'backgroundImage': options.peekImage,'cursor':'pointer'}}).injectInside(img_parent);
						peeker.className=img.className;
						peeker.onmouseover = this.on.pass(peeker, this);
						peeker.onmouseout = this.off.pass(peeker, this);
						peeker.onclick = this.click.pass(peeker, this);
					}else if(this.config.mode=='view' && img.src.indexOf('loader')==-1){
						spans=$(img_parent).getElementsByTagName('span');
						if(spans.length==1 && spans[0].innerHTML=='view'){
							spans[0].style.cursor='pointer';
							spans[0].className=img.className;
							spans[0].onclick=this.view.pass(spans[0], this);
						}
					}
					i++;
				}
			}, this);
		}
	},
	over: function(img){
		if(this.selected==parseInt(img.id)) return false;
		if(x=$(img.id+'_sneak_it')){
			x.style.backgroundPosition = '0px 120px';
		}
	},
	out: function(img){
		if(this.selected==parseInt(img.id)) return false;
		if(x=$(img.id+'_sneak_it')){
			x.style.backgroundPosition = '0px 0px';
		}
	},
	on : function(peeker){
		if(this.selected==parseInt(peeker.id)) return false;
		peeker.style.backgroundPosition = '0px 80px';
	},
	off : function(peeker){
		if(this.selected==parseInt(peeker.id)) return false;
		peeker.style.backgroundPosition = '0px 0px';
	},
	show :function(trigger, content){
		$(this.config.peekUpdate).innerHTML=content;
		d_top=getTop(trigger)-64;
		d_left=getLeft(trigger);
		this.showSpecialProductBox(d_left, d_top);
	},
	view : function(viewSpan){
		sneak_obj = this;
		on_products_id = parseInt(viewSpan.className);
		viewSavingStatus('loader'+on_products_id, true);
		if(this.config.peekURL.indexOf('&')==-1){
			productsURL = this.config.peekURL+'?products_id='+on_products_id;
		}else{
			productsURL = this.config.peekURL+'&products_id='+on_products_id;
		}
		products_brief = viewSpan.className;
		products_brief_array = products_brief.split('&');
		mode='';
		if(products_brief_array.length==3){mode='&'+products_brief_array[2]}
		if(products_brief_array[1]!=undefined){
			productsURL = this.config.peekURL+'&products_id='+on_products_id+'&'+products_brief_array[1]+mode;
		}
		d_top=getTop(viewSpan)-64;
		d_left=getLeft(viewSpan);
		new Ajax(productsURL, {
			method: 'post',
			data:'x=x',
			update: this.config.peekUpdate,
			evalScripts: true,
			onComplete: function(){	
				viewSavingStatus('loader'+on_products_id, false);
				this.showSpecialProductBox(d_left, d_top);
				if(x=document.getElementById('lbOverlay')){x.onclick=function(){this.hideSpecialProductBox(); Lightbox.close()}.pass('', this)}
				if(y=document.getElementById('lbCloseLink')){y.onclick=function(){this.hideSpecialProductBox(); Lightbox.close()}.pass('', this)}
			}.pass('', this)
		}).request();
	},
	click : function(peeker){
		currentSection	= 'ring_info-pane';
		sneak_obj = this;
		for(i=this.config.startCount; i<=this.config.itemCount;i++){
			if(x=$(i + '_product_sneak_it')){
				x.style.backgroundPosition = '0px 0px';
			}
		}
		peeker.style.backgroundPosition = '0px 40px';
		//clicked
		hideSelectBoxes();
		on_products_id = parseInt(peeker.className);
		if(this.config.peekURL.indexOf('?')==-1){
			productsURL = this.config.peekURL+'?products_id='+on_products_id;
		}else{
			productsURL = this.config.peekURL+'&products_id='+on_products_id;
		}
		products_brief = peeker.className;
		products_brief_array = products_brief.split('&');
		mode='';
		if(products_brief_array.length==3){mode='&'+products_brief_array[2]}
		if(products_brief_array[1]!=undefined){
			if(this.config.peekURL.indexOf('?')==-1){
				productsURL = this.config.peekURL+'?products_id='+on_products_id+'&'+products_brief_array[1]+mode;
			}else{
				productsURL = this.config.peekURL+'&products_id='+on_products_id+'&'+products_brief_array[1]+mode;
			}
		}
		d_top=getTop(peeker)-64;
		d_left=getLeft(peeker);
		new Ajax(productsURL, {
			method: 'post',
			data:'x=x',
			update: this.config.peekUpdate,
			evalScripts: true,
			onComplete: function(){
				peeker.style.backgroundPosition = '0px 0px';		
				this.showSpecialProductBox(d_left, d_top);
				if(x=document.getElementById('lbOverlay')){x.onclick=function(){this.hideSpecialProductBox(); Lightbox.close()}.pass('', this)}
				if(y=document.getElementById('lbCloseLink')){y.onclick=function(){this.hideSpecialProductBox(); Lightbox.close()}.pass('', this)}
				try{
				ring.loadSliderSpecification();
				ring.loadSliderMetal();
				}catch(err){;}
			}.pass('', this)
		}).request();
	},
	showSpecialProductBox : function (the_left, the_top){
		if(x=$(this.config.peekUpdateWrapper)){
			if($(this.config.div)){
				content_box_width = $(this.config.div).offsetWidth;
			}else{
				content_box_width = 780; 
			}
			Lightbox.refresh();
			the_width=x.offsetWidth;
			the_height=x.offsetHeight;
			the_left-=(the_width-100)/2;
			d_most_left = (parseInt(screen.width) - content_box_width)/2;
			d_most_right = d_most_left + content_box_width - the_width;
			if(the_left<d_most_left){the_left=d_most_left;}
			if(the_left>d_most_right){the_left=d_most_right;}
			x.style.top=the_top+'px';
			x.style.left=the_left+'px';				
			x.style.visibility='visible';
			x.style.display='block';
		}
	},
	hideSpecialProductBox: function (){
		if(x=$(this.config.peekUpdateWrapper)){x.style.visibility='hidden';x.style.display='none';}
		showSelectBoxes();
		is_zoom_image=false;
	}
});
//zoom
function hideLoading(){
	if(x=document.getElementById('loading_anim')){x.style.display='none'}
}
function create_zoom(){
	$('dragger').makeDraggable(
	{
	container: 'containment1',
	onStart: function() {},
	onDrag: function() {
		var leftContainer = $('containment1').getLeft();
		var topContainer = $('containment1').getTop();
		$('dragimage').style.left = ((this.getLeft() - leftContainer) * -1 ) + 'px';
		$('dragimage').style.top  = ((this.getTop() - topContainer) * -1 ) + 'px';
		$('zoomimage').style.left = ((this.getLeft() - leftContainer) * -5.25 ) + 'px';
		$('zoomimage').style.top  = ((this.getTop() - topContainer) * -5.25 ) + 'px';
		$('zoomimage').style.position='absolute';
		$('zoomimage').onload=hideLoading();
	}.bind($('dragger'))
	})
};
function zoomOn(onoff) {
	if (onoff == 1 && is_zoom_image) {
		$('zoomcontainment').style.visibility = 'visible'; 
		$('containment1').style.visibility = 'visible'; 
	}else{
		$('zoomcontainment').style.visibility = 'hidden'; 
		$('containment1').style.visibility = 'hidden'; 
	}
}

var objSearch;
var MooSearch = new Class({
	initialize: function(config, options) {
		this.config=config;
	},
	send: function(){
		objSearch=this;
		switch(this.config.type){
			case 'light':
				set_anchor(this.config.lightLink);
				$(this.config.formName).send({update:this.config.update});
				break;
			default:
				$(this.config.formName).send({update:this.config.update,onRequest:function(){showLoading(this.config.update)}.pass('', this)});
				break;
		}
	},
	gotoPage: function(page){
		if(page>this.totalPage){page=this.totalPage;}
		$(this.config.formName).elements['current_page'].value=page;
		this.send();
		$(this.config.formName).elements['current_page'].value=1;
	},
	makePaging: function(currentPage, totalRecord, recordPerPage){
		this.totalPage=Math.ceil(totalRecord/recordPerPage);

		if(currentPage > this.totalPage) currentPage = this.totalPage;
		container = $(this.config.pagingBlock);
		//cleaning
		container.innerHTML='';
		wrapper = new Element('div', {'id': 'pagingSection', 'styles':{'width':250, 'textAlign':'left', 'margin': '0 auto'}}).injectInside(container);

		buttonBackOff = new Element('div', {'id': 'back_page_button_off', 'styles':{'width':16, 'height':14, 'float':'left', 'marginTop':'4px'}});

		buttonBackOn = new Element('div', {'id': 'back_page_button_on', 'styles':{'width':16, 'height':14, 'float':'left', 'marginTop':'4px'}});
		buttonBackOn.onmouseover = function(){this.style.backgroundPosition='-16px 0px';};
		buttonBackOn.onmouseout = function(){this.style.backgroundPosition='0px 0px';};
		buttonBackOn.onclick = function(){this.gotoPage(currentPage-1)}.pass('', this);
		backLink = new Element('a', {'href': 'javascript:void(0)', 'styles':{'width':16, 'height':13, 'left':0}}).injectInside(buttonBackOn);
		blankImage = new Element('img', {'src': basehref()+'images/spacer.gif', 'width': 16, 'height': 13, 'border':0}).injectInside(backLink);

		buttonNextOff = new Element('div', {'id': 'next_page_button_off', 'styles':{'width':16, 'height':14, 'float':'left', 'marginTop':'4px'}});

		buttonNextOn = new Element('div', {'id': 'next_page_button_on', 'styles':{'width':16, 'height':14, 'float':'left', 'marginTop':'4px'}});
		buttonNextOn.onmouseover = function(){this.style.backgroundPosition='-16px 0px';};
		buttonNextOn.onmouseout = function(){this.style.backgroundPosition='0px 0px';};
		buttonNextOn.onclick = function(){this.gotoPage(currentPage+1)}.pass('', this);
		nextLink = new Element('a', {'href': 'javascript:void(0)', 'styles':{'width':16, 'height':13, 'left':0}}).injectInside(buttonNextOn);
		blankImage = new Element('img', {'src': basehref()+'images/spacer.gif', 'width': 16, 'height': 13, 'border':0}).injectInside(nextLink);

		pageInfo = new Element('div', {'id': 'page_info', 'styles':{'width':75, 'height':14, 'float':'left', 'textAlign':'center', 'marginTop':'2px'}});
		pageInfo.innerHTML = 'page '+currentPage+' of '+this.totalPage;

		gotoSection = new Element('div', {'styles':{'width':110, 'height':20, 'float':'left'}});
		gotoText = new Element('div', {'styles':{'width':50, 'float':'left', 'marginTop':'2px'}}).injectInside(gotoSection);
		gotoText.innerHTML = '&nbsp; Go to : ';
		inputPage = new Element('input', {'type':'text', 'id':'txtGoToPage', 'size':'3', 'maxlength':'2' , 'class':'textbox', 'styles':{'height':12, 'float':'left', 'marginTop':'3px', 'marginRight':'5px'}}).injectInside(gotoSection);
		goImage = new Element('img', {'src': basehref()+'images/btn_go.gif', 'border':0, 'align':'absmiddle', 'styles':{'float':'left'}}).injectInside(gotoSection);

		goImage.onclick = function(){this.gotoPage($('txtGoToPage').value)}.pass('', this);

		if(currentPage==1) {
			buttonBackOff.injectInside(wrapper);
		}else if(currentPage > 1) {
			buttonBackOn.injectInside(wrapper);
		}
		pageInfo.injectInside(wrapper);
		if(currentPage==this.totalPage) {
			buttonNextOff.injectInside(wrapper);
		}else if(this.totalPage > currentPage){
			buttonNextOn.injectInside(wrapper);
		}
		blankImage = new Element('img', {'src': basehref()+'images/spacer.gif', 'width': 10, 'height': 20, 'border':0, 'styles':{'float':'left'}}).injectInside(wrapper);
		gotoSection.injectInside(wrapper);
	}
})

var MooRing = new Class({
	initialize: function(config, options) {
		this.config=config;
	},
	loadSliderSpecification:function(){
		//load sliding tab specification
		this.specification = new SlidingTabs('buttons_specification', 'panes_specification');
	},
	loadSliderMetal:function(){
		//load sliding tab metal
		this.metalMale = new SlidingTabs('metal_male_toolbar', 'metal_male_scroller');
		this.metalFemale = new SlidingTabs('metal_female_toolbar', 'metal_female_scroller');
	},
	viewRingSpecification: function(){
		this.specification.changeToNumber(0);
	},
	viewDiamondSpecification: function(){
		this.specification.changeToNumber(1);
	},
	parsingRingSize : function(ring_size_info){
		ring_size_array = ring_size_info.split(';');
		return(ring_size_array[0]);
	},
	parsingDiamondCarat: function(diamond_info){
		diamond_info_array = diamond_info.split(';');
		for(i=0; i<diamond_info_array.length; i++){
			if(diamond_info_array[i].indexOf('crw=')>=0){
				return(diamond_info_array[i].replace('crw=', ''));
			}
		}
	},
	buy : function(){
		showLoading(this.config.priceBlock);
		$(this.config.ringPriceFormName).send({onStateChange:this.config.onStateBuy, onComplete:this.config.onCompleteBuy});
	},
	goPanic:function(room){
		switch(room){
			case 'metal'	:
			case 'size'		:this.viewRingSpecification(); break;
			case 'model'	:
			case 'diamond'	:this.viewDiamondSpecification(); break;
		}
	},
	getProductPrice : function (mode){
		showLoading(this.config.priceBlock);
		new Ajax(this.config.priceURL, {
			method:'get',
			data:'products_id='+on_products_id+'&get='+mode,
			update: this.config.priceBlock,
			evalScripts: true,
			onComplete: function(){
				this.goPanic(mode);
			}.pass('', this)
		}).request();
	},
	updatePrice : function (mode){
		switch(mode){
		case 'model': populate_attributes(this.config.ringModelFormName);break;
		case 'metal': populate_attributes(this.config.ringMetalFormName);break;
		case 'size'	: populate_attributes(this.config.ringSizeFormName);break;
		default://size
			populate_attributes(this.config.ringSizeFormName);
			break;
		}
		this.getProductPrice(mode);
	},
	modifySize :function(selection_name, action){
		this.modify(this.config.ringSizeFormName, selection_name, action, 'ring');
		this.updatePrice('size');
	},
	modifyMetal :function(selection_name, attribute){	
		this.modify(this.config.ringMetalFormName, selection_name, '+', attribute);
		this.updatePrice('metal');
	},
	modifyModel :function(checkbox, selection_name){
		attribute='polos';
		if(checkbox.checked)attribute='biasa';
		this.modify(this.config.ringModelFormName, selection_name, '', attribute);
		this.updatePrice('model');
	},
	modify : function(form_name, selection_name, action, attribute){
		inner_text = '';
		if(typeof(document.forms[form_name].elements[selection_name])!='undefined'){
			if(action==''){
				selection = document.forms[form_name].elements[selection_name];
				options_length = selection.length;
				for(i=0;i<options_length;i++){
					option_value=selection.options[i].text.replace(';def=true', '').replace(';def=false', '').replace(/ /g, '');
					attribute = attribute.replace(/ /g, '');
					if(option_value==attribute){
						selection.selectedIndex = i;
						break;
					}
				}
			}else{
				selection = document.forms[form_name].elements[selection_name];
				options_length = selection.length;
				selected_index = selection.selectedIndex;
				switch(action){
					case '+':
						selected_index++;				
						break;

					case '-':
						selected_index--;
						break;
				}
				if(selected_index>=options_length){
					if(attribute.indexOf('metal')!=-1){
						selected_index = 0;
					}else{
						selected_index = options_length -1;
					}
				}
				if(selected_index<0) selected_index = 0;
				selection.selectedIndex=selected_index;
				//diamond and ring size change use arrow button 
				if(selected_index==options_length-1){
					if ((x=$('plus_'+selection_name))!=null){x.src=this.config.ringSizePlusOff}
				}else{
					if ((x=$('plus_'+selection_name))!=null){x.src=this.config.ringSizePlusOn}
				}
				if(selected_index==0){
					if ((x=$('min_'+selection_name))!=null){x.src=this.config.ringSizeMinOff}
				}else{
					if ((x=$('min_'+selection_name))!=null){x.src=this.config.ringSizeMinOn}
				}

				switch(attribute){
					case 'ring':
						inner_text = this.parsingRingSize(selection.options[selected_index].text);
						if ((x=$('text_'+selection_name))!=null){x.innerHTML='<b>'+inner_text+'</b>';}
						break;
					case 'diamond':
						inner_text = this.parsingDiamondCarat(selection.options[selected_index].text);
						if ((x=$('text_'+selection_name))!=null){x.innerHTML='<b>'+inner_text+' ct</b>'}
						break;
					case 'metalmale':
						selectedValue=(selection.options[selected_index].text).replace(/\s+/g,'');
						selectedPane='';
						for(i=0;i<this.metalMale.panes.length;i++){
							metalValue=this.metalMale.panes[i].innerHTML.replace(/\s+/g,'');
							if(selectedValue.indexOf(metalValue)!=-1){
								selectedPane=i;
							}
						}
						this.metalMale.changeToNumber(selectedPane);
						break;
					case 'metalfemale':
						selectedValue=(selection.options[selected_index].text).replace(/\s+/g,'');
						selectedPane='';
						for(i=0;i<this.metalFemale.panes.length;i++){
							metalValue=this.metalFemale.panes[i].innerHTML.replace(/\s+/g,'');
							if(selectedValue.indexOf(metalValue)!=-1){
								selectedPane=i;
							}
						}
						this.metalFemale.changeToNumber(selectedPane);
						break;
				}
			}
		}
	}
});

function showLoading(div){
	divObj = $(div);
	img = new Element('img', {'src': 'images/loading.gif', 'styles': {'position':'absolute', 'width': 32, 'height': 32, 'left':'50%','top':'50%', 'marginLeft':'-16px', 'marginTop':'-16px'}}).injectInside(divObj);
}