/* 
Title:		dtott portfolio javascripts
Author: 	dan@dtott.com
Copyright:	2010, Daniel T Ott, LLC. All rights resevered (no copying or use without permission).
*/
(function($){
    
    $.fn.getTransformProperty = function() {
        var element = $(this)[0];
        var properties = ['transform', 'WebkitTransform', 'MozTransform'];
        var p;
        while (p = properties.shift()) {
            if (typeof element.style[p] != 'undefined') {
                return p;
            }
        }
        return false;
    };
    $.fn.getTransitionProperty = function() {

        var element = $(this)[0];
        
        var properties = ['transition', 'WebkitTransition', 'MozTransition'];
        var p;
        while (p = properties.shift()) {
            if (typeof element.style[p] != 'undefined') {
                return p;
            }
        }

        return false;
    };
    
    
    $.fn.dtoPortfolio = function(options){
        return $(this).each(function(){
        var container = $(this);
        var totalChildren = container.children().length;
        options.rotateOptions.step = 180/totalChildren >= 15 ? 15 : 180/totalChildren;
        var transformProperty = container.getTransformProperty();
        var stage = $("#portfolio-stage");
        if(!options.preview){
            var flipper, theight;
           if(Modernizr.csstransforms3d && Modernizr.csstransitions){
                flipper = $('<div class="flipper" />').appendTo(stage);
                theight = 0;
            }
            container.children().each(function(){
                var t;
                if(Modernizr.csstransforms3d && Modernizr.csstransitions){
                    t = $('<div class="card" />').html($(this).html()).appendTo(flipper);
                    t.show();
                    var h = t.height();
                    t.hide();
                    if(t.height() > theight){
                        theight = t.height();
                    }
                }
                else{
                    t = $('<div class="card" />').html($(this).html()).appendTo(stage);
                }
                t.find(".w img").unwrap();
                $(this).data("flip",t).children(":not(.w)").remove();
            })
            .click(function(){
                container.find(".active").removeClass("active");
                $(this).addClass("active");
                var tli = $(this);
                
                if(Modernizr.csstransforms3d && Modernizr.csstransitions){
                    
                    if(flipper.hasClass("flipped")){
                        flipper.find(".faceA").removeClass("faceA").hide();
                        $(this).data("flip").addClass("faceA").show();
                        flipper.removeClass("flipped");
                    }
                    else{
                        flipper.find(".faceB").removeClass("faceB").hide();
                        $(this).data("flip").addClass("faceB").show();
                        flipper.addClass("flipped");
                    }
                    
                    //faceA
                    //faceB
                    
                }
                else{
                    var a = stage.find(".card.active");
                    if(a.length){a.animate({opacity:0},{
                            duration: options.stageOptions.fadeOutSpeed,
                            complete: function(){
                                $(this).hide().css("opacity",1).removeClass("active");
                                tli.data("flip").fadeIn(options.stageOptions.fadeInSpeed, function(){$(this).addClass("active");});
                            },
                            queue: true
                        });
                        
                    }
                    else{
                        tli.data("flip").fadeIn(options.stageOptions.fadeInSpeed, function(){$(this).addClass("active");});
                    }
                }
                
                return false;
            });
            if(Modernizr.csstransforms3d && Modernizr.csstransitions){flipper.height(theight);}
        }
        
        if(Modernizr.csstransforms){
            
            var startRotate = 0 - (((Math.floor(totalChildren / 2) + 1) * options.rotateOptions.step) + options.rotateOptions.offset);
            var endRotate = startRotate + (totalChildren * options.rotateOptions.step);
            
            var rotateChild = function(el,dir,animDuration){
                
                var cr = parseInt(el.data("targetRotation"),10);
                
                if(Modernizr.csstransitions){
                    el.css(el.getTransitionProperty()+"-duration",(animDuration/1000)+"s");
                    el.css(el.getTransformProperty(),"rotate("+cr+"deg)");
                    setTimeout(function(){
                        if(!options.preview){
                            if(el.is(":first-child")){el.trigger("click");}
                        }
                    },options.duration);
                }
                else{el.animate({textIndent:1000},{
                        duration: animDuration,
                        step: function(s){ 
                            if(dir == "open"){
                                rot = (cr * s/1000);
                            }
                            else{
                                 rot = (cr - (cr * s/1000));
                            }
                            $(this).css(transformProperty,"rotate("+rot+"deg)");
                            if(Modernizr.csstransforms3d){$(this).css(transformProperty,"rotate("+rot+"deg)");}
                        },
                        complete: function(){ 
                            var rot = dir=="open"?$(this).data("targetRotation"):0;
                            var tr;
                            if(Modernizr.csstransforms3d){
                                tr = "rotate("+rot+"deg)";
                            }
                            else{
                                tr = "rotate(" + rot + "deg)";
                            }
                            $(this)
                                .css(transformProperty,tr)
                                .css({textIndent:0});
                            if(!options.preview){
                                if($(this).is(":first-child")){$(this).trigger("click");}
                            }
                        },
                        queue: true
                    });
                }
            };
            
            
            container.children().each(function(i,el){
                var targetRotation = startRotate + (totalChildren - i - 1)*options.rotateOptions.step;
                $(this).css("zIndex",totalChildren - i).data("targetRotation",targetRotation).data("currentRotation",0);
            });
            $(function(){
                setTimeout(function(){ 
                    container.children().each(function(i){rotateChild($(this),"open",options.duration/(totalChildren-i));});
                    
                },1500);
            });
            
        }//end if Modernizr.csstransforms
        else{
            if(!options.preview){
                $("head").append('<script type="text/javascript" src="/scripts/roundabout"></script><script type="text/javascript" src="/scripts/roundabout-shapes"></script>');
                var rOptions = {
                    minOpacity: 0.4,
                     minScale: 0.6,
                     maxScale: 1.1,
                    shape: 'waterWheel',
                    tilt:3.5
                };
                container.roundabout(rOptions).children(":first-child").trigger("click");
            }
            else{
                container.children().each(function(i,el){$(el).addClass("p"+i).css("zIndex",totalChildren-i);});
            }
        }
    });};
    
    
    
    
    

        
    $("#home #portfolio").dtoPortfolio({
        preview: true,
        duration: 750,
        rotateOptions: {
            step: 15,
            offset: 20
        }
    });
    
    
    $("#work-section #portfolio").dtoPortfolio({
        preview: false,
        duration: 750,
        rotateOptions: {
            step: 15,
            offset: 20
        },
        stageOptions: {
            fadeOutSpeed: 400,
            fadeInSpeed: 400
        }
    
    });
    
    
  

})(jQuery);