$(function(){
    var introArea = $("#markee");
    var introDetails = $("#subtitle");
    
    var objBottomProperties = {
        Min: "-100px",
        Max: "0px"
    };
    
    var objMouseOutTimeout = null;
    var objIsAnimatingSubTitle = {
        Show: false,
        Hide: false
    };
    
    function ShowSubTitle(){
        if (!objIsAnimatingSubTitle.Show || objIsAnimatingSubTitle.Hide) {
            if (objIsAnimatingSubTitle.Hide) {
                introDetails.stop();
            }
            
            objIsAnimatingSubTitle.Show = true;
            objIsAnimatingSubTitle.Hide = false;
            
            introDetails.animate({
                bottom: objBottomProperties.Max
            }, {
                duration: 300,
                easing: 'easeOutCirc',
                complete: function(){
                    objIsAnimatingSubTitle.Show = false;
                    objIsAnimatingSubTitle.Hide = false;
                }
            });
        }
    }
    
    function HideSubTitle(){
        objIsAnimatingSubTitle.Show = false;
        objIsAnimatingSubTitle.Hide = true;
        
        introDetails.animate({
            bottom: objBottomProperties.Min
        }, {
            duration: 300,
            easing: 'easeOutBack',
            complete: function(){
                objIsAnimatingSubTitle.Show = false;
                objIsAnimatingSubTitle.Hide = false;
            }
        }).fadeTo(1, 0.8);
    }
    
    
    function SitePhotoMouseOverHandler(){
        clearTimeout(objMouseOutTimeout);
        stopRotate();
        ShowSubTitle();
    }
    
    
    function SitePhotoMouseOutHandler(){
        objMouseOutTimeout = setTimeout(function(){
            HideSubTitle();
        }, 100);
        startRotate();
    }
    
    $([]).add(introArea).add(introDetails).mouseover(function(){
        SitePhotoMouseOverHandler();
        return (false);
    });
    
    $([]).add(introArea).add(introDetails).mouseout(function(){
        SitePhotoMouseOutHandler();
        return (false);
    });
    
    //rotate
    var headTimer = null;
    var headLoc = 0;
	var headLoc = Math.round(Math.random()*DM.head.length);
    var initialized = false;
    
    function switchHead(){
        if (initialized == false) {
            initialized = true;
            $('h1#title').html(DM.head[0].title);
        }
        else {
            var oldLoc = headLoc;
            headLoc += 1;
            if (headLoc >= DM.head.length) {
                headLoc = 0;
            }
            hideTitle(oldLoc, headLoc);
            $('#subtitle p').html(DM.head[headLoc].subtitle);
        }
    }
    
    
    function hideTitle(){
		var letters = $("h1#title span");
		var len = letters.length;
		var i = len;
		while (i--){
			if (i == 0) {
				setTimeout(function(i, letter){
					$(letter).animate({
						opacity: 0
					}, 'fast', "swing", function(){showTitle()});
				}, (len - i) * 50, i, letters[i]);/*pass vars doesn't work in IE6/7*/
			}
			else {
				setTimeout(function(i, letter){
					$(letter).animate({
						opacity: 0
					}, 'fast', "swing");
				}, (len - i) * 40, i, letters[i]);
			}
		}
   	}
	
	function showTitle(){
		var x = headLoc;
		if ($.support.cssFloat) { /*good browsers*/
			$("h1#title").empty().html($(DM.head[headLoc].title).css({opacity: 0}));
			$("h1#title span").each(function(i, letter){
				setTimeout(function(){
					$(letter).animate({opacity: 1}, 'normal', "swing");
				}, i * 40);
			});
		} else { /*IE6/7 fixes artifacts*/
			$("h1#title").empty().html($(DM.head[headLoc].title).css({color: '#fbb764'}));
			$("h1#title span").each(function(i, letter){
				setTimeout(function(){
					$(letter).animate({color: '#ffffff'}, 'normal', "swing");
				}, i * 40);
			});
		}
	}
    
    function startRotate(){
        headTimer = setInterval(function(){
            switchHead();
        }, 5000);
    };
    
    function stopRotate(){
        clearTimeout(headTimer);
    };
    
    function initRotate(){
        var headline = '';
		for(var i=0;i<DM.head.length;i++){
			DM.head[i].title = jQuery.map( DM.head[i].headline.split(""), function(letter){
				if(letter == " "){letter = "&nbsp";};
				return "<span>" + letter + "</span>";
			}).join("");
		}
        startRotate();
    };
    initRotate();
});