﻿window.addEvent('domready', function() {
	
	if($("other_works_slide")){
		$$("#page #content #other_works .wrapper .container a").set("opacity", 0.6);
		$$("#page #content #other_works .wrapper .container a").addEvent("mouseover", function(){
			this.fade("1")
		});
		
		$$("#page #content #other_works .wrapper .container a").addEvent("mouseout", function(){
			this.fade("0.6")
		});
		
		if($("r_1024")){
			new OtherWorksSliding($("other_works_slide"), $$("#page #content #other_works .wrapper .container")[0], $$("#other_works_slide a"), $$("#other_works .left_arrow")[0], $$("#other_works .right_arrow")[0], 3);
		}
		else {
			new OtherWorksSliding($("other_works_slide"), $$("#page #content #other_works .wrapper .container")[0], $$("#other_works_slide a"), $$("#other_works .left_arrow")[0], $$("#other_works .right_arrow")[0], 4);
		}
		
	}
	
	new TopSliding($("top"), $$("#page #top .container .left")[0], $("top_slide"), $$("#top_slide .box"), $$("#page #top .container .right a"), $$("#page #top .left_arrow")[0], $$("#page #top .right_arrow")[0], 3000);
	
	new FooterForm();
	
	var menu = new Menu();
	new CufonInit();
	Cufon.now();
	menu.init_effects();
	Cufon.refresh();

	
});

var Menu = new Class({
	
	initialize: function(){
		
		var oThis = this;
		this.first_level_lis = new Array();
		
		this.lis = $$("#above_top .right li");
		this.lis.each(function(el){
			if(el.getParent().getParent().get("tag") == "li"){}
			else {
				oThis.first_level_lis.push(el);
			}
		});
		
		this.convert_first_level();
	},
	
	convert_first_level: function(){
		this.first_level_lis.each(function(el){
			var left_curves = new Element("span", { "class": "left_curves" });
			var container = new Element("span", { "class": "container" });
			var right_curves = new Element("span", { "class": "right_curves"});
			
			var a = el.getElement("a");
			var text = a.get("text");
			a.set("html", "");
			container.set("text", text)
			a.adopt(left_curves, container, right_curves);
		});
	},
	
	init_effects: function(){
		$$("#above_top .right li").each(function(el){
			if(el.getElements("ul").length > 0){
				var ul = el.getElement("ul");
				var ul_top_curves_wrapper = el.getElement(".top_curves_wrapper");
				
				var eucw_width = el.offsetWidth;
				
				ul_top_curves_wrapper.setStyle("width", (eucw_width-3)+"px");
				
				var pos = el.getPosition();
				var to_add = 3;
				if(Browser.Engine.gecko){ to_add += 1 };
				ul.setPosition({ x: pos.x+to_add, y: pos.y+29});
			}
		});
		
		$$("#above_top .right li").each(function(el){
			
			
			if(el.getElements("ul").length > 0){
				
				if(el.hasClass("current_page_item")){
					
					el.getElement(".left_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_left_curves.png)");
					el.getElement(".right_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_right_curves.png)");	
					el.getElement(".container").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_bg.png)");
					el.getElement(".container").setStyle("color", "white");
					
					el.addEvent("mouseout", function(){
						el.getElement(".left_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_left_curves.png)");
						el.getElement(".right_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_right_curves.png)");	
						el.getElement(".container").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_bg.png)");
												
						var ul = this.getElement("ul");
						ul.setStyle("display", "none");
					});
				}
				else {
					el.addEvent("mouseout", function(){
						el.getElement(".left_curves").setStyle("background-image", "none");
						el.getElement(".right_curves").setStyle("background-image", "none");		
						el.getElement(".container").setStyle("background-image", "none");
						
						var ul = this.getElement("ul");
						ul.setStyle("display", "none");
					});
				}
				
				el.addEvent("mouseover", function(){
					el.getElement(".left_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_left_curves_with_submenu.png)");
					el.getElement(".right_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_right_curves_with_submenu.png)");	
					el.getElement(".container").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_bg.png)");
					var ul = this.getElement("ul");
					ul.setStyle("display", "block");
				});
				
			}
			else {
				if(el.getParent().getParent().get("tag") != "li"){
						
					el.addEvent("mouseover", function(){
						el.getElement(".left_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_left_curves.png)");
						el.getElement(".right_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_right_curves.png)");
						el.getElement(".container").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_bg.png)");
					});
					
					if(el.hasClass("current_page_item")){
						el.getElement(".left_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_left_curves.png)");
						el.getElement(".right_curves").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_right_curves.png)");	
						el.getElement(".container").setStyle("background-image", "url("+stylesheet_dir+"/img/menu_hover_bg.png)");
						el.getElement(".container").setStyle("color", "white");
					}
					else {
						el.addEvent("mouseout", function(){
							el.getElement(".left_curves").setStyle("background-image", "none");
							el.getElement(".right_curves").setStyle("background-image", "none"); 
							el.getElement(".container").setStyle("background-image", "none");
						});
					}
					
					
				}
			}
		});
	}
	
});

