
		///FLOATING TOOL TIPS CLASS BELOW
		//
		//
		//
		var MyTips = new Class({
 
	    getOptions: function(){
		    return {
			    onShow: function(tip){
				    tip.setStyle('visibility', 'visible');
			    },
			    onHide: function(tip){
				    tip.setStyle('visibility', 'hidden');
			    },
    			
			    maxTitleChars: 30,
			    showDelay: 0,
			    hideDelay: 0,
			    className: 'tool',
			    offsets: {'x': 15, 'y': -45},
			    fixed: false,
				
			    hideTitle: true
		    };
	    },
     
	    initialize: function(elements, options){
    		    		
		    this.setOptions(this.getOptions(), options);
    		
		    // this checks for IE 5 and 6, then adds an iframe to the document to act as a shim 
		    if ((Browser.Engine.trident  && !Browser.Engine.trident5)||(Browser.Platform.mac && Browser.Engine.gecko)) { 
			    if(!$('DivShim'+this.options.className)){ 
				    var divShimProperties = {
					    'id': "DivShim"+this.options.className, 
					    //'src': "javascript: document.write('');",
					    'scrolling': "no",
					    'frameborder': 0
				    }; 
				    var divShimStyles = {
					    'position': "absolute",
					    'top': "0px",
					    'left': "0px",
					    'display': "none", 
					    'font-size': "6px", 
					    'padding': "0px"
				    }; 
				    this.frame = new Element('div').setProperties(divShimProperties).setStyles(divShimStyles);
				    this.frame.injectInside(document.body); 
			    } 
		    } 
     
    		
		    this.toolTip = new Element('div').addClass(this.options.className+'-tip').setStyles({
			    'position': 'absolute',
			    'top': '0',
			    'left': '0',
			    'visibility': 'hidden'
		    }).injectInside(document.body);
		    this.wrapper = new Element('div').injectInside(this.toolTip);
		    $each(elements, function(el){
			    this.build($(el));
		    }, this);
		    if (this.options.initialize) this.options.initialize.call(this);
	    },
     
	    build: function(el){
		    el.myTitle = el.href ? el.href.replace('http://', '') : (el.rel || false);
		    if (el.title){
			    var dual = el.title.split('::');
			    if (dual.length > 1) {
				    el.myTitle = dual[0].trim();
				    el.myText = dual[1].trim();
			    } else {
				    el.myText = el.title;
			    }
			    el.removeAttribute('title');
		    } else {
			    el.myText = false;
		    }
		    if (el.myTitle && el.myTitle.length > this.options.maxTitleChars) el.myTitle = el.myTitle.substr(0, this.options.maxTitleChars - 1) + "&hellip;";
		    el.addEvent('mouseover', function(event){
			    this.start(el);
			    this.locate(event);
		    }.bindWithEvent(this));
		    if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
		    el.addEvent('mouseout', this.end.bindWithEvent(this));
		    ;
	    },
     
	    start: function(el){
	    
		    this.wrapper.set('html','');
		   
		    if (el.myTitle && !this.options.hideTitle){
			    new Element('span').injectInside(
				    new Element('div').addClass(this.options.className+'-title').injectInside(this.wrapper)
			    ).set('html',el.myTitle);
		    }
		    if (el.myText){
			    new Element('span').injectInside(
				    new Element('div').addClass(this.options.className+'-text').injectInside(this.wrapper)
			    ).set('html',el.myText);
		    }
		    el.setStyle('z-index',15000);
		    
		    $clear(this.timer);
		    
		    this.timer = this.show.delay(this.options.showDelay, this);
		    //Attach fixPNG method during transition
		    if(Browser.Engine.trident){   
                this.fixPNG();
            }
	    },
     
	    end: function(event){
		    $clear(this.timer);
		    this.timer = this.hide.delay(this.options.hideDelay, this);
		    event.stop();
		    
	    },

	    locate: function(event){
		    var win = {'x': $('quicklinks').getWidth(), 'y': $('quicklinks').getHeight()};
		    var scroll = {'x': $('quicklinks').getScrollLeft(), 'y': $('quicklinks').getScrollTop()};
		    var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
		    var prop = {'x': 'left', 'y': 'top'};
		    for (var z in prop){
			    var pos = event.page[z] + this.options.offsets[z];
			    if ((pos + tip[z] - scroll[z]) > win[z]) 
				pos = event.page[z] - this.options.offsets[z] - tip[z];
				
				//alert(pos);
			    if(pos > 800){
			        pos = event.page[z] - this.options.offsets[z] - tip[z] - 156;
			        if($('tipsbottom') != null){
			            //$('tipsbottom').addClass('bottomright');
			            //$('tipsbottom').removeClass('bottomleft');
			           
					   //sementara dihilangkan
					   // $('tipsbottomright').setStyle('display', 'block');
			           // $('tipsbottom').setStyle('display', 'none');
			        }
			        
			    }else if(pos<100){
			        if($('tipsbottom') != null ){
			            //$('tipsbottom').addClass('bottomleft');
			            //$('tipsbottom').removeClass('bottomright');
						
						
					   //sementara dihilangkan
			           // $('tipsbottom').setStyle('display', 'block');
			           // $('tipsbottomright').setStyle('display', 'none');
			            
			        }
			    }
			    
			    this.toolTip.setStyle(prop[z], pos + 'px');
		    };
            
		    this.toolTip.setStyle('z-index', 15000);
     
		    // added the zindex here 
		    // make sure the iframe moves with our tooltip
		    if ((Browser.Engine.trident  && !Browser.Engine.trident5)||(Browser.Platform.mac && Browser.Engine.gecko)) { 
			    this.frame.setStyle('z-index', 14999);
			    this.frame.setStyle('display', 'none');
			    for (var z in prop) {
				    var pos = event.page[z] + this.options.offsets[z];
				    this.frame.setStyle(prop[z], pos + 'px');
			    }
				
				
		    } 
		    event.stop();
		    
	    },
     
	    show: function(){
		    if ((Browser.Engine.trident  && !Browser.Engine.trident5)||(Browser.Platform.mac && Browser.Engine.gecko)) { 
			    var myValues = this.toolTip.getCoordinates();
     
			    this.frame.style.width = myValues['width'] + "px";
			    this.frame.style.height = myValues['height'] + "px";
			    this.frame.style.display = "block";
		    } 
		    this.fireEvent('onShow', [this.toolTip]);
		    
	    },
     
	    hide: function(){
		    if ((Browser.Engine.trident  && !Browser.Engine.trident5)||(Browser.Platform.mac && Browser.Engine.gecko)) { 
			    this.frame.style.display = "none"; 
		    } 
		    this.fireEvent('onHide', [this.toolTip]);
	    },
	    fixPNG:function(){

            $$('div').each(function(el){
 	            var imgURL = el.getStyle('background-image');
  	            var imgURLLength = imgURL.length;
 	            if ( imgURL != 'none' && imgURL.substring(imgURLLength  - 5, imgURLLength  - 2) == 'png' && el.className != 'btnRight' && el.className != 'btnLeft'){
  		            el.setStyles({
  			            background: '',
  			            filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"
  		            });
  	            }
                if(el.className == 'main'){
  	                el.setStyles({
  			            'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"
  	                });
  	            }
  	           
             
             });
           }
     
    });
    //INSTANTIATE CLASS
    MyTips.implement(new Events);
    MyTips.implement(new Options);
    
    
    
    //PAGE EVENTS BELOW
    //
    //
    //
    window.addEvent('load', function(){
                
                //Setup delay for slideshow loading to prevent IE6 engine conflicts.
                var slideShowInitialize = function(){ initSlideshow(); }
                slideShowInitialize.delay(1000);
                
                //Instantiate HTML Tool tips
                var ThumbTips = new MyTips($$('.thumbTip'),{
	                className: 'thumbtool',
	                initialize: function(){
		                this.effect = new Fx.Tween(this.toolTip, {'duration':'short', 'link': 'cancel'});
	                },
	                onShow: function(toolTip){
		                this.effect.start('opacity', 0, 1);
		                

	                },
	                onHide: function(toolTip){
		                this.effect.start('opacity', 1, 0);
		                
	                }
                });
                
                $('my_show').addEvent('click', function(el){
                    window.location = searchURL;
                });
                $('my_show').setStyle('cursor', 'pointer');
               
                //FIX transparent PNG files
                if(Browser.Engine.trident4){

                    fixPNG();
                }
                
                //This is to make sure the two side by side quicklinks
                //match each other in height, since they are both floating
                var qLink2 = $('ql_2');
                var qLink3 = $('ql_3');
                $$('#quicklinks ul li').each(function(el){
                    var leftItemHeight = "";
                    var rightItemHeight = "";
                    if(el.hasClass('inlineLi')){
                        if(el.id == 'ql_2'){
                            leftItemHeight = qLink2.getHeight();
                        }else{
                            rightItemHeight = qLink3.getHeight();
                        }
                        //alert(qLink2.offsetHeight + qLink3.offsetHeight);
                        if(qLink2.offsetHeight > qLink3.offsetHeight){
                            qLink3.setStyle('height', qLink2.getHeight());
                        }else{
                            qLink2.setStyle('height', qLink3.getHeight());
                        }
                    }
                });
 
        });
        
        window.addEvent('domready', function(){

                if(Browser.Platform.mac && (lcd == 'ja-jp')){
                    //we need to make the font a little smaller on the mac for ja-jp and zh-chs
                    
                    $$('#whatsnew li a.asian, #infolinks li a.asian, #quicklinks li a.asian, .asian').each(function(el){
                        el.setStyle('font-size', '12px');
                        el.setStyle('font-weight', '100');
                    });
                }  
                
                //The image border appears too early in IE, the fix is too hide in CSS and 
                //then use this JS to show the border
                $('showOverlayR').style.display='block';
                $('showOverlayL').style.display='block';
        });
        
        


	    
        //USER DEFINED FUNCTIONS BELOW
        //
        //
        //        
      
                
                
                
        //To fix the LI hover issue for IE
        //This function has to stay inside of the 'load' event!
        function hoverCheck(el, state){
			
           if(state == 'on') el.addClass('hover');
		  
           if(state == 'off') el.removeClass('hover');
        }
        
        
        
        //This function counts characters and does it's best to decide
        //whether or not to add the double line class to the element
        function changeInnerText(el, string, txtCount, hvrTxtCount, dir, allowedHvrTxt, allowedTxt){

 			myEle = $(el);
			 //Finally change the text
		    $(el).set({
                text: string                 
             });
           
		   if(!allowedHvrTxt) var allowedHvrTxt = 35; 
		   if(!allowedTxt) var allowedTxt = 35;
           
           //Change text string first             
           //Take some action depending on over or out states and string lengths
           if(dir == 'in'){
                 if(hvrTxtCount >= allowedHvrTxt){
                    //hover text string is beyond allowed size
                    if(txtCount <= allowedTxt){
                     
                        myEle.getParent().getParent().addClass('double-line');
                        
                    } //we only need to remove the class if it was tehre in the first place.
                }else{                 
                    //Hover text is less than allowed size    
                      
                    myEle.getParent().getParent().removeClass('double-line');

                }          
                $(el).textContent = string;
                myEle.getParent().setStyle('font-weight', 'normal'); 
                myEle.getParent().setStyle('font-style', 'normal');
                if(lcd != 'zh-chs' && lcd != 'ja-jp'){
                    myEle.getParent().setStyle('font-size', '11px');
                    myEle.getParent().getParent().addClass('uc');
                }
                
                
               
            }
            if(dir == 'out'){
                if(txtCount >= allowedTxt){
                    //original text is longer than allowed, wrap it
                    //console.log('Out: addClass(\'double-line\'): tc ' + txtCount + ": at " + allowedTxt + ": htc " + hvrTxtCount + ": aht " + allowedHvrTxt);
                    myEle.getParent().getParent().addClass('double-line');                    
                }else{
                    //Don't wrap
                    //console.log('Out: removeClass(\'double-line\'): tc ' + txtCount + ": at " + allowedTxt + ": htc " + hvrTxtCount + ": aht " + allowedHvrTxt);
                    myEle.getParent().getParent().removeClass('double-line');    
                }
               
                
                
                
                if(lcd != 'zh-chs' && lcd != 'ja-jp'){
                    myEle.getParent().setStyle('font-weight', 'bold');
                    myEle.getParent().setStyle('font-size', '12px');
                     myEle.getParent().getParent().removeClass('uc');
                }else{
                    if(Browser.Platform.mac && (lcd == 'ja-jp')){
                    //we need to make the font a little smaller on the mac for ja-jp and zh-chs
                        $$('#whatsnew li a.asian, #infolinks li a.asian, #quicklinks li a.asian, .asian').each(function(el){
                            el.setStyle('font-size', '12px');
                            el.setStyle('font-weight', '100');
                        });
                    }else{
                        myEle.getParent().setStyle('font-weight', 'normal');
                        myEle.getParent().setStyle('font-size', '13px');
                    }
                }
            }
            
		
            
		}
        
        
        
        //Change white shadow img into gray shadow image in header chrome
        var imgs = document.body.getElementsByTagName("img");
        for (var i = 0; i < imgs.length; i++) {
            if (imgs[i].src == "http://cachens.corbis.com/pro/searchbar_dropshadow.gif") imgs[i].src = "/creative/homepage/images/furniture/dkGray_dropshadow.gif";
        }
        
        
                // This Javascript is written by Peter Velichkov (www.creonfx.com)
        // and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
        // Use and modify all you want just keep this comment. Thanks
        
        function fixPNG(){         
                $$('#showOverlayR, #showOverlayL').each(function(el){

 	                var imgURL = el.getStyle('background-image');        
 	                var imgURLLength = imgURL.length;

 	                if (imgURL != 'none' && imgURL.substring(imgURLLength-5, imgURLLength-2) == 'png'){
 		                el.setStyles({         
 			                background: '',         
 			                filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + imgURL.substring(5,imgURLLength  - 2) + "')"
                 
 		                });
 	                };
         	    
                 
                if(el.get('tag') == 'img' && el.getProperty('src').substring(el.getProperty('src').length-3) == 'png'){
                
 		                var imgReplacer = new Element('input', {         
 			                'styles': {         
 				                'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='crop', src='" + el.getProperty('src') + "')",         
 				                'position': 'relative',         
 				                'background': 'transparent'         
 			                },         
 			                'title': el.getProperty('alt')
                 
 		                });
                 
                        imgReplacer.setStyles(el.getStyles('padding','margin','border','height','width'));
                 
 		                imgReplacer.setProperties(el.getProperties('id','class'));
                 
 		                imgReplacer.disabled = true;
                 
 		                el.replaceWith(imgReplacer);
                 
 	                };
                 
                 });
        }
        
