/**
 * @author Sascha Krause
 */
var widthOut = '6px';
var widthIn = '1px';


var arr = ["bright", "gravity", "elementic", "stats", "clan2", "stonewall"];
var currentFolio = "";

/**
 *
 */
jQuery.fn.showNextFolioDetail = function(current){
    this.each(function(){
    
        var nextElement = jQuery.inArray(current, arr);
        var nextFolio = arr[nextElement];
        
        if ((arr.length - 1) > nextElement) {
            nextFolio = arr[nextElement + 1];
            
            /*
             $("#folio_detail_" + current + "_b_img").slideUp("fast", function(){
             $("#folio_detail_" + current + "_a_img").slideUp("fast", function(){
             $("#folio_detail_" + current + "_overview_img").slideUp("fast", function(){
             $("#folio_detail_" + nextFolio + "_overview_img").show("slow", function(){
             $("#folio_detail_" + nextFolio + "_a_img").show("slow", function(){
             $("#folio_detail_" + nextFolio + "_b_img").show("slow");
             });
             });
             });
             });
             });
             */
            $("#folio_detail_" + current + "_a_img").slideUp();
            $("#folio_detail_" + nextFolio + "_a_img").slideDown("slow");
            
            $("#folio_detail_" + current + "_b_img").slideUp();
            $("#folio_detail_" + nextFolio + "_b_img").slideDown("slow");
            
            $("#folio_detail_" + current + "_overview_img").slideUp();
            $("#folio_detail_" + nextFolio + "_overview_img").slideDown("slow");
            
            $("#folio_detail_" + current + "_subtitle").fadeOut(0, function(){
                $("#folio_detail_" + nextFolio + "_subtitle").fadeIn(0);
            });
            
            $("#folio_detail_" + current + "_title").fadeOut(0, function(){
                $("#folio_detail_" + nextFolio + "_title").fadeIn(0);
            });
            
            currentFolio = nextFolio;
            $("#show_prev_detail_folio").show("slow");
        }
        
        if (currentFolio == arr[(arr.length - 1)]) {
            $("#show_next_detail_folio").hide("slow");
        }
    });
    return this;
};

jQuery.fn.showDetailView = function(){
    this.each(function(){
        $(this).click(function(){
            var partsArray = $(this).attr("id").split('_');
            var showThisElementFirst = partsArray[1];
            currentFolio = showThisElementFirst;
            
            var index = jQuery.inArray(currentFolio, arr);
            
            if (index == 0) {
                //alert("null");
                $("#show_next_detail_folio").show("slow");
                $("#show_prev_detail_folio").hide("slow");
            }
            
            $("#folio_detail_" + showThisElementFirst + "_overview_img").show(0);
            $("#folio_detail_" + showThisElementFirst + "_a_img").show(0);
            $("#folio_detail_" + showThisElementFirst + "_b_img").show(0);
            $("#folio_detail_" + showThisElementFirst + "_subtitle").show(0);
            $("#folio_detail_" + showThisElementFirst + "_title").show(0);
            $("#what_i_have_done_container").slideUp("slow", function(){
                $("#folio_detail_viewpanel").slideDown(2000);
            });
            
            return false;
        });
    });
};



jQuery.fn.showGallery = function(){
    this.each(function(){
        $(this).click(function(){
        
            jQuery.each(arr, function(){
                $("#folio_detail_" + this + "_overview_img").hide(2000);
                $("#folio_detail_" + this + "_a_img").hide(2000);
                $("#folio_detail_" + this + "_b_img").hide(2000);
                $("#folio_detail_" + this + "_subtitle").hide(2000);
                $("#folio_detail_" + this + "_title").hide(2000);
            });
            $("#folio_detail_viewpanel").slideUp("slow", function(){
                $("#what_i_have_done_container").slideDown(2000);
            });
            
            return false;
        });
    });
};

