/*
toggle switch for trace messages
------------------------------------*/
var killTraces = true
/* ======================================================================

domReady :)

=======================================================================*/
window.addEvent('domready', function(){
	//if(console){tracer=true;trace('trace messages active')}
	
	document.getElement('div').setStyles({ display: 'none' })
	/*
	Product Viewer Zoom Functions
	------------------------------------*/
	/*
	if($$('#product_viewer img').length>0){ 
		$('product_viewer').getFirst('a').inner = new Element('div').injectInside($('product_viewer').getFirst('a')).setStyles({ position: 'absolute', width:530, height:442, top: 0, left: 0, overflow: 'hidden' })
		init_pView($('product_viewer').getFirst('a'), $('product_viewer').getFirst('a').getFirst('img'), $('product_viewer') ) 
	}*/
	if($$('#product_viewer img').length>0){
		//$('product_viewer').getFirst('.detail_bar').setStyle('display', 'none')
		setupZooms($$('#product_viewer a'), '../js/mz/', 'smoothing-speed:10;zoom-position: inner;fps:30;zoom-fade:true; zoom-fade-in-speed:800; zoom-fade-out-speed:400')
	}
	/*
	Modal Popups
	------------------------------------*/
	if($$('.productspanel table').length>0){
		$$('td .hiddenPopup').each(function(el, i){
			//el.cc = new Element('div', { 'class': 'clicker' }).injectAfter(el).setStyles({ cursor: 'pointer' })
		el.Acc = el.getParent('td').getParent('tr').getElements('a')
			el.cc = el.Acc[1]
			el.cc.orig = el
			el.cc.popped=0
			el.setStyles({position: 'absolute'})
			el.fade('hide')
			el.setStyles({ display: 'block' })
			el.cc.addEvents({ 
				'click': function(e){
					e.stop()
					setPopper.delay(50, this)
				}, 
				'mouseleave': function(){
				} 
			});
		});
	}
});

/* ======================================================================

	Setup for MZ

=======================================================================*/
function setupZooms(objs, path, options){
	objs[0].path = path
	objs.each(function(el,i){
		el.img = el.getFirst('img')
		el.addEvents({ 'click': function(e){ e.stop() }, 'mouseenter': function(){} });
		el.isrc = el.img.get('src').toString();
		if(el.isrc.indexOf('noDefaultImage.gif') == -1){
		el.setStyle('cursor','crosshair')
		el.narr = el.isrc.split('_')
		el.ext = el.narr[1].split('.')
		trace('isrc: '+el.isrc+' :: ext: '+el.ext[1])
		el.nstr = el.narr[0]
		for(i=1;i<el.narr.length-1;i++){
			el.nstr = el.nstr+el.narr[i]
		}
		el.nsrc = el.nstr+'_1280.'+el.ext[1]
		el.href = el.nsrc
		el.rel= options
		el.addClass('MagicZoom')
		}
	});
	loadMZScript.delay(100, objs[0])
}
function loadMZScript(){
	trace('loadMz')
	document.body.mzReady = false
	document.body.tl_count = 0
	if(!document.body.mzCss){ document.body.mzCss = new Asset.css(this.path+'magiczoom.css', {id: 'mzStyles'}); }
	if(!document.body.mzScript){document.body.mzScript = new Asset.javascript(this.path+'magiczoom.js', {id: 'mz' })}
	
	triggerLoad.delay('500')
}
function triggerLoad(){
	trace('triggerLoad : '+document.body.tl_count)
	document.body.tl_count++
	if(document.body.mzReady==true){ MagicZoom.refresh() }
	else{triggerLoad.delay('500')}
}



