var lightBox;
var middleLightBox;
var jobLightBox;
var smallerLightBox;
var videoLightBox;
var smallestLightBox;
var termsLightBox;
var editorBox;
var flyBox;
//**********************************************************************
var translationRequest = new Request.HTML({
    url: '/AjaxLangUpdate.php',
    
    onSuccess: function(html){
        alert("content updated, refresh the page to load the new translation");
        editorBox.dispose();
    },
    onFailure: function(){
        alert("fail to update content, please try again");
    }
});

var submitTranslation = function(tagName){
    editorBox.whiteContent.addClass('ajax-loading-large');
    translationRequest.post({
        'tagName': tagName,
        'def': $('translationInput').value
    });
};
//**********************************************************************


//**********************************************************************

//**********************************************************************
var showItemIndex = $chk(showItemIndex) ? showItemIndex : 0;

window.addEvent('domready', function(){
    //add by york
    if ($chk($('subscribe')) && $('accordion')) {
		
        showItemIndex = ($('accordion').getElements('div.element').length-1);

		var h3s = $('cntRight').getElements('h3.toggler');
		h3s.each(function(e){
			e.setStyle('color','#6d6d6d');			
		})
		$('scrib').setStyle('color','#000000');
		
	}
    //end
    if ($chk($('accordion'))) {
        var myAccordion = new Accordion('h3.toggler', 'div.element', {
            show: showItemIndex,
            //display: showItemIndex,
            opacity: false,
            fixedHeight: $('accordion').getStyle('height'),
            onActive: function(toggler, element){
				
				
				if($chk($('groupImages'))){
					if(toggler.getAttribute('flag')==2){
						if($('groupImages').getStyle('display')=='none'){
							hiddenAllCollection();
						}
						$('groupImages').setStyle('display','block');
					}else if(toggler.getAttribute('flag')==1){
						
						$('groupImages').setStyle('display','block');
					}else{
						$('groupImages').setStyle('display','none');
					}
					var eimgs = element.getElements('img');
					eimgs.forEach(function(e){
						var src2 = e.getAttribute('src2');
						if(src2.length>2){
							e.setAttribute('src',src2);
							e.setAttribute('src2','');
						}
					});
				}
				
                toggler.morph({
                    'color': '#000000'
                });
				
				
            },
            onBackground: function(toggler, element){
                toggler.morph({
                    'color': '#6d6d6d'
                });
            }
        });
    }
    //**********************************************************************
/*    if ($chk($('sign_in_up'))) {
        if (document.form.level1[0].checked) {
            document.getElementById('new_customer').style.display = "inline";
            document.getElementById('old_customer').style.display = "none";
        }
        else 
            if (document.form.level1[1].checked) {
                document.getElementById('new_customer').style.display = "none";
                document.getElementById('old_customer').style.display = "inline";
            }
            else {
                document.getElementById('new_customer').style.display = "none";
                document.getElementById('old_customer').style.display = "none";
            }
    }*/
    //***************************************************************************************
    if ($chk($('address_checkBox'))) {
        if (!document.getElementById('address_checkBox').checked) {
            document.getElementById('phone_1').style.display = "none";
            document.getElementById('phone_2').style.display = "none";
            document.getElementById('phone_3').style.display = "none";
            document.getElementById('phone_4').style.display = "none";
            if ($chk($('cust_email_1'))) {
                document.getElementById('cust_email_1').style.display = "none";
                document.getElementById('cust_email_2').style.display = "none";
                document.getElementById('cust_email_3').style.display = "none";
            }
        }
        else {
            document.getElementById('phone_1').style.display = "block";
            document.getElementById('phone_2').style.display = "block";
            document.getElementById('phone_3').style.display = "block";
            document.getElementById('phone_4').style.display = "block";
            if ($chk($('cust_email_1'))) {
                document.getElementById('cust_email_1').style.display = "block";
                document.getElementById('cust_email_2').style.display = "block";
                document.getElementById('cust_email_3').style.display = "block";
            }
        }
    }
    
    if ($chk($('up_checkBox'))) {
        if (document.getElementById('up_checkBox').checked) {
            document.getElementById('oldAddBox').style.display = "block";
            document.getElementById('newAddBox').style.display = "none";
        }
        else {
            document.getElementById('oldAddBox').style.display = "none";
            document.getElementById('newAddBox').style.display = "block";
        }
    }
    
    //**********************************************************************
    if ($chk($('shopShower'))) {
        var shower = $('shopShower');
        var wrapper = new Element('div', {
            'styles': {
                'height': shower.getStyle('height'),
                'width': shower.getStyle('width'),
                'position': 'relative'
            }
        });
        wrapper.injectAfter(shower).adopt(shower);
        
        if ($chk($('pageContent_FullShower'))) {
            shower.setStyles({
                "height": 125,
                "top": -100
            });
        }
        else {
            shower.setStyles({
                "height": 25,
                "top": 0
            });
            shower.set("morph", {
                duration: 'long',
                transition: 'bounce:out'
            });
            shower.addEvents({
                mouseenter: function(event){
                    this.morph({
                        'height': 125,
                        'top': -100
                    });
                },
                mouseleave: function(event){
                    this.morph({
                        'height': 25,
                        'top': 0
                    })
                }
            });
        }
    }
    //**********************************************************************
    if ($chk($('myOtherElement'))) {
        $('myOtherElement').addEvents({
            mouseover: function(){
                // Always sets the duration of the tween to 1000 ms and a bouncing transition
                // And then tweens the height of the element
                this.set('tween', {
                    duration: 900,
                    transition: Fx.Transitions.Quint.easeOut // This could have been also 'bounce:out'
                }).tween('height', '120px');
                $('blockbox').setStyle('background-color', '#000');
                //$('blockbox').setStyle('border','1px solid white');
                //this.setStyle('border','1px solid white');
                //this.setStyle('opacity','0.5');
                //this.setStyle('position','absolute');
                //this.setStyle('z-index','999');
                //alert(this.getStyles('z-index','position'));
            },
            mouseleave: function(){
                // Resets the tween and changes the element back to its original size
                this.set('tween', {}).tween('height', '15px');
            }
        });
    }
    
    //**********************************************************************
    if ($chk($('formAddress'))) {
        var panel = $('formAddress');
        panel.setStyles({
            'position': 'relative',
            'overflow': 'hidden'
        });
        var addressMark = $('addressMark');
        var panelHeight = panel.getStyle('height').toInt();
        var panelWidth = panel.getStyle('width').toInt();
        var markHeight = addressMark.getStyle('height').toInt();
        
        var wrapper = new Element('div', {
            'styles': {
                'position': 'relative',
                'height': markHeight,
                'width': panelWidth
            }
        });
        
        wrapper.injectAfter(panel).adopt(panel);
        
        if (formAddressPanelOpen) {
            panel.setStyles({
                'top': markHeight - panelHeight,
                'height': panelHeight
            });
        }
        else {
            panel.setStyles({
                "top": 0,
                "height": markHeight
            });
        }
        
        
        panel.set("morph", {
            duration: 'long',
            transition: 'sine:out'
        });
        addressMark.addEvents({
            click: function(event){
                if (formAddressPanelOpen) {
                    formAddressPanelOpen = false;
                    panel.morph({
                        'top': 0,
                        'height': markHeight
                    });
                    //					addressMark.setStyle("backgroundColor", "black");
                }
                else {
                    formAddressPanelOpen = true;
                    panel.morph({
                        'top': markHeight - panelHeight,
                        'height': panelHeight
                    });
                    //					addressMark.setStyle("backgroundColor", "#999");
                }
            }
        });
    }
    //********************************************************************
    
    //********************************************************************
    //The product sliding effect
    if (kwickShower) {
        var szNormal = 64, szSmall = 54, szFull = 200;
        var szOpa = 1;
        var kwicks = $$("#showerContentGroup ul li");
        var kwickQty = kwicks.length;
        var cnFull = (szNormal) * kwickQty > (szSmall) * (kwickQty - 1) + szFull ? (szNormal) * kwickQty : (szSmall) * (kwickQty - 1) + szFull;
        $$("#showerContentGroup ul").setStyle('width', cnFull + 5);
        var fx = new Fx.Elements(kwicks, {
            wait: false,
            duration: 500,
            transition: Fx.Transitions.Expo.easeOut
        });
        kwicks.each(function(kwick, i){
            kwick.setStyles({
                "width": szNormal,
                "opacity": szOpa
            });
            kwick.setStyle("opacity", szOpa);
            kwick.addEvent("mouseenter", function(event){
                var o = {};
                o[i] = {
                    width: [kwick.getStyle("width").toInt(), szFull],
                    opacity: [szOpa, 1]
                };
                kwick.setStyle("backgroundColor", "#ddd");
                kwicks.each(function(other, j){
                    if (i != j) {
                        var w = other.getStyle("width").toInt();
                        var opc = other.getStyle("opacity");
                        if (w != szSmall || opc != szOpa) {
                            o[j] = {
                                width: [w, szSmall],
                                opacity: [opc, szOpa]
                            };
                            other.setStyle("backgroundColor", "transparent");
                        };
                                            }
                });
                fx.start(o);
            });
            
            kwick.addEvent("mouseleave", function(event){
                var o = {};
                kwicks.each(function(kwick, i){
                    o[i] = {
                        width: [kwick.getStyle("width").toInt(), szNormal],
                        opacity: [kwick.getStyle("opacity"), szOpa]
                    };
                    kwick.setStyle("backgroundColor", "transparent");
                });
                fx.start(o);
            });
            
            kwick.addEvent("click", function(event){
            })
        });
    }
    //End function for sliding
    //********************************************************************
    
    // move image
    //********************************************************************
   /* if (kwickShower) {
        var prev = $('prev');
        prev.addEvent("click", function(event){
            var ee = $$("#showerContentGroup ul");
            var p = ee[0].getStyle("left").toInt();
            if (p !== 0) {
                p = p + 75;
                ee[0].setStyle('left', p);
            }
        });
        var next = $('next');
        next.addEvent("click", function(event){
            var e = $$("#showerContentGroup ul li");
            var q = e.length;
            l = ((e.length - 1) - 4) * 76;
            var ee = $$("#showerContentGroup ul");
            var p = ee[0].getStyle("left").toInt();
            p = (p ? p : 0);
            alert(p);
            if (p !== -l && (e.length - 1) > 5) {
                p = p - 75;
                ee[0].setStyle('left', p);
            }
        });
    }
    */
    //end
    //***************************************************************************
    
    
    //********************************************************************
    //The light box effect
    
    //**********************************************************************
    
    var y = Math.floor((screen.availHeight - (400 || screen.height)) / 2) - (screen.height - screen.availHeight);
    var x = Math.floor((screen.availWidth - (800 || screen.width)) / 2) - (screen.width - screen.availWidth);
    lightBox = new LightBox($('pageContainer'));
    lightBox1 = new LightBox($('pageContentFixer'), {
        height: 400,
        width: 800,
        top: y,
        left: x,
        followMouse: true,
        NoMouse: true
    });
    lightBox2 = new LightBox(document.body, {
    	height: 495,
        width: 910,
        top: $('pageContentFixer').getPosition().y + (document.getScrollSize().y-$('backgroundFixer').getSize().y)/2,
        left: $('pageContentFixer').getPosition().x,
        reversed: true,
        mask: true,
        followMouse: true,
        NoMouse: true
    });
    lightBox3 = new LightBox($('pageContentFixer'), {
        height: 493,
        width: 700,
        left: (900-700)/2,
        followMouse: true,
        NoMouse: true
    });
    lightBox4 = new LightBox($('pageContentFixer'), {
        height: 493,
        width: 900,
        left: 0,
        followMouse: true,
        NoMouse: true
    });
	
    middleLightBox = new LightBox($('pageContentFixer'), {
        height: 390,
        width: 750,
        followMouse: true,
        centerposition: true
    });
    jobLightBox = new LightBox($('pageContentFixer'), {
        height: 370,
        width: 650,
        top: 68,
        left: 34,
        followMouse: true,
        NoMouse: true
    });
    jobLightBox1 = new LightBox($('pageContentFixer'), {
        height: 280,
        width: 420,
        top: 90,
        left: 130,
        followMouse: true,
        NoMouse: true
    });
    smallerLightBox = new LightBox($('pageContentFixer'), {
        height: ((location.href.indexOf('media.php')==-1)?335:395),
        width: 535,
        followMouse: true
    });
    videoLightBox = new LightBox($('pageContentFixer'), {
        height: 355,
        width: 540,
        followMouse: true
    });
    smallestLightBox = new LightBox($('pageContentFixer'), {
        height: 235,
        width: 535,
        followMouse: true
    });
    termsLightBox = new LightBox($('pageContentFixer'), {
        height: 335,
        width: 535,
        followMouse: true
        //adsoluteFollowMouse: true
    });
    editorBox = new LightBox($('pageContentFixer'));
    flyBox = new FlyBox($('flyBox'));
    //**********************************************************************
    
    var lightSources = $$('.lightBoxSrc');
    lightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            lightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    
    
    var lightSources1 = $$('.lightBoxSrc1');
    lightSources1.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            lightBox1.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var lightSources2 = $$('.lightBoxSrc2');
    lightSources2.each(function(ls, i){
        ls.addEvent("click", function(event){
        	var scrollSize = window.getScrollSize();
        	if($('qbOverlay'))
        	$('qbOverlay').setStyles({
				opacity: 0.8,
				display: "block",
				width: scrollSize.x,
				height: scrollSize.y
			});
		
            var e = new Event(event);
            lightBox2.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var lightSources3 = $$('.lightBoxSrc3');
    lightSources3.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            lightBox3.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
	
    var lightSources4 = $$('.lightBoxSrc4');
    lightSources4.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            lightBox4.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
	   
    var middleLightSources = $$('.middleLightBox');
    middleLightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            middleLightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var jobLightSources = $$('.jobLightBox');
    jobLightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            jobLightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var jobLightSources1 = $$('.jobLightBox1');
    jobLightSources1.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            jobLightBox1.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    
    var smallerLightSources = $$('.smallerLightBoxSrc');

    smallerLightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            smallerLightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
	
	
    var videoLightSources = $$('.videoLightBoxSrc');
    videoLightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            videoLightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var smallestLightSources = $$('.smallestLightBoxSrc');
    smallestLightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            smallestLightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var termsLightSources = $$('.termsLightBoxSrc');
    termsLightSources.each(function(ls, i){
        ls.addEvent("click", function(event){
            var e = new Event(event);
            termsLightBox.show({
                'sourceId': ls.getAttribute("sourceId"),
                'sType': ls.getAttribute("sType"),
                'mousePos': e.page,
                'size': ls.getAttribute("size")
            });
        });
    });
    
    var langTag = $('pageContainer').getElements("[lt!='']");
    langTag.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
                });
            }
        })
    });
    
    var flySources = $$('.flyBoxSrc');
    flySources.each(function(fb, i){
        fb.addEvent("click", function(event){
            var e = new Event(event);
            flyBox.show();
        })
    });
    //********************************************************************
    
    addSliders();
    
    
    
    
    //********************************************************************
    //	var myAccordion = new Accordion($('accordion'), 'div.downloadCategory', 'div.item', 
    //	{
    //		display:5,
    //		opacity: false,
    //		alwaysHide:true,
    //		onActive: function(toggler, element){},
    //		onBackground: function(toggler, element){},
    //		onComplete: function(){}
    //	});
    //********************************************************************
    
    //**********************************************************************
    centerPage(true);
    window.addEvent('resize', function(){
        centerPage(false);
    });
    //**********************************************************************
    
    var fadingBorders = $$(".fadingBorder");
    var responsors = $$(".fadingBorder .responsor");
    
    responsors.each(function(r, i){
        r.setStyle('opacity', 0);
    });
    
    fadingBorders.each(function(fb, i){
        fb.addEvent('mouseover', function(event){
            this.set('morph', {
                duration: 'short'
            });
            this.morph({
                borderColor: '#000'
            });
            responsors[i].set('morph', {
                duration: 'short'
            });
            responsors[i].morph({
                opacity: 1
            });
        })
        fb.addEvent('mouseout', function(event){
            this.morph({
                borderColor: '#fff'
            });
            responsors[i].morph({
                opacity: 0
            });
        })
    });
    
    ////////////////////////////////////////////////////////////////////////////////////////


});
//End window event preload
//********************************************************************