jQuery.fn.showPrevFolioDetail = function(current){
    this.each(function(){
    
        var nextElement = jQuery.inArray(currentFolio, arr);
        var nextFolio = arr[nextElement];
        
        if (0 < nextElement) {
            nextFolio = arr[nextElement - 1];
            
            $("#folio_detail_" + nextFolio + "_a_img").slideDown("slow");
            $("#folio_detail_" + current + "_a_img").slideUp();
            
            $("#folio_detail_" + nextFolio + "_b_img").slideDown("slow");
            $("#folio_detail_" + current + "_b_img").slideUp();
            
            $("#folio_detail_" + nextFolio + "_overview_img").slideDown("slow");
            $("#folio_detail_" + current + "_overview_img").slideUp();
            
            $("#folio_detail_" + current + "_subtitle").fadeOut(0, function(){
                $("#folio_detail_" + nextFolio + "_subtitle").fadeIn(0);
            });
            $("#folio_detail_" + current + "_title").fadeOut(0, function(){
                $("#folio_detail_" + nextFolio + "_title").fadeIn(0);
            });
            
            currentFolio = nextFolio;
            $("#show_next_detail_folio").show("slow");
        }
        
        if (currentFolio == arr[0]) {
            $("#show_prev_detail_folio").hide("slow");
        }
        
    });
    return this;
};


/**
 * All images that should not be displayed (e.g. hover images)
 * are set to opacity:0.
 */
jQuery.fn.initInvisible = function(){
    var time = 0;
    this.each(function(){
    
        $(this).stop().animate({
            opacity: 0
        }, time);
    });
    return this;
};

/**
 * Simple Hover effect. The object itself get animated to the left on
 * mouseenter, and back to the right on mouseleave (you need to place a
 * div-element at the left of the element you want to animate (id: expander)).
 * Aswell, the hoverImageName (String to the ID-Element) overlays on mouseenter.
 * @param {Object} hoverImageName
 */
jQuery.fn.hoverEffect = function(hoverImageName){

    this.each(function(){
    
        $(this).mouseenter(function(){
            $(this).find(".expander").stop().animate({
                'width': widthOut
            }, "fast");
            
            $(hoverImageName).stop().animate({
                opacity: 1
            }, "fast");
            
            
        });
        
        $(this).mouseleave(function(){
            $(this).find(".expander").stop().animate({
                'width': widthIn
            }, "fast");
            
            $(hoverImageName).stop().animate({
                opacity: 0
            }, "fast");
            
            
        });
    });
    return this;
};


/**
 * Simple Hover effect. The object himself get animated to the left on
 * mouseenter, and back to the right on mouseleave (you need to place a
 * div-element at the left of the element you want to animate (id: expander)).
 * Aswell, the folioImgHoverName and folioSizeupHoverName (String to the ID-Element) overlays on mouseenter.
 * @param {Object} folioImgHoverName
 * @param {Object} folioSizeupHoverName
 */
jQuery.fn.hoverEffectForGallery = function(folioImgHoverName, folioSizeupHoverName){

    this.each(function(){
    
        $(this).mouseenter(function(){
            $(this).find(".expander").stop().animate({
                'width': widthOut
            }, "fast");
            
            $(folioImgHoverName).stop().animate({
                opacity: 1
            }, "fast");
            
            $(folioSizeupHoverName).stop().animate({
                opacity: 1
            }, "fast");
        });
        
        $(this).mouseleave(function(){
            $(this).find(".expander").stop().animate({
                'width': widthIn
            }, "fast");
            
            $(folioImgHoverName).stop().animate({
                opacity: 0
            }, "fast");
            
            $(folioSizeupHoverName).stop().animate({
                opacity: 0
            }, "fast");
        });
    });
    return this;
};


/**
 * Simple Hover effect. The object himself get animated to the left on
 * mouseenter, and back to the right on mouseleave (you need to place a
 * div-element at the left of the element you want to animate (id: expander)).
 */