/* ======================================================================

Modal Popups

=======================================================================*/
function makePopup(){
	obj = this
	obj.row = obj.getParent('td').getParent('tr')
	/* obj.sib = obj.getParent('td').getParent('tr').getElement('a') */
	obj.Asib = obj.getParent('td').getParent('tr').getElements('a')
	obj.sib = obj.Asib[1]
	obj.price = obj.getParent('td').getParent('tr').getElement('.productPrice').get('text')
	obj.ttle = obj.sib.get('text')
	obj.desc = obj.sib.get('title')
	obj.prodCode = obj.get('rel')
	trace('obj.prodCode : '+obj.prodCode)
	obj.imgInject = '<img src="../images/'+obj.prodCode+'_190.jpg" alt="" />'

	if(obj.desc==null || obj.desc=="" || obj.desc==" "){obj.desc="No information available"}
	obj.linkto = obj.sib.get('href')
	obj.popup = obj.orig
	if(obj.popped<1){
		var popup = obj.popup
		var lpos = (obj.getCoordinates().left)+50
		var tpos = obj.getCoordinates().top-(popup.getStyle('height').toInt()/2)
		//popup.setStyles({ position: 'absolute', left: lpos, top: tpos })
		popup.setStyles({ position: 'absolute'})
		popup.content = '<div class="head" style="float:left">&nbsp;</div><p class="closeButton">Close</p><div class="clear"></div><div class="imgHolder">'+obj.imgInject+'</div><h2>'+obj.ttle+'</h2><p>'+obj.desc+'</p><p><strong>Code</strong> '+obj.prodCode+'<div class="popBase">'+obj.price+'<span class="addToCartSpan">'+popup.get('html')+'</span></div><div class="base"></div>'
		popup.row = obj.row
		popup.addClass('popper')	
		popup.set('html', popup.content)

		popup.getElement('.productgridaddtocartbutton').set('value', 'Add to basket')
		popup.getElement('.head').setStyle('float', 'none')
		popup.getElement('.imgHolder').getElement('img').fade('hide')
		popup.checkCount = 0
		checkImg.delay(1000, popup)
		
		document.getElement('.addToCartSpan').addEvents({ 
			'click': function(){
				obj.orig.fireEvent('click')
			}, 
			'mouseleave': function(){} 
		});
		popup.getFirst('p').addEvents({ 
			'click': function(){
				this.parent = this.getParent('.popper')
				this.parent.fade(0)
				if($('overlay')){$('overlay').fade(0)}
				
				this.parent.mFx.start('background-color', '#D7EAEA', '#F7F8F8');
				killThis.delay(100, this.parent)
			}, 
			'mouseenter': function(){

			}, 
			'mouseleave': function(){  } 
		});
		obj.popup.mFx = new Fx.Tween(obj.popup.row);
		obj.popup.mFx.start('background-color', '#F7F8F8', '#D7EAEA');
	}
	obj.popped++
	trace(obj.popped)
	centerDiv(obj.popup)
	fadeObj(obj.popup)
	obj.popup.fade('hide')
	obj.popup.fade('toggle');
	createOverlay(obj.popup)
}
function fadeObj(obj){
	obj.set('tween',{
        onComplete:function(){
            if (obj.getStyle('opacity') == 0) {
                obj.setStyle('display','none');
            }
        },
        onStart: function() {
            if (obj.getStyle('opacity') == 0) {
                obj.setStyle('display','block');
            }
        }
    })
}
/*		Setup iterative loop to check for image 5 times if it still returns null, use default		*/
function checkImg(){
	var fnar = this.getElement('.imgHolder').getElement('img').width
	if (fnar<100){
		//
		if(this.checkCount==5){
			this.getElement('.imgHolder').getElement('img').src='../images/noDefaultImage_190.jpg'
			this.getElement('.imgHolder').getElement('img').fade(1)
			this.getFirst('.imgHolder').setStyle('background', 'none')
		}
		else{
			/* this.getFirst('h2').set('text', this.checkCount) */
			this.checkCount++
			checkImg.delay(1000, this)
		}
	}
	else{
		this.getElement('.imgHolder').getElement('img').fade(1)
		this.getFirst('.imgHolder').setStyle('background', 'none')
	}
}
function setPopper(){
	if($$('body .popper').length>0){
		$$('body .popper').each(function(el, i){
			el.fade(0)
			el.mFx.start('background-color', '#F7F8F8');
			killThis.delay(100, el)
		});
	}
	makePopup.delay(150, this)
}
function clearPopper(){
	if($$('body .popper').length>0){
		$$('body .popper').each(function(el, i){
			el.fade(0)
			if($('overlay')){$('overlay').fade(0)}
			el.mFx.start('background-color', '#F7F8F8');
			killThis.delay(100, el)
		});
	}
}
function killThis(){
	this.fade(0)
	this.stopCheck=true
	if($('overlay')){$('overlay').dispose()}
}

function centerDiv(obj){
	var x=window.getScrollSize().x
	var y=window.getScrollSize().y
	obj.sLeft = (x-obj.getSize().x)/2 + 'px';
	obj.sTop = window.getScroll().y+((window.getSize().y/2)-(obj.getSize().y/2))
	obj.setStyles({left: obj.sLeft,top: obj.sTop})
}

