function centerPage(hidePage) {
	if(window.getHeight() >= 602) {
		$('pageContainer').setStyle('marginTop', (window.getHeight()-604)/2);
		$('pageContainer').setStyle('marginBottom', (window.getHeight()-604)/2);
	}	else {
		$('pageContainer').setStyle('marginTop', 0);
		$('pageContainer').setStyle('marginBottom', 0);
	}
	if(hidePage) {
		$('pageContainer').setStyle('opacity', 1);
		$('backgroundFixer').setStyle('opacity', 1);
	}
}

function preloadImages(iArray) {
	var counter = 0;
	iArray.each(function(img, i) {
		img.addEvent("load", function(){
			counter++;
			alert(counter);
		});
	});
//	while(counter != iArray.length)
//	{delay(500);}
	return true;
}

var LightBox = new Class({
	initialize: function(el, ops){
		this.ops = ops || {};
		
		this.element = $(el);
		
		this.lightBoxContainer = new Element('div', {
			'class': 'lightBoxContainer'
		});
		this.blackMask = new Element('div', {
			'class': 'blackMask',
			'styles': {'opacity': this.ops.reversed?'1':'0.95', 'background-color':this.ops.reversed?'white':''}
		});
		this.closer = new Element('div', {
			'class': 'closer',
			'tween': {duration: 'short'},
			'events': {
				'click': function(){
					this.lightBoxContainer.setStyles({
						'display': 'none',
						'opacity': 0
					});
					if(this.ops.mask && $('qbOverlay'))
						$('qbOverlay').fade("out");
				}.bind(this),
				'mouseenter': function(){
					this.tween('opacity', 1);
				},
				'mouseleave': function(){
					this.tween('opacity', 0.5);
				}
			}
		});
		this.whiteContent = new Element('div', {
			'id': 'whiteContent',
			'class': 'whiteContent'
		});
		this.whiteContent.set('tween', {duration: 'long', transition: 'sine:out'});
		this.lightBoxContainer.adopt(this.blackMask, this.whiteContent, this.closer);
		this.element.adopt(this.lightBoxContainer);
		this.width = this.ops.width || this.element.getStyle('width').toInt() - 2; //minus 2px for borders
		this.height = this.ops.height || this.element.getStyle('height').toInt() - 2; //minus 2px for borders
		this.top = this.ops.top;
		this.left = this.ops.left;
		this.closer.setStyle('left', this.width - this.closer.getStyle('width').toInt());
		if(this.ops.reversed)
			this.closer.setStyle('background', 'url(/QuickBox/images/close_2.png) no-repeat center');
	},
	
	show: function(options) {
		var c = this.closer; 
		var wc = this.whiteContent;
		c.parentNode.setStyle('margin-top',Math.max(document.documentElement.scrollTop,document.body.scrollTop)+'px');
		c.setStyle('display', 'none');
		wc.setStyle('display', 'none');
		wc.innerHTML = "";
		this.lightBoxContainer.set('morph', {
			duration: 500,
			transition: 'sine:out',
			onComplete: function(){
				c.setStyle('opacity', 0.5);
				wc.setStyle('opacity', 1);
				c.setStyle('display', 'block');
				wc.setStyle('display', 'block');
				wc.addClass('ajax-loading-large');
				var urladdr='../ajaxLightSource.php';
				var request = new Request.HTML({
					url:urladdr,
					onSuccess: function(html){
						wc.setStyle('opacity', 0);
						wc.adopt(html);						
						wc.removeClass('ajax-loading-large');
						
						if(options.sType == "productDetail")
						{
							var sv = new sliderView({
								viewHandle:$$("#viewHandle div"),
								viewBox: $('viewBox'),
								handleMask: $('handleMask')
							});
						}
						else// if(options.sType == "press" || options.sType == "order")
						{
							addSliders();
							addEditorInBox();
						}
						wc.tween('opacity', [0, 1]);
					},
					onFailure: function() {
						wc.removeClass('ajax-loading');
						wc.set('text', 'The request failed.');
						wc.set('tween', {duration: 'long', transition: 'sine:out'});
						wc.tween('opacity', [0, 1]);
					}
				});
				request.get({sourceId: options.sourceId, sType: options.sType});
			}
		});
		this.lightBoxContainer.setStyle('display', 'block');

			
		if(!this.ops.followMouse)	{
			this.lightBoxContainer.morph({
				'width': [0, this.width],
				'height': [0, this.height],
				'opacity': [0, 1],
				'top': [options.mousePos.y - this.element.getPosition().y,  0],
				'left': [options.mousePos.x - this.element.getPosition().x, 0]
			});
		}
		else {
			//			alert(options.mousePos.x);
//			alert(this.element.getPosition().x);
			if( this.ops.adsoluteFollowMouse ) {
				this.lightBoxContainer.morph({
					'width': [0, this.width],
					'height': [0, this.height],
					'opacity': [0, 1],
					'top': [options.mousePos.y - this.element.getPosition().y, options.mousePos.y - this.height - 180 ],
					'left': [options.mousePos.x - this.element.getPosition().x, 175]
				});		
			}	else	{
				this.lightBoxContainer.morph({
					'width': [0, this.width],
					'height': [0, this.height],
					'opacity': [0, 1],
					'top': [options.mousePos.y - this.element.getPosition().y, 45],
					'left': [options.mousePos.x - this.element.getPosition().x, 175]
				});
			}
			if (this.ops.NoMouse) {
				this.lightBoxContainer.morph({
				'width': [0, this.width],
				'height': [0, this.height],
				'opacity': [0, 1],
				'top': [this.top],
				'left': [this.left]
				})	
			};
//			alert(options.mousePos.y +" - "+ this.width);
		}
	},
	dispose: function() {
		this.lightBoxContainer.setStyles({
			'display': 'none',
			'opacity': 0
		});
	}
});