jQuery.fn.hoverEffectForLinks = function(){

    this.each(function(){
    
        $(this).mouseenter(function(){
            $(this).find(".expander").stop().animate({
                'width': widthOut
            }, "fast");
            
            
        });
        
        $(this).mouseleave(function(){
            $(this).find(".expander").stop().animate({
                'width': widthIn
            }, "fast");
            
            
        });
    });
    return this;
};



$(document).ready(function(){


    // HEADER EIN UND AUSBLENDEN
    $("#header").mouseenter(function(){
    
        $("#header-text-left-container").stop().animate({
            opacity: 1
        }, "fast");
        
        return false;
    });
    
    $("#header").mouseleave(function(){
    
        $("#header-text-left-container").stop().animate({
            opacity: 0.45
        }, "fast");
        return false;
    });
    
    
    ////////////////////////////////////////////////////////////////////////////////////
    ////	WHAT I AM GOOD AT     //////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////
    
    
    $("#photoshop").hoverEffect("#icon_photoshop_hover");
    $("#blend").hoverEffect("#icon_blend_hover");
    $("#illustrator").hoverEffect("#icon_illustrator_hover");
    
    $("#java").hoverEffect("#icon_java_hover");
    $("#cpp").hoverEffect("#icon_cpp_hover");
    $("#html").hoverEffect("#icon_html_hover");
    
    $("#php").hoverEffect("#icon_php_hover");
    $("#js").hoverEffect("#icon_js_hover");
    $("#cms").hoverEffect("#icon_cms_hover");
    
    
    
    
    ////////////////////////////////////////////////////////////////////////////////////
    ////	WHAT IVE DONE SO FAR     ///////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////
    
    $("#folio_gravity").hoverEffectForGallery("#folio_gravity_image_hover", "#folio_img_1_hover");
    $("#folio_stonewall").hoverEffectForGallery("#folio_stonewall_image_hover", "#folio_img_2_hover");
    $("#folio_elementic").hoverEffectForGallery("#folio_elementic_image_hover", "#folio_img_3_hover");
    
    $("#folio_bright").hoverEffectForGallery("#folio_bright_image_hover", "#folio_img_4_hover");
    $("#folio_clan2").hoverEffectForGallery("#folio_clan2_image_hover", "#folio_img_5_hover");
    $("#folio_stats").hoverEffectForGallery("#folio_stats_image_hover", "#folio_img_6_hover");
    
    $("#show_next_detail_folio").hoverEffectForLinks();
    $("#show_prev_detail_folio").hoverEffectForLinks();
    $("#show_gallery").hoverEffectForLinks();
    
    
    $("#folio_gravity").showDetailView();
    $("#folio_bright").showDetailView();
    $("#folio_elementic").showDetailView();
    $("#folio_clan2").showDetailView();
    $("#folio_stats").showDetailView();
    $("#folio_stonewall").showDetailView();
    
    
    
    
    $("#show_next_detail_folio").click(function(){
        $("#show_next_detail_folio").showNextFolioDetail(currentFolio);
        return false;
    });
    
    
    $("#show_prev_detail_folio").click(function(){
        $("#show_prev_detail_folio").showPrevFolioDetail(currentFolio);
        return false;
    });
    
    $("#show_gallery").showGallery();
    
    
    ////////////////////////////////////////////////////////////////////////////////////
    ////	WHERE I LEARN FROM     /////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////
    
    
    $("#smashingmagazine").hoverEffectForLinks();
    $("#noupe").hoverEffectForLinks();
    $("#webdesignerdepot").hoverEffectForLinks();
    $("#geekeygadgets").hoverEffectForLinks();
    $("#makebetterwebsites").hoverEffectForLinks();
    $("#infosthetics").hoverEffectForLinks();
    $("#designm").hoverEffectForLinks();
    $("#firststwebdesigner").hoverEffectForLinks();
    $("#thecssawards").hoverEffectForLinks();
    $("#cssmania").hoverEffectForLinks();
    
    $("#book1").hoverEffect("");
    $("#book2").hoverEffect("#book_ideas_hover");
    $("#book3").hoverEffect("#book_change_hover");
    $("#book4").hoverEffect("#book_think_hover");
    
    
    ////////////////////////////////////////////////////////////////////////////////////
    ////	WHAT I COULD DO     ////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////
    
    
    $("#what_i_could_do_submit_text").hoverEffect("#arrow_submit_hover");
    $("#what_i_could_do_submit_button").hoverEffect("#arrow_submit_hover");
    $("#mail_div").hoverEffect("#mail_hover");
    
});