/*
Create Overlay
====================================================================== */
function createOverlay(obj){
	var overlay = new Element('div').injectInside(document.body).setStyles({ position: 'absolute', width: '100%', height: window.getScrollSize().y, top: 0, left: 0, overflow: 'hidden', background: '#303030' }).fade('hide')
	overlay.setStyle('z-index', '1100');
	overlay.id = 'overlay'
	overlay.fade(.5)
	overlay.addEvents({ 
		'click': function(){
			clearPopper()
		},
		'mouseleave': function(){} 
	});
	document.addEvents({ 
		'keydown': function(event){
			if(event.key=='esc'){clearPopper();window.removeEvents('keydown')}
		},'mouseleave': function(){} 
	});
	
	obj.pos = window.getScroll().y
	obj.stopCheck=false
	checkPos.delay(400, obj)
	
}

function checkPos(){
	var npos = window.getScroll().y
	if(npos!=this.pos){
		trace('trigger : '+this.pos+' to '+npos)
		var y=window.getScrollSize().y
		this.sTop = window.getScroll().y+((window.getSize().y/2)-(this.getSize().y/2))
		slideBabySlide.delay(50, this)
		this.pos = npos
		this.stopCheck=true
	}
	if(this.stopCheck!=true){checkPos.delay(400, this)}
}
function slideBabySlide(){
	this.slideFx = new Fx.Tween(this, {
		link: 'cancel', 
		duration: 'normal', 
		transition: Fx.Transitions.Cubic.easeInOut
	});
	this.slideFx.start('top', this.sTop);
	this.stopCheck=false
	checkPos.delay(400, this)
}

/* ======================================================================

Product viewer - Zoom Functions

=======================================================================*/
function init_pView(holder, img, pholder){
	//	set src urls for each zoom state
	
	trace('>>>'+holder)
	holder.img = img
	holder.addEvents({ 'click': function(e){ e.stop() }, 'mouseleave': function(){} });
	holder.isrc = img.get('src').toString();
	//holder.nsrc = holder.isrc.substring(0,holder.isrc.length-7) +'1200'+holder.isrc.substring(holder.isrc.length-4, holder.isrc.length)
	holder.narr = holder.isrc.split('_')
	holder.ext = holder.narr[1].split('.')
	trace('isrc: '+holder.isrc+' :: ext: '+holder.ext[1])
	holder.nstr = holder.narr[0]
	for(i=1;i<holder.narr.length-1;i++){
		holder.nstr = holder.nstr+holder.narr[i]
	}
	holder.nsrc = holder.nstr+'_1200.'+holder.ext[1]
	trace('nssrc: '+holder.nsrc)
	//	create zoom button
	pholder.getFirst('.detail_bar').setStyle('z-index', '500');
	pholder.getFirst('.detail_bar').setStyle('position', 'relative');
	pholder.getFirst('.detail_bar').setStyle('zoom', '1');
	holder.bar = pholder.getFirst('.detail_bar').getFirst('p').addClass('zoomin').set('text', 'Click here to zoom in >').setStyles({ position: 'absolute', top:0, left:0, cursor: 'pointer' })
	holder.bar.parent = holder;
	holder.bar.addEvents({ 'click': function(){ showZoom(this.parent) }, 'mouseleave': function(){} });
	//	make small image trigger zoom
	img.setStyles({ cursor: 'pointer' })
	img.addEvents({ 'click': function(){ showZoom(holder) }, 'mouseleave': function(){} });
	//	firstrun fix
	holder.firstrun=true
	//	go go go
	holder.pholder = pholder
	showZoom(holder)
}
function showZoom(holder){
	pholder= holder.pholder
	//	setup div to drag
	pholder.setStyles({position:'relative', overflow: 'hidden'})
	if(Browser.Engine.trident && Browser.Engine.version==4){
		pholder.setStyles({width: holder.getFirst('img').width})
	}
	holder.getFirst('img').setStyles({position:'relative', overflow: 'hidden'})
	holder.zoomed = new Element('div').injectInside(holder.inner).setStyles({ position: 'absolute', top:0, left:0, cursor: 'move' })
	//	setup zoomed img
	var titletext = 'Double click to zoom out'
	trace('width: '+holder.img.width+', height: '+holder.img.height)
	holder.inner.setStyles({ display: 'block', width: holder.img.width, height: holder.img.height })
	var zimg = new Asset.image(holder.nsrc, {id: titletext, title: titletext, onload: imgLoaded}).injectInside(holder.zoomed).fade('hide').fade(1)
	zimg.holder = holder.getFirst('img')
	zimg.setStyles({ float: 'none'})
	//	center new div
	zimg.coords = zimg.getCoordinates()
	var diffSet = ((holder.getCoordinates().width - zimg.coords.width)/2)
	trace(diffSet+' : '+zimg.left)
	holder.zoomed.setStyle('left', 0)
	//	change bar click event
	holder.bar.zoom = holder.zoomed
	holder.bar.set('text', 'Click here to zoom out >')
	holder.bar.removeEvents('click');
	holder.bar.addEvents({
		'click': function(){
			this.parent.zoomed.img.fade(0)
			this.set('text', 'Click here to zoom in >')
			setBar.delay(700, this)
		},
		'mouseleave': function(){}
	});
	//	allow close with double click on zoomed image
	holder.zoomed.bar = holder.bar
	
	//	setup dragger function
	holder.zoomed.img = zimg	
	
	holder.Dragger = new Drag.Move(holder.zoomed, {

        onDrag: function(el) {
        	//	set bounds
        	el.left = el.getStyle('left').toInt()
        	el.top = el.getStyle('top').toInt()
        	el.pwidth = el.img.holder.getCoordinates().width.toInt()
        	el.pheight = el.img.holder.getCoordinates().height.toInt()
        	//	check bounds
			if(el.left > 0){ el.setStyle('left', 0) }
			if(el.top>0){el.setStyle('top', 0)}

			//trace(el.img.width)
			if((el.left)*-1>(el.img.width-el.pwidth)){ el.setStyle('left', (el.img.width-el.pwidth)*-1) }
			if((el.top)*-1>(el.img.height-el.pheight)){ el.setStyle('top', (el.img.height-el.pheight)*-1) }
		}		
	});
	if(Browser.Engine.trident) holder.Dragger.ondragstart = function()
{ return false; }; 
	
	
	holder.zoomed.addEvents({
		'dblclick': function(){
			this.img.fade(0)
			this.bar.set('text', 'Click here to zoom in>')
			setBar.delay(700, this.bar)
		},
		'click': function(){
			holder.Dragger.attach();
		},
		'mousedown': function(){
			holder.Dragger.attach();
		},
		'mouseup': function(){
			holder.Dragger.attach();
		},
		'mouseleave': function(){}
	});
	
	
	/*
	holder.Dragger = holder.zoomed.makeDraggable({
		onComplete: function(){
			trace('done dragging');
		},onDrag: function(el) {
        	//	set bounds
        	el.left = el.getStyle('left').toInt()
        	el.top = el.getStyle('top').toInt()
        	el.pwidth = el.img.holder.getCoordinates().width.toInt()
        	el.pheight = el.img.holder.getCoordinates().height.toInt()
        	//	check bounds
			if(el.left > 0){ el.setStyle('left', 0) }
			if(el.top>0){el.setStyle('top', 0)}

			//trace(el.img.width)
			if((el.left)*-1>(el.img.width-el.pwidth)){ el.setStyle('left', (el.img.width-el.pwidth)*-1) }
			if((el.top)*-1>(el.img.height-el.pheight)){ el.setStyle('top', (el.img.height-el.pheight)*-1) }
		}
	});
	*/

	
	
	//	firstrun check
	if(holder.firstrun==true){
		holder.firstrun = false
		holder.zoomed.dispose()
		
	holder.inner.setStyles({ display: 'none' })
		holder.bar.set('text', 'Click here to zoom in >')
		setBar.delay(700, holder.bar)
	}
}
function imgLoaded(){ /* just incase */ }
function setBar(){
	// remove created img div
	
	this.parent.inner.setStyles({ display: 'none' })
	this.parent.zoomed.dispose()
	//	reset bar click event
	this.removeEvents('click');
	this.addEvents({ 'click': function(){ showZoom(this.parent) }, 'mouseleave': function(){} });
}



   
/* ======================================================================

Util Functions

=======================================================================*/

function trace(msg){
	if(!killTraces){
		if(!document.body.TracerStack){document.body.TracerStack=[]}document.body.TracerStack.push(msg)
		if(document.body.tracerEnabled){document.body.TraceOut.show(msg)}
		else if(!document.body.tracerLoad){ 
			document.body.tracerLoad = true; 
			if(!document.body.TracerScript){document.body.TracerScript = new Asset.javascript('../js/tracer/Trace.js', {id: 'Tracer' })} 
		}
	}
}