var CufonInit = new Class({
	
	initialize: function(){
		Cufon.replace(
		$$("#sidebar h5, #above_top .left .container span, #content .button .button_content, #footer h2, #content h2, #page #footer .input_submit, #page #content h3, #page #content .content #work_header .techniques a"), 
			{ fontFamily: "Anivers", hover: true, hoverables: { span: true }
		});
		
		if(!Browser.Engine.trident5){
			Cufon.replace(
				$$("#top .container .left h3, #top .container .left h2"), 
				{ fontFamily: "Anivers", hover: true, textShadow: "1px 1px rgba(0, 0, 0, 0.4)"
			});
			Cufon.replace(
				$$(".button .button_content"), 
					{ fontFamily: "Anivers", hover: true, hoverables: { span: true }
			});
		}
		
		//if(!Browser.Engine.trident){
		var oThis = this;
		this.first_level_lis = new Array();
		
		this.lis = $$("#above_top .right li a");
		this.lis.each(function(el){
			if(el.getParent().getParent().getParent().get("tag") == "li"){}
			else {
				oThis.first_level_lis.push(el);
			}
		});
		
			
		Cufon.replace(
			oThis.first_level_lis, 
					{ fontFamily: "Anivers", hover: true
			});
		//}
	}
	
});


var FooterForm = new Class({
	
	initialize: function(){
		$$(".input_text").each(function(el){
			var text = el.value;
			
			el.addEvent("focus", function(){
				if(this.value == text){
					this.value = "";
				}
				
				el.setStyle("border", "1px solid #138eb8");
			});
			
			el.addEvent("blur", function(){
				if(this.value == ""){
					this.value = text;
				}
				
				el.setStyle("border", "1px solid #087398");
			});
		});
		
		$$("textarea").each(function(el){
			var text = el.get("text");
			
			el.addEvent("focus", function(){
				if(this.get("text") == text){
					this.set("text", "");
				}
				
				el.setStyle("border", "1px solid #138eb8");
			});
			
			el.addEvent("blur", function(){
				if(this.get("text") == ""){
					this.set("text", text);
				}
				
				el.setStyle("border", "1px solid #087398");
			});
		});
	}
	
	
});

var Rotating = new Class({
						 
	initialize: function(elements, time){
		this.elements = elements;
		this.current = 0;
		this.time = time;
	},
	
	to_forward: function(){
		var old_current = this.current;
		if(this.current==this.elements.length-1){
			this.current = 0;
		}
		else {
			this.current+=1;
		}
		
		this.rotate(old_current, this.current);
	},
	
	to_backward: function(){
		var old_current = this.current;
		if(this.current==0){
			this.current = this.elements.length-1;
		}
		else {
			this.current-=1;
		}
		
		this.rotate(old_current, this.current);
	}
});

Fx.Scroll2 = new Class({
 
    'Extends': Fx.Scroll,
 
    'styleString': Element.getComputedStyle,
    'styleNumber': function(element, style) {
        return this.styleString(element, style).toInt() || 0;
    },
    'borderBox': function(element) {
        return this.styleString(element, '-moz-box-sizing') == 'border-box';
    },
    'topBorder': function(element) {
        return this.styleNumber(element, 'border-top-width');
    },
    'leftBorder': function(element) {
        return this.styleNumber(element, 'border-left-width');
    },
    'isBody': function(element) {
        return (/^(?:body|html)$/i).test(element.tagName);
    },  
    'toElement': function(el) {
        var offset   = {x: 0, y: 0};
        var element  = $(el);
        
        if (this.isBody(element)) {
            return offset;
        }
        var scroll = element.getScrolls();
                
        while (element && !this.isBody(element)){
            offset.x += element.offsetLeft;
            offset.y += element.offsetTop;
            
            if (Browser.Engine.gecko){
                if (!this.borderBox(element)){
                    offset.x += this.leftBorder(element);
                    offset.y += this.topBorder(element);
                }
                var parent = element.parentNode;
                if (parent && this.styleString(parent, 'overflow') != 'visible'){
                    offset.x += this.leftBorder(parent);
                    offset.y += this.topBorder(parent);
                }
            } else if (Browser.Engine.trident || Browser.Engine.webkit){
                offset.x += this.leftBorder(element);
                offset.y += this.topBorder(element);
            }
 
            element = element.offsetParent;
            if (Browser.Engine.trident) {
                while (element && !element.currentStyle.hasLayout) {
                    element = element.offsetParent;
                }
            }
        }
        if (Browser.Engine.gecko && !this.borderBox(element)){
            offset.x -= this.leftBorder(element);
            offset.y -= this.topBorder(element);
        }
        
        var relative = this.element;
        var relativePosition = (relative && (relative = $(relative))) ? relative.getPosition() : {x: 0, y: 0};
        var position = {x: offset.x - scroll.x, y: offset.y - scroll.y};
        
        return this.start(position.x - relativePosition.x-2, position.y - relativePosition.y);
    }
});