$(document).ready(function(){
    $("#header-text-left-container").stop().animate({
        opacity: 0.45
    }, 0);
    
    $("#icon_idea_hover").initInvisible();
    $("#icon_designing_hover").initInvisible();
    $("#icon_realize_hover").initInvisible();
    $("#icon_photoshop_hover").initInvisible();
    $("#icon_blend_hover").initInvisible();
    $("#icon_illustrator_hover").initInvisible();
    $("#icon_java_hover").stop().initInvisible();
    $("#icon_cpp_hover").stop().initInvisible();
    $("#icon_html_hover").initInvisible();
    $("#icon_php_hover").initInvisible();
    $("#icon_js_hover").initInvisible();
    $("#icon_cms_hover").initInvisible();
    $("#folio_gravity_image_hover").initInvisible();
    $("#folio_stonewall_image_hover").initInvisible();
    $("#folio_elementic_image_hover").initInvisible();
    $("#folio_clan2_image_hover").initInvisible();
    $("#folio_stats_image_hover").initInvisible();
    $("#folio_bright_image_hover").initInvisible();
    $("#folio_img_1_hover").initInvisible();
    $("#folio_img_2_hover").initInvisible();
    $("#folio_img_3_hover").initInvisible();
    $("#folio_img_4_hover").initInvisible();
    $("#folio_img_5_hover").initInvisible();
    $("#folio_img_6_hover").initInvisible();
    $("#book_ideas_hover").initInvisible();
    $("#book_change_hover").initInvisible();
    $("#book_think_hover").initInvisible();
    $("#book_interaction_hover").initInvisible();
    $("#arrow_submit_hover").initInvisible();
    $("#mail_hover").initInvisible();
});

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4105899-2']);
_gaq.push(['_trackPageview']);

(function(){
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();


function openBook1(){
    window.open('http://www.amazon.de/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.de%2FDesigning-Interactions-DVD-ROM-Bill-Moggridge%2Fdp%2F0262134748%2F&site-redirect=de&tag=elementic-interactions-21&linkCode=ur2&camp=1638&creative=6742', "_blank");
}

function openBook2(){
    window.open('http://www.amazon.de/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.de%2FMaking-Ideas-Happen-Overcoming-Obstacles%2Fdp%2F159184312X%3Fie%3DUTF8%26s%3Dbooks-intl-de%26qid%3D1279649902%26sr%3D8-1&site-redirect=de&tag=elementic-interactions-21&linkCode=ur2&camp=1638&creative=6742', "_blank");
}

function openBook3(){
    window.open('http://www.amazon.de/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.de%2FChange-Design-Transforms-Organizations-Innovation%2Fdp%2F0061766089%3Fie%3DUTF8%26s%3Dbooks-intl-de%26qid%3D1279650350%26sr%3D1-1&site-redirect=de&tag=elementic-interactions-21&linkCode=ur2&camp=1638&creative=6742', "_blank");
}

function openBook4(){
    window.open('http://www.amazon.de/gp/redirect.html?ie=UTF8&location=http%3A%2F%2Fwww.amazon.de%2FDont-Make-Me-Think-Usability%2Fdp%2F0321344758%2F&site-redirect=de&tag=elementic-interactions-21&linkCode=ur2&camp=1638&creative=6742', "_blank");
}