var FlyBox = new Class({
	initialize: function(el){
		this.box = $chk(el) ? el : new Element('div');
		this.box.setStyles ({
			'border': '5px solid white',
			'backgroundColor': 'black',
			'display': 'none',
			'opacity': 0,
			'position': 'absolute',
			'left': 150,
			'padding': 20
		});
		this.box.set('morph', {
			duration: 1200,
			transition: 'sine:out',
			onComplete: function() {}
		});
	},
	
	show: function () {
		this.box.setStyle('display', 'block');
		this.box.morph({
			'opacity': [1, 0]
		});
	}
});



var sliderView = new Class({
	initialize: function(options){
		this.viewBox = options.viewBox;
		this.viewHandle = options.viewHandle;
		this.addHandlers(this.viewHandle);
		this.viewWidth = options.viewWidth || 320;
		this.viewHeight = options.viewHeight || 320;
		this.viewMask = new Element('div',{
			'styles': {
				'position': 'relative',
				'width': this.viewWidth,
				'height': this.viewHeight,
				'overflow': 'hidden'
			}
		});
		this.viewBox.setStyles({
			'left': 0
		});
		this.handleMask = options.handleMask.setStyles({
			'left': -365,
			'opacity': 0.7
		});
		this.viewMask.inject(this.viewBox, 'after').adopt(this.viewBox);
		
		this.viewBox.set('tween', {duration: 800, transition: 'sine:out'});
		this.handleMask.set('tween', {duration: 800, transition: 'sine:out'});
	},
	
	move: function(index){
		//alert(index);
		this.viewBox.tween('left', -(this.viewWidth*index));
		this.handleMask.tween('left', -365+(60*index));
	},
	
	addHandlers: function(handles){
		//alert(handles.length);
		for(var i=0;i<handles.length;i++){
			handles[i].addEvent("click", this.move.bind(this, [i]));
		}
	}
});



