// YES WE CAN. ////////////////////////////////////////////////////////////




$(document).ready(function(){



//////////top page category name over
    

    
     $('.menu2_name>h2 a').each(function(){
    
     $(this).hover(
    
        function(){
            var count = $('.menu2_name>h2 a').index(this);
            $('.top-photo').eq(count).fadeIn();
            var top_p_text = $(this).text();
            $('.top-photo_text').text(top_p_text);
         },
         function(){
             var count = $('.menu2_name>h2 a').index(this);
             $('.top-photo').eq(count).fadeOut();
        }
    );   
    
    });
    
//////////color random
    
    $('.top_ca_list a').hover(
        function(){
            
          var change = Math.floor(Math.random()*19);
          if(change ==0){
             $(this).css({'background-color':'#25BBBC','color':'#fff'});   
         }else if(change ==1){
             $(this).css({'background-color':'#FFF533','color':'#fff'});         
         }else if(change ==2){
             $(this).css({'background-color':'#FC9141','color':'#fff'});         
         }else if(change ==3){
             $(this).css({'background-color':'#76D3FC','color':'#fff'});         
         }else if(change ==4){
             $(this).css({'background-color':'#4EBAFF','color':'#fff'});         
         }else if(change ==5){
             $(this).css({'background-color':'#F6402D','color':'#fff'});         
         }else if(change ==6){
             $(this).css({'background-color':'#BBBBBB','color':'#fff'});         
         }else if(change ==7){
             $(this).css({'background-color':'#A1CC4D','color':'#fff'});         
         }else if(change ==8){
             $(this).css({'background-color':'#FF7D58','color':'#fff'});         
         }else if(change ==9){
             $(this).css({'background-color':'#F5C66C','color':'#fff'});         
         }else if(change ==10){
             $(this).css({'background-color':'#656E7C','color':'#fff'});         
         }else if(change ==11){
             $(this).css({'background-color':'#3E3E3E','color':'#fff'});         
         }else if(change ==12){
             $(this).css({'background-color':'#4C5276','color':'#fff'});         
         }else if(change ==13){
             $(this).css({'background-color':'#FC575E','color':'#fff'});         
         }else if(change ==14){
             $(this).css({'background-color':'#E76B7E','color':'#fff'});         
         }else if(change ==15){
             $(this).css({'background-color':'#F2F5C3','color':'#555555'});         
         }else if(change ==16){
             $(this).css({'background-color':'#B2D40A','color':'#fff'});         
         }else if(change ==17){
             $(this).css({'background-color':'#68BC68','color':'#fff'});         
         }else if(change ==18){
             $(this).css({'background-color':'#25BBBC','color':'#fff'});         
         }

            
        },
        function(){
            $(this).css({'background-color':'','color':'#000'}); 
        }
    
    );
    
    
    //for browser the size of under 768
    
    if(user_w<800){
    $('.top-photo>img').width(400).height(320);
    $('.top-photo').css('left','550px');
    }
    
    
    
 //////////top page category name change
    
    $('div.top_ca_list div.menu2_category a').each(function(){
    $(this).eq(0).nextAll().hide();
    
    });
    

    
//////////Exhibition & Work//////////

//////////Archive title change
    




//////////Exhibition title change
    var title_en = $('span#en').text();
    $('#ex_title>h2>span').remove();
    
    $('#ex_title').append('<div id="en_new">');
    $('div#en_new').text(title_en);


//////////Exhibition photos
    $('#ex_p_wrap>img').wrap('<div>');
    
    $('#ex_p_wrap>div').attr('id',function(i){
        return'photo-'+i;
    });
    
     
       $('#ex_p_wrap>div img').offset().left;
     
 
    //photo click change
    $('#ex_p_wrap>div').attr('class','photo');
    var photo = $('div.photo');
    
    photo.click(function(){
        
        var next_num = $('#ex_p_wrap>div').index(this)+1;
        $(this).toggle();
        var next = $(this).next();
        next = (next.size()>0) ? next:photo.eq(0);
        next.toggle();
       
       var photo_resize = '#photo-'+next_num+'>img';
            var resize_w = $(photo_resize).width();
            var resize_h = $(photo_resize).height();
     
     //adjust photo size to browser
            $(photo_resize).height(user_h-134);      
            var img_h =  $(photo_resize).height();
     
     //adjust photo aspect
            var img_w =  resize_w*(img_h/resize_h);
            $(photo_resize).width(img_w);
     
     //re-place photo position
            var img_l =  (main_w-img_w)/2 + 5;
            var img_t =  (user_h-img_h)/2 + 5;
            $(photo_resize).css({'margin-left' : img_l, 'margin-top' : img_t });

        
        
        
        if(next_num== $('#ex_p_wrap>div').size()){
        $('.number').eq(0).css({'background-color':'#4EBAFF','color':'#fff'});  
        }
        
        var change = Math.floor(Math.random()*18);
        if(change ==0){
             $('.number').eq(next_num).css({'background-color':'#25BBBC','color':'#fff'});   
         }else if(change ==1){
             $('.number').eq(next_num).css({'background-color':'#FFF533','color':'#fff'});         
         }else if(change ==2){
             $('.number').eq(next_num).css({'background-color':'#FC9141','color':'#fff'});         
         }else if(change ==3){
             $('.number').eq(next_num).css({'background-color':'#76D3FC','color':'#fff'});         
         }else if(change ==4){
             $('.number').eq(next_num).css({'background-color':'#4EBAFF','color':'#fff'});         
         }else if(change ==5){
             $('.number').eq(next_num).css({'background-color':'#F6402D','color':'#fff'});         
         }else if(change ==6){
            $('.number').eq(next_num).css({'background-color':'#BBBBBB','color':'#fff'});         
         }else if(change ==7){
             $('.number').eq(next_num).css({'background-color':'#A1CC4D','color':'#fff'});         
         }else if(change ==8){
            $('.number').eq(next_num).css({'background-color':'#FF7D58','color':'#fff'});         
         }else if(change ==9){
             $('.number').eq(next_num).css({'background-color':'#F5C66C','color':'#fff'});         
         }else if(change ==10){
             $('.number').eq(next_num).css({'background-color':'#656E7C','color':'#fff'});         
         }else if(change ==11){
            $('.number').eq(next_num).css({'background-color':'#3E3E3E','color':'#fff'});         
         }else if(change ==12){
            $('.number').eq(next_num).css({'background-color':'#4C5276','color':'#fff'});         
         }else if(change ==13){
            $('.number').eq(next_num).css({'background-color':'#FC575E','color':'#fff'});         
         }else if(change ==14){
            $('.number').eq(next_num).css({'background-color':'#E76B7E','color':'#fff'});         
         }else if(change ==15){
               $('.number').eq(next_num).css({'background-color':'#B2D40A','color':'#fff'}); 
         }else if(change ==16){
              $('.number').eq(next_num).css({'background-color':'#68BC68','color':'#fff'});            
         }else if(change ==17){
           $('.number').eq(next_num).css({'background-color':'#25BBBC','color':'#fff'});     
         }

        
        
        $('.number').eq(next_num-1).css({'background-color':'','color':'#222222'});     
    });

    photo.eq(0).nextAll().hide();
    
    

　
　 

//////////Exhibition text
    
    //count num of pic and display the number
    var count = $('#ex_p_wrap>div').size();
    for(i=0; i<count; i++){
        var num = 'n_'+i;
        $('<div>').attr('id',num).text(i+1).appendTo('#ex_text');
    }
    

    
     $('#ex_text>div').each(function(){
    
    //change num under9
        var ad_zero = $('#ex_text>div').index(this)+1;
        if(ad_zero<10){
            $(this).text('0'+ad_zero);
        }
        
        $(this).css('float','left');

    //number-photo-toggle    
        $(this).click(function(){
            var n_con = $('#ex_text>div').index(this);
            $('#photo-'+n_con).show();
            $('#ex_p_wrap>div').not(jQuery('#photo-'+n_con)).hide();
            
            var photo_resize = '#photo-'+n_con+'>img'
            var resize_w = $(photo_resize).width();
            var resize_h = $(photo_resize).height();
     
     //adjust photo size to browser
            $(photo_resize).height(user_h-134);      
            var img_h =  $(photo_resize).height();
     
     //adjust photo aspect
            var img_w =  resize_w*(img_h/resize_h);
            $(photo_resize).width(img_w);
     
     //re-place photo position
            var img_l =  (main_w-img_w)/2 + 5;
            var img_t =  (user_h-img_h)/2 + 5;
            $(photo_resize).css({'margin-left' : img_l, 'margin-top' : img_t });

            
            
            
        });
    
    });

 
    //number wrap and make space
    $('#ex_text').width(230);
    $('#ex_text>div').wrapInner('<div class="number">')
    $('.number').css({'padding':'2px','margin':'1px'});
    
    
    
    //number click action
    $('.number').click(function(){

              var change = Math.floor(Math.random()*18);
        if(change ==0){
             $(this).css({'background-color':'#25BBBC','color':'#fff'});   
         }else if(change ==1){
             $(this).css({'background-color':'#FFF533','color':'#fff'});         
         }else if(change ==2){
             $(this).css({'background-color':'#FC9141','color':'#fff'});         
         }else if(change ==3){
             $(this).css({'background-color':'#76D3FC','color':'#fff'});         
         }else if(change ==4){
             $(this).css({'background-color':'#4EBAFF','color':'#fff'});         
         }else if(change ==5){
             $(this).css({'background-color':'#F6402D','color':'#fff'});         
         }else if(change ==6){
             $(this).css({'background-color':'#BBBBBB','color':'#fff'});         
         }else if(change ==7){
             $(this).css({'background-color':'#A1CC4D','color':'#fff'});         
         }else if(change ==8){
             $(this).css({'background-color':'#FF7D58','color':'#fff'});         
         }else if(change ==9){
             $(this).css({'background-color':'#F5C66C','color':'#fff'});         
         }else if(change ==10){
             $(this).css({'background-color':'#656E7C','color':'#fff'});         
         }else if(change ==11){
             $(this).css({'background-color':'#3E3E3E','color':'#fff'});         
         }else if(change ==12){
             $(this).css({'background-color':'#4C5276','color':'#fff'});         
         }else if(change ==13){
             $(this).css({'background-color':'#FC575E','color':'#fff'});         
         }else if(change ==14){
             $(this).css({'background-color':'#E76B7E','color':'#fff'});         
         }else if(change ==15){
             $(this).css({'background-color':'#B2D40A','color':'#fff'});         
         }else if(change ==16){
             $(this).css({'background-color':'#68BC68','color':'#fff'});         
         }else if(change ==17){
             $(this).css({'background-color':'#25BBBC','color':'#fff'});         
         }

    
     $('.number').not(jQuery(this)).css({'background-color':'','color':'#222222'}); 
    });
    
    //mouse pointer on
    $('.number,#ex_p_wrap img').css('cursor','pointer');
    //number first time
     $('.number').eq(0).css({'background-color':'#B2D40A','color':'#fff'});
   //number hover
    $('.number').hover(
    
        function(){
            $(this).css('text-decoration','underline');
        },
        function(){
           $(this).css('text-decoration','none');
        }
    
    );




//////////Exhibition introduction

    $('div#intro_text').wrap('<div id="popupContact">');
    var popup_title = $('div#ex_title').text();
    $('div#popupContact').prepend('<h2>'+popup_title+'</h2>').prepend('<a id="popupContactClose">x</a>');
    $('div#popupContact').after('<div id="backgroundPopup"></div>');




//////////Exhibition Work photo change
     //get browser size
     var user_w = document.documentElement.clientWidth;
     var user_h = document.documentElement.clientHeight;
    
    //photo re-size
     var main_w = user_w-400;

     $('#ex_p_wrap').width(main_w).height(user_h);
     
     //get original photo size 
     $('div.photo>img:first').attr('class','change_photo');
     
     var pre_photo_w = $('div.photo>img:first').width();
     var pre_photo_h = $('div.photo>img:first').height();
     
     //adjust photo size to browser
     $('div.photo>img:first').height(user_h-134);      
     
     var img_h =  $('div.photo>img:first').height();
     
     //adjust photo aspect
     var img_w =  pre_photo_w*(img_h/pre_photo_h);
     $('div.photo>img:first').width(img_w);
     
     //re-place photo position
     var img_l =  (main_w-img_w)/2 + 5;
     var img_t =  (user_h-img_h)/2 + 5;
     $('div.photo>img:first').css({'margin-left' : img_l, 'margin-top' : img_t });
     

     
     
//////////display size revision
   // $('#main_wrap').width(user_w);
    
    //if(jQuery.browser.safari){
        //$('html,body').css('overflow-x','hidden');
        
        //if(user_w<700){
       // $('html,body').css('overflow-x','show');
        //}
        
   // }


        
       



//CONTROLLING EVENTS IN jQuery

	
	//LOADING POPUP
	//Click the button event!
	$("#ex_intro").click(function(){
		//centering with css
		centerPopup();
		//load popup
		loadPopup();
	});
				
	//CLOSING POPUP
	//Click the x event!
	$("#popupContactClose").click(function(){
		disablePopup();
	});
	//Click out event!
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	//Press Escape event!
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1){
			disablePopup();
		}
	});
    

//////////for LOG

 





});//end document.ready




//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
	//loads popup only if it is disabled
	if(popupStatus==0){
		$("#backgroundPopup").css({
			"opacity": "0.8"
		});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupContact").fadeIn("slow");
		popupStatus = 1;
	}
}

//disabling popup with jQuery magic!
function disablePopup(){
	//disables popup only if it is enabled
	if(popupStatus==1){
		$("#backgroundPopup").fadeOut("slow");
		$("#popupContact").fadeOut("slow");
		popupStatus = 0;
	}
}

//centering popup
function centerPopup(){
	//request data for centering
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupContact").height();
	var popupWidth = $("#popupContact").width();
	//centering
	$("#popupContact").css({
		"position": "absolute",
		"top": '20px',
		"left": windowWidth/2-popupWidth/2
	});
	//only need force for IE6
	
	$("#backgroundPopup").css({
		"height": windowHeight
	});
	
}