var OtherWorksSliding = new Class({
	initialize: function(container, slider, elements, left_arrow, right_arrow, in_row){
		this.current = 0;
		
		this.container = container;
		this.slider = slider;
		this.elements = elements;
		this.left_arrow = left_arrow;
		this.right_arrow = right_arrow;
		
		this.in_row = in_row;
		
		this.count_width(this.container);
		
		this.fx = new Fx.Scroll2(this.slider, {  });
		
		this.add_events();
	},
	
	add_events: function(){
		var oThis = this;
		
		this.left_arrow.addEvent("click", function(event){
			var event = new Event(event);
			event.preventDefault();
			oThis.to_backward();
		});
		
		this.right_arrow.addEvent("click", function(event){
			var event = new Event(event);
			event.preventDefault();
			oThis.to_forward();
		});
		
	},
	
	rotate: function(old_current, new_current){
		this.fx.toElement(this.elements[new_current]);
	},
	
	count_width: function(){
		var width = 0;
		
		this.elements.each(function(el){ 
			width += el.getSize().x;
			width += el.getStyle("margin-left").toInt(); 
			width += el.getStyle("margin-right").toInt(); 
		});
		
		this.container.setStyle("width", width+"px");
	},
	
	to_forward: function(){
		var old_current = this.current;
		if(this.current>=this.elements.length-this.in_row){
			this.current = 0;
		}
		else {
			this.current+=1;
		}
		
		this.rotate(old_current, this.current);
	},
	
	to_backward: function(){
		var old_current = this.current;
		if(this.current==this.elements.length-1){
			this.current = this.elements.length-(this.in_row+1);
		}
		else if(this.current==0){
			this.current = this.elements.length-1;
		}
		else {
			this.current-=1;
		}
		
		this.rotate(old_current, this.current);
	}
	
});

var TopSliding = new Class({
	Extends: Rotating,
	initialize: function(main, slider, container, elements, images, left_arrow, right_arrow, time){
		this.parent(elements, time);
		
		this.main = main;
		this.slider = slider;
		this.container = container;
		this.images = images;
		this.left_arrow = left_arrow;
		this.right_arrow = right_arrow;
		
		this.count_width(this.container);
		
		this.fx = new Fx.Scroll(this.slider, {  });
		
		this.images.fade("hide");
		this.images[this.current].fade("show");
		
		this.add_events();
		
		this.function_rotate = this.to_forward.periodical(this.time, this);
	},
	
	add_events: function(){
		var oThis = this;
		
		this.left_arrow.addEvent("click", function(event){
			var event = new Event(event);
			event.preventDefault();
			oThis.to_backward();
			$clear(oThis.function_rotate);
			oThis.main.removeEvents();
		});
		
		this.right_arrow.addEvent("click", function(event){
			var event = new Event(event);
			event.preventDefault();
			oThis.to_forward();
			$clear(oThis.function_rotate);
			oThis.main.removeEvents();
		});
		
		this.main.addEvent("mouseover", function(){
			$clear(oThis.function_rotate);
		});
		
		this.main.addEvent("mouseout", function(){;
			oThis.function_rotate = oThis.to_forward.periodical(oThis.time, oThis);
		});
	},
	
	rotate: function(old_current, new_current){
		this.fx.toElement(this.elements[new_current]);
		this.images[old_current].fade("out");
		this.images[new_current].fade("in");
	},
	
	count_width: function(){
		var width = 0;
		
		this.elements.each(function(el){ width += el.getStyle("width").toInt(); width += el.getStyle("padding-left").toInt(); });
		
		this.container.setStyle("width", width+"px");
	}
	
});