function addSliders() {
	var slidingContent = $$('.scrollbarElement');
	var roll = function(sc, per) {
		sc.scrollTo(0, (sc.getScrollSize().y-sc.getStyle('height').toInt())*per);
	}
	
	slidingContent.each(function(sc, i) {
		if(sc.getAttribute("scrollable") === "" || sc.getAttribute("scrollable") == null)
		{
			sc.setAttribute("scrollable", "added");
			
			if(sc.getScrollSize().y > sc.getStyle('height').toInt())
			{
//				alert(sc.getScrollSize().y + " : " + sc.getStyle('height').toInt())
				var wrapper = new Element('div', {
					'styles': {
						'width': sc.getStyle('width'),
						'height': sc.getStyle('height')//,'border': '1px solid red'
					}
				});
				
				var slider = new Element('div', {
					'class': 'slider',
					'styles': {
						'height': sc.getStyle('height')
					}
				});
				var knob = new Element('div', {
					'class': 'knob'
				});
				
				slider.adopt(knob);
				
				sc.setStyles({
					'width': (sc.getStyle('width')).toInt() - 25 + 'px',
					'float': 'left'
				});
				
				wrapper.injectAfter(sc).adopt(sc, slider);
				
				var stepSize = 6000/(sc.getScrollSize().y - sc.getStyle('height').toInt());
				stepSize = stepSize.toInt() > 0 ? stepSize.toInt() : 1;
				
				var sliderBar = new Slider(slider, knob, {
					steps: 200,
					wheel: true,
					mode: 'vertical',
					onChange: function(){
						roll(sc, this.step/this.steps);
					}
				}).set(0);
				//alert(navigator.userAgent);
				if( navigator.userAgent.toLowerCase().indexOf('firefox')!=-1 ){ 
					sc.addEvent('DOMMouseScroll', function(event){
						sliderBar.set(event.wheel < 0 ? sliderBar.step + stepSize : sliderBar.step - stepSize);
						event.stop();
					});
					if($('lbiframe'))
						$('lbiframe').contentWindow.addEventListener('DOMMouseScroll', function(event){
							sliderBar.set(event.detail > 0 ? sliderBar.step + stepSize : sliderBar.step - stepSize);
						}, true);
				}else{
					sc.addEvent('mousewheel', function(event){
						sliderBar.set(event.wheel < 0 ? sliderBar.step + stepSize : sliderBar.step - stepSize);
						event.stop();
					});
					if($('lbiframe')) {
					if($('lbiframe').attachEvent) // IE before version 9
						$('lbiframe').contentWindow.document.attachEvent('onmousewheel', function(event){
							sliderBar.set(event.wheelDelta < 0 ? sliderBar.step + stepSize : sliderBar.step - stepSize);
						});
					else
						$('lbiframe').contentWindow.document.addEventListener('mousewheel', function(event){
							sliderBar.set(event.wheelDelta > 0 ? sliderBar.step + stepSize : sliderBar.step - stepSize);
						}, true);
					}
				}
				
				
				
			}
		}
	});
}

function addToCart(id)
{
	var log = $('log');
	if(log.getAttribute("inproc") == "false") {
		log.setAttribute("inproc", "true");
		log.empty().addClass('ajax-loading');
		var request = new Request.HTML({
			url: '/ajaxCartControl.php',
			onSuccess: function(html) {
				log.removeClass('ajax-loading');
				log.adopt(html);
				log.setAttribute("inproc", "false");
			},
			onFailure: function() {
				log.set('text', 'The request failed.');
				log.setAttribute("inproc", "false");
			}
		});
		request.get({'action': 'add', 'prodId': id});
	}
}

function addToCart2(id)
{
	var log = $('log');
	if(log.getAttribute("inproc") == "false") {
		log.setAttribute("inproc", "true");
		log.empty().addClass('ajax-loading');
		var request = new Request.HTML({
			url: '/ajaxCartControl.php',
			onSuccess: function(html) {
				log.removeClass('ajax-loading');
				log.adopt(html);
				log.setAttribute("inproc", "false");
			},
			onFailure: function() {
				log.set('text', 'The request failed.');
				log.setAttribute("inproc", "false");
			}
		});
		request.get({'action': 'showCart', 'prodId': id});
	}
}

function showTotal()
{
	var log = $('showTotal');
	log.empty().addClass('ajax-loading-large2');
	var request = new Request.HTML({
		url: 'showTotal.php',
		onSuccess: function(html) {
			log.removeClass('ajax-loading-large2');
			log.empty();
			log.adopt(html);
		},
		onFailure: function() {
			log.removeClass('ajax-loading-large2');
			log.empty();
			log.set('text', '');
		}
	});
	document.getElementById('submitList').value=$('myForm').toQueryString();
	var myStep = document.getElementById('myStep').value;
	request.post ({'qry': $('myForm').toQueryString(),'myStep':myStep });
}

function savegroup()
{
	var log = $('con_one_2');
	log.empty().addClass('ajax-loading-large2_1');
	var request = new Request.HTML({
		url: 'orderNew_1_3_ajax.php',
		onSuccess: function(html) {
			log.removeClass('ajax-loading-large2_1');
			log.empty();
			log.adopt(html);
		},
		onFailure: function() {
			log.removeClass('ajax-loading-large2_1');
			log.empty();
			log.set('text', '');
		}
	});
	var str = document.getElementById('submitList').value;
	request.post ({'qry': str });
}


