/* jQuery FlyOut - Jolyon Terwilliger, Nixbox Web Designs - http://nixboxdesigns.com/jquery.flyout.php */

$.fn.extend({flyout:function(c){
    var d = false;
    var e = false;
    var link_obj;
    var img_obj;
    var img_info;
    var imgHeight;
    var imgWidth;
    var view_img = new Image();
    var l = 'img';
    var m;
    
    this.click(function(){
        clickAction(this);
        
        return false
    });
    
    var defaults = jQuery.extend({
        outSpeed:1000,
        inSpeed:500,
        outEase:'easeOutQuad',
        inEase:'easeInBack',
        loadingSrc:"./flyout/images/loader.gif",
        loader:'loader',
        loaderZIndex:500,
        widthMargin:300,
        heightMargin:300,
        loadingText:"Loading...",
        destPadding:5,
        headHeight:30,
        borderColor:'#000000',
        fontColor:'#FFFFFF',
        boxHeight:30,
        
        // ズームアイコン
        zoomDisp:true,
        zoomSrc:"./flyout/images/zoom_icon.gif",
        zoomWidth:25,
        zoomHeight:25,
        
        // リンクローテーション
        link_rotation:false,
        
        // 戻る矢印情報
        arrowPrevSrc:"./flyout/images/left.png",
        arrowPrevWidth:24,
        arrowPrevHeight:24,
        
        // 進む矢印情報
        arrowNextSrc:"./flyout/images/right.png",
        arrowNextWidth:24,
        arrowNextHeight:24,
        
        startOffsetX:0,
        startOffsetY:0,
        startHeight:0,
        startWidth:0,
        flyOutStart:function(){},
        flyOutFinish:function(){},
        putAwayStart:function(){},
        putAwayFinish:function(){},
        shownClass:'shown'
    },c);
    
    var head_top = 0;
    var head_bottom = 0;
    
    var arrContents = new Array();
    
    getLinks();
    
    //===============================================================================
    // クリックされた時の処理
    //===============================================================================
    function clickAction(obj){
        if(e == true){
            return false
        }
        if(d){
            putAway(obj);
        }else{
            flyOut(obj);
        }
        
        return false;
    }
    
    //===============================================================================
    // リンクを取得する
    //===============================================================================
    function getLinks(){
        domMatchedObj = new Array();
        var intImage = 0;
        var zoomIndex = 0;
        
        $('a').each(function() {
            if($(this).attr('rel') == "flyout"){
                arrContents[intImage] = $(this);
                intImage++;
                
                // 拡大アイコン
                if(defaults.zoomDisp){
                    zoomIndex++;
                    
                    var disp_left = $('img', this).offset().left + $('img', this).width() - defaults.zoomWidth;
                    var disp_top = $('img', this).offset().top + $('img', this).height() - defaults.zoomHeight;
                    
                    $('body').append($('<div></div>').attr('id','zoom_icon'+zoomIndex).css({
                        'display':'block',
                        'position':'absolute',
                        //'left':($(this, 'img').width() - defaults.zoomWidth)+'px',
                        'left':disp_left+'px',
                        'top':disp_top+'px',
                        'width':defaults.zoomWidth+'px',
                        'height':defaults.zoomHeight+'px',
                        'background':'url('+defaults.zoomSrc+') no-repeat left top'
                    }));
                    
                    /*
                    $(this).mouseover(function(){
                       $('#zoom_icon'+zoomIndex).css({'background-position':'right top'});
                    });
                    
                    $(this).mouseout(function(){
                       $('#zoom_icon'+zoomIndex).css({'background-position':'left top'});
                    });
                    */
                }
            }
        });
    }
    
    
    //===============================================================================
    // 現在の画像インデックスを取得する
    //===============================================================================
    function getIndex(obj){
        for(i=0; i<arrContents.length; i++){
            if(obj.attr('href') == arrContents[i].attr('href')){
                return i;
            }
        }
        
        return 0;
    }
    
    //===============================================================================
    // 画像の表示処理
    //===============================================================================
    function flyOut(obj){
        e = true;
        link_obj = $(obj);
        img_obj = $('img', obj);
        view_img = new Image();
        win_width = $(window).width();
        win_height = $(window).height();
        scroll_left = $(window).scrollLeft();
        scroll_top = $(window).scrollTop();
        img_info = img_obj.offset();
        img_info.left += defaults.startOffsetX;
        img_info.top += defaults.startOffsetY;
        imgHeight = (defaults.startHeight > 0 ? defaults.startHeight:img_obj.height());
        imgWidth = (defaults.startWidth > 0 ? defaults.startWidth:img_obj.width());
        $('<div></div>').attr('id',defaults.loader).appendTo('body').css({
            'position':'absolute',
            'top':img_info.top,
            'left':img_info.left,
            'height':imgHeight,
            'width':imgWidth,
            'opacity':.5,
            'display':'block',
            'z-index':defaults.loaderZIndex
        });
        
        imgIndex = getIndex(link_obj);
        
        if(defaults.loadingSrc){
            $('#'+defaults.loader).append($('<img/>').load(function(){
                $(this).css(
                    {
                        'position':'absolute',
                        'top':imgHeight/2-(this.height/2),
                        'left':imgWidth/2-(this.width/2)
                    }
                ).attr('alt',defaults.loadingText)
            }).attr('src', defaults.loadingSrc))
        }else{
            $('#'+defaults.loader).css('background-color','#000').append($('<span></span>').text(defaults.loadingText).css({
                'position':'relative',
                'top':'2px',
                'left':'2px',
                'color':'#FFF',
                'font-size':'9px'
            }))
        }
        
        
        $(view_img).load(function(){
            // 画像タグの情報セット
            imgtag = $('<img id="view_img" />').attr(
                'src',
                link_obj.attr('href')
            ).attr(
                'alt',
                img_obj.attr('alt')
            ).css(
                {
                    'width':imgWidth,
                    'height':imgHeight,
                    'border':'0px solid #000000'
                }
            );
            
            defaults.flyOutStart.call(obj);
            if(defaults.destElement){
                var a = $(defaults.destElement);
                max_x = a.innerWidth()-(defaults.destPadding*2);
                max_y = a.innerHeight()-(defaults.destPadding*2)
            }else{
                max_x = $(window).width()-defaults.widthMargin;
                if($.browser.opera)
                    wh = document.getElementsByTagName('html')[0].clientHeight;
                else
                    wh = $(window).height();
                max_y = wh-defaults.heightMargin
            }
            width = view_img.width;
            height = view_img.height;
            x_dim = max_x/width;
            y_dim = max_y/height;
            if(x_dim <= y_dim){
                y_dim = x_dim
            }else{
                x_dim = y_dim
            }
            dw = Math.round(width*x_dim);
            dh = Math.round(height*y_dim);
            if(dw > width){
                dw = width
            }
            if(dh > height){
                dh = height
            }
            if(defaults.destElement){
                dPos = a.offset();
                dl = Math.round((a.outerWidth()/2)-(dw/2)+dPos.left);
                dt = Math.round((a.outerHeight()/2)-(dh/2)+dPos.top)
            }else{
                dl = Math.round(($(window).width()/2)-(dw/2)+scroll_left);
                if($.browser.opera){
                    wh = document.getElementsByTagName('html')[0].clientHeight;
                }else{
                    wh = $(window).height();
                }
                dt = Math.round((wh/2)-(dh/2)+scroll_top)
            }
            
            
            // オーバーレイの情報セット
            $('body').append($('<div id="overlay"></div>'));
            $('#overlay').css({
                width:win_width,
                height:win_height*2,
                display:'block',
                position:'absolute',
                backgroundColor:'#000000',
                zIndex:0,
                top:scroll_top-win_height/2,
                left:0
            });
            $('#overlay').fadeTo(0, 0);
            
            
            // ヘッダボックスの情報セット
            head_top = dt - defaults.headHeight;
            head_bottom = dt;
            $('body').append($('<div id="flyout_head"></div>'));
            $('#flyout_head').css({
                width:dw + defaults.destPadding*2,
                height:defaults.headHeight,
                position:'absolute',
                background:'#000000 url(./flyout/images/close.png) no-repeat center center',
                zIndex:400,
                color:defaults.fontColor,
                textAlign:'center',
                top:head_bottom,
                left:dl
            }).hide();
            
            $('#flyout_head').click(function(){
                if(e == true){
                    return false
                }
                if(d){
                    putAway(null)
                }else{
                    flyOut(null)
                }
                return false
            });
            
            // ボタン表示フラグ
            if(defaults.link_rotation){
                if(imgIndex > 0){
                    prevDisp = true;
                }else{
                    prevDisp = false;
                }
                
                if(imgIndex < arrContents.length-1){
                    nextDisp = true;
                }else{
                    nextDisp = false;
                }
            }else{
                prevDisp = false;
                nextDisp = false;
            }
            
            // データボックスの情報セット
            var databox = "";
                databox = '<div id="flyout_data">';
                if(prevDisp){
                    databox += '<div id="prev"><img src="'+defaults.arrowPrevSrc+'" width="'+defaults.arrowPrevWidth+'" height="'+defaults.arrowPrevHeight+'" /></div>';
                }
                databox += '<div id="flyout_comment">'+link_obj.attr('title')+'</div>';
                if(nextDisp){
                    databox += '<div id="next"><img src="'+defaults.arrowNextSrc+'" width="'+defaults.arrowNextWidth+'" height="'+defaults.arrowNextHeight+'" /></div>';
                }
                databox += '</div>';
            $('body').append($(databox));
            $('#flyout_data').css({
                width:dw + defaults.destPadding*2,
                height:0,
                position:'absolute',
                backgroundColor:'#000000',
                zIndex:400,
                color:defaults.fontColor,
                top:dt + dh + defaults.destPadding*2,
                left:dl
            }).hide();
            
            if(prevDisp){
                $('#prev').css({
                    width:defaults.arrowPrevWidth,
                    height:defaults.arrowPrevNext,
                    top:0,
                    left:defaults.destPadding,
                    position:'absolute',
                    zIndex:450
                }).click(function(){
                    clickAction(arrContents[imgIndex-1]);
                    return false;
                });
            }
            
            if(nextDisp){
                $('#next').css({
                    width:defaults.arrowNextWidth,
                    height:defaults.arrowNextNext,
                    top:0,
                    left:dw - defaults.arrowNextWidth,
                    position:'absolute',
                    zIndex:460
                }).click(function(){
                    clickAction(arrContents[imgIndex+1]);
                    return false;
                });
            }
            
            $('#flyout_comment').css({
                width:dw - defaults.arrowNextWidth - defaults.arrowPrevWidth,
                height:'auto',
                top:0,
                left:defaults.arrowNextWidth + defaults.destPadding,
                position:'absolute',
                textAlign:'center',
                zIndex:420
            });
            
            
            // オーバーレイ
            $('#overlay').fadeTo("slow", 0.7);
            
            
            // 画像を徐々に拡大
            $('#'+defaults.loader).empty().css('opacity',1).append(imgtag).width('auto').height('auto').animate(
                {
                    top:dt,
                    left:dl
                },
                {
                    duration:defaults.outSpeed,
                    queue:false,
                    easing:defaults.outEase,
                    complete: function(){
                        // ヘッダボックスを表示
                        $('#flyout_head').show();
                        $('#flyout_head').animate(
                            {
                                top:head_top
                            },
                            {
                                duration:"fast",
                                queue:false,
                                easing:defaults.outEase
                            }
                        );
                        
                        // データボックスを表示
                        $('#flyout_data').show();
                        $('#flyout_data').animate(
                            {
                                height:defaults.boxHeight
                            },
                            {
                                duration:"fast",
                                queue:false,
                                easing:defaults.outEase
                            }
                        );
                    }
                }
            );
            
            // アニメーション
            $('#'+defaults.loader+' '+l).animate(
                {
                    height:dh,
                    width:dw,
                    borderWidth:5
                },
                defaults.outSpeed,
                defaults.outEase,
                function(){
                    defaults.flyOutFinish.call(obj);
                    d = obj;
                    link_obj.addClass(defaults.shownClass);
                    e = false;
                    $('#'+defaults.loader+' '+l).click(function(){putAway(null)})
                }
            );
        });
        
        view_img.src = link_obj.attr('href')
    }
    
    
    //===============================================================================
    // 画像の格納処理
    //===============================================================================
    function putAway(a){
        if(e == true || d == false){
            return false
        }
        defaults.putAwayStart.call(d);
        e = true;
        img_info = img_obj.offset();
        img_info.left += defaults.startOffsetX;
        img_info.top += defaults.startOffsetY;
        
        // オーバーレイ
        $('#overlay').fadeTo("slow", 0);
        
        // データボックスを格納
        $('#flyout_head').animate(
            {
                top:head_bottom
            },
            {
                duration:defaults.outSpeed,
                queue:false,
                duration:"fast",
                easing:defaults.outEase
            }
        );
        
        // データボックスを格納
        $('#flyout_data').animate(
            {
                height:0
            },
            {
                duration:defaults.outSpeed,
                queue:false,
                duration:"fast",
                easing:defaults.outEase,
                complete: function(){
                    $('#overlay').hide().remove();
                    $('#flyout_head').hide().remove();
                    $('#flyout_data').hide().remove();
                    
                    // 画像を縮小する
                    $('#'+defaults.loader).animate(
                        {
                            top:img_info.top,
                            left:img_info.left
                        },
                        {
                            duration:defaults.inSpeed,
                            queue:false,
                            easing:defaults.inEase
                        }
                    );
                    
                    // 画像を一瞬大きくする
                    $('#'+defaults.loader+' '+l).animate(
                        {
                            height:imgHeight,
                            width:imgWidth,
                            borderWidth:0
                        },
                        defaults.inSpeed,
                        defaults.inEase,
                        function(){
                            $('#'+defaults.loader).css('display','none').remove();
                            defaults.putAwayFinish.call(d);
                            e = false;
                            view_img = null;
                            if(a&&a != d){
                                d = false;
                                flyOut(a)
                            }
                            d = false;
                            link_obj.removeClass(defaults.shownClass)
                        }
                    );
                }
            }
        );
    }
    
    return this
}});

/*
$(document).ready(function(){
    $('a[rel*="flyout"]').flyout();
});
*/

window.onload = function(){
    $('a[rel*="flyout"]').flyout();
}