function addEditorInBox() {
	var langTagInBox = $('lightBox').getElements("[lt!='']");
	langTagInBox.each(function(lt, i) {
		lt.setStyles({
			'cursor': 'pointer',
			'color': 'green'
		});
		
		lt.addEvent('click', function(event){
	   	var c = confirm("edit the translation for the tag??");
	   	if(c) {
	   		event.stop();
	   		editorBox.show({
	    		'sourceId': lt.getAttribute('lt'),
					'sType':'tagTranslate',
					'mousePos': event.page
	   		});
	   	}
		})
	});
}

function changeButtonUrl(id) {
		$(id).setStyle( 'background', 'url(\'../image/tab_black.gif\')'); 
}

function changeMouseOut(id) {
		$(id).setStyle( 'background', 'url(\'../image/tab_grey.gif\')'); 
}
var flexibleBox = new Class({
	initialize:function(el,ops)
	{
		this.element = el;
		this.elementId = $(el);
		this.ops = ops || {};
		this.x = $chk(ops.x)?ops.x:500;
		this.y = $chk(ops.y)?ops.y:30;
		this.width = $chk(ops.width)?ops.width:500;
		this.height = $chk(ops.height)?ops.height:500;
		this.opacity = $chk(ops.opacity)?ops.opacity:1;
	},
	
	setCoordinates:function(x,y)
	{
		this.x = x;
		this.y = y;
	},
	
	setSize:function(width,height)
	{
		this.width = width;
		this.height = height;
	},
	
	setOpacity:function(opacity)
	{
		this.opacity = opacity;
	},
	
	close:function()
	{
		this.currentElement.dispose();
		this.shadowBox.dispose();
		//this.elementId.getChildren().each(function(element,index){element.dispose();});
		//this.elementId.setStyle('display','none');
	},
	
	popUp:function(ownerID)
	{
		
		var upOBJ = this;
		
		this.currentElement = new Element('div',{
		styles:{
			'position' : 'absolute',
			'background-color': 'black',
			'display':'block',
			'color':'white',
			'z-index': 3
		}});
		this.currentElement.inject(this.elementId);
		var ajaxContainer = this.currentElement;
		// this.elementId.setStyles({
			// 'position' : 'absolute',
			// 'background-color': '#777',
			// 'display':'block',
			// 'color':'black',
			// 'z-index': 3
		// });
		this.shadowBox = new Element('div',{
		styles:{
		'position':'absolute',
		'background-color': '#888'
		}
		});
		this.shadowBox.inject(this.elementId);
		
		//alert(window.innerHeight);
		//alert(window.getHeight());
		
		bgLight = new Fx.Morph(this.shadowBox,{duration:300});
		bgLight.start({
			'width':window.getWidth(),
			'height':window.getHeight(),
			'top':0,
			'left':0,
			'opacity':0
		});
		
		fxG = new Fx.Morph(this.currentElement,{
		duration: 300
		//transition: Fx.Transitions.Bounce.easeOut
		});
		fxG.start({
			'width':this.width,
			'height':[0,this.height],
			'top':this.y,
			'left':this.x,
			'opacity':this.opacity
		});
		
		title = new Element('div',
		{
			'id':'title',
			styles:{'height':50,'width':this.width,'text-align':'right'}
		});

		titleCloseIcon = new Element('img',{
				events:{click: function()
					{
						upOBJ.close();
					}},
					src:'/graphics/close_button.gif'});
		title.adopt(titleCloseIcon);
		title.inject(this.currentElement);
		elementId = this.elementId;
		autoload=this.currentElement;
		autoload.addClass('ajax-loading-large');
		var request = new Request.HTML(
		{
			url:elementId.getAttribute('pageName')+'.php',
		
			onSuccess:function(html)
			{
				ajaxContainer.adopt(html);
				autoload.removeClass('ajax-loading-large');
			},
			onFailure:function()
			{
				//alert(elementId.getAttribute('pageName')+'.php');
				alert('the request failed');	
			}
		});
		request.get({owner_ID:ownerID});
	}
});