/**
 *  Cuban Council
 *  Work Detail page JS
 *
 *  Dependencies
 *  - jQuery
 *
 */

(function($) {
    
    var cssOpacity = $('html').attr('class').match(/opacity/);
    var isIOS = (navigator.userAgent.match(/(?:iPhone|iPad|iPod)/i) != null);
    var isMobile = (navigator.userAgent.match(/(?:iPhone|iPad|iPod|Android)/i) != null);
    var isLteIE6 = typeof document.body.style.maxHeight == 'undefined';

    var CubanWorkDetail = {

        init: function() {

            // initialize footer work tray
            CubanWorkDetailTray.init();
         
            // pagination arrows
            CubanWorkDetail.workPagination();
         
            // work mouseovers
            $('.box-werktb a').mouseenter(function(){
                if (cssOpacity) {
                    $(this).children('.werktb-over').fadeIn(200);
                } else {
                    $(this).children('.werktb-over').css('display','block');
                }
            }).mouseleave(function(){
                if (cssOpacity) {
                    $(this).children('.werktb-over').fadeOut(200);
                } else {
                    $(this).children('.werktb-over').css('display','none');
                }
            });
         
            // quote resizing
            $('.work-quote blockquote').each(function() {
                var self = $(this);
                var fontSize = parseInt(self.css('font-size').replace('px', ''));
                while(self.height() > 150 && fontSize > 15) {
                    self.css('font-size', fontSize--);
                }
            });

        },
     
        workPagination: function() {
         
            var sideLWidth = '1';
            var sideRWidth = '1';
            $('.work-arr-l-back, .work-arr-r-back').css('width', '1px');
            $('.work-arr-l-box, .work-arr-r-box').css('visibility','visible');
            if (!isMobile && !isLteIE6) {
                $('a.work-arr-l-box, a.work-arr-r-box').css({ 'position':'fixed', 'top': '40%' });
            }
         
            // left arrow
            $('.work-arr-l-box').mouseenter(function(){
                if (sideLWidth == 1) {
                    sideLWidth = ($('.work-arr-l-back').prop('scrollWidth') + 10);
                }
                $('.work-arr-l-back').stop(true).animate({ width: sideLWidth+'px' }, 200);
            }).mouseleave(function(){
                $('.work-arr-l-back').stop(true).animate({ width:'1px' }, 200);
            });
         
            // right arrow
            $('.work-arr-r-box').mouseenter(function(){
                if (sideRWidth == 1) {
                    sideRWidth = ($('.work-arr-r-back').prop('scrollWidth') + 10);
                }
                $('.work-arr-r-back').stop(true).animate({ width: sideRWidth+'px' }, 200);
            }).mouseleave(function(){
                $('.work-arr-r-back').stop(true).animate({ width:'1px' }, 200);
            });

        }

    };

    var CubanWorkDetailImages = {

        loadedImages: [],
        scrollTimer: null,
        isAnimating:false,

        init: function(data) {

            var self = this;

            // Store thumb box top offset

            var offset = $('.work-images').offset();
            var scrollTimer;

            self.offsetTop = parseInt(offset.top);
            self.totalHeight = parseInt($('.work-detail-in').height());

            $(window).bind('scroll resize', function() {
                self.updateZoom();
            });

            // work thumbnail mouseovers
            if (!isIOS) {
                $('.workdetail-thumb').bind({
                    'mouseenter': function() {
                        $(this).addClass('wd-thumb-over');
                        $(this).children('.magnify').fadeIn(200);
                    },
                    'mouseleave': function() {
                        $(this).removeClass('wd-thumb-over');
                        $(this).children('.magnify').hide();
                    }
                });
            }

            for (var i = 0; i < data.length; i++){
                var btnimage = data[i];
                var btn = $('#btn-project-image-' + btnimage.pk).data({
                    'zoom_url': $('#btn-project-image-' + btnimage.pk).attr('href'),
                    'zoom_height': Math.floor(btnimage.height * (648 / btnimage.width)),
                    'zoom_caption': btnimage.title
                });

                $('#btn-project-image-' + btnimage.pk).click(function(e) {
                    e.preventDefault();
                    self.showZoom($(this).data('zoom_url'), $(this).data('zoom_caption'), $(this).data('zoom_height'));
                });
            };

            $('.work-images-lrg').click(function(e) {
                e.preventDefault();
                self.hideZoom();
            });

            $('.work-images-lrg .stnd-in').css({'fakeLeft': 0});
            $('.work-images .stnd-in').css({'fakeLeft': 0});

            if (isIOS) {
                $('.work-images-lrg .stnd-in').css({'webkitTransform': 'translate3d(0,0,0)'});
                $('.work-images .stnd-in').css({'webkitTransform': 'translate3d(0,0,0)'});
            }
        },

        // private utility function for switching betweent marginLeft and translate3d in animate step
        _fakeLeftStep: function(now) {
            if (isIOS) {
                $(this).css('webkitTransform', 'translate3d(' + now + 'px,0,0)');
            } else {
                $(this).css('marginLeft', now + 'px');
            }
        },

        showZoom: function(image, caption, imageHeight) {
            var self = this;

            self.isAnimating = true;
            clearTimeout(self.scrollTimer);

            $('.work-images-lrg .stnd-in').stop(true).removeData('top');

            $('.work-images .stnd-in').animate({ fakeLeft: 672 }, {
                duration: 200, 
                easing: 'swing', 
                step: CubanWorkDetailImages._fakeLeftStep,
                complete: function() {

                    $('.work-images').css('width', '0');
                    $('.work-images-lrg').css({'display': 'block','width': '672px'}).find('figcaption').html(caption);
                    $('.work-images-lrg .stnd-in').css({'fakeLeft': 672}).each(function() {
                        var self = $(this);
                        var fakeLeft = self.css('fakeLeft');
                        if (isIOS) {
                            self.css('webkitTransform', 'translate3d(' + fakeLeft + 'px,0,0)');
                        } else {
                            self.css('marginLeft', fakeLeft + 'px');
                        }
                    });


                    $('.work-images-lrg a').hide();
                    $('.work-images-lrg .mid').css({ // Adjust height to zoom image
                        'height': imageHeight + 'px',
                        'min-height':'0',
                        'overflow': 'hidden'
                    });

                    self.positionZoom(false);
                    $(window).trigger('resize');

                    // If image not loaded...

                    if ($.inArray(image, self.loadedImages) < 0) {

                        $('.work-images-lrg .loading').show(); // Show 'loading' indicator

                        // Slide in image, fade in image onload

                        $('.work-images-lrg .stnd-in').animate({ fakeLeft: 0 }, {
                            duration: 200, 
                            easing: 'swing',
                            step: CubanWorkDetailImages._fakeLeftStep,
                            complete: function() {
                                var imageLoad = new Image();
                                imageLoad.onload = function() {
                                    self.loadedImages.push(image);
                                    $('.work-images-lrg a img').attr('src', image);
                                    if (!isIOS) {
                                        $('.work-images-lrg .loading').fadeOut(200);
                                        $('.work-images-lrg a').fadeIn(200);
                                    } else {
                                        $('.work-images-lrg .loading').hide();
                                        $('.work-images-lrg a').show();
                                    }
                                }
                                imageLoad.src = image;
                                self.isAnimating = false;
                            }
                        });
                    } else {
                        $('.work-images-lrg a img').attr('src', image);
                        $('.work-images-lrg a').show();
                        $('.work-images-lrg .stnd-in').animate({ fakeLeft: 0 }, {
                            duration: 200, 
                            easing: 'swing', 
                            step: CubanWorkDetailImages._fakeLeftStep,
                            complete: function() {
                                self.isAnimating = false;
                            }
                        });
                    }
                }
            });
        },

        hideZoom: function() {
            var self = this;

            clearTimeout(self.scrollTimer);
            self.isAnimating = true;

            $('.work-images-lrg .stnd-in').animate({ fakeLeft:672 }, {
                duration: 200, 
                easing: 'swing',  
                step: CubanWorkDetailImages._fakeLeftStep,
                complete: function() {
                    $('.work-images-lrg').css('width', '0');
                    $('.work-images').css('width', '672px');
                    $('.work-images .stnd-in').animate({ fakeLeft: 0 }, {
                        duration: 200, 
                        easing: 'swing',
                        step: CubanWorkDetailImages._fakeLeftStep
                    }); // slide in image  list
                    self.isAnimating = false;
                }
            });
        },

        updateZoom: function() {
            var self = this;
            if (parseInt($('.work-images-lrg').css('width')) > 0 && !this.isAnimating) {
                clearTimeout(self.scrollTimer);
                self.scrollTimer = setTimeout(function() { self.positionZoom() }, 250);
            }
        },

        positionZoom: function(anim) {

            this.totalHeight = parseInt($('.work-detail-in').height()) - 7;

            var winHeight = $(window).height();
            var anim = (typeof anim == 'boolean') ? anim : true;
            var zoom = $('.work-images-lrg .stnd-in');
            var height = zoom.height();
            var scrollTop = $(window).scrollTop();
            var topMargin = scrollTop - this.offsetTop;
            var maxMargin = Math.max(0, Math.floor(this.totalHeight - height));
            var topMargin = Math.min(Math.max(0, topMargin), maxMargin);

            if (height >= winHeight) {
                if (zoom.data('top') != undefined && zoom.data('top') < topMargin) return;
            }    

            if (anim) {
                zoom.stop(true).animate({'margin-top': topMargin + 'px'}, 200);
            } else {
                zoom.stop(true).css({'margin-top': topMargin + 'px'});
            }

            zoom.data('top', topMargin);
        }

    };
    
    var tray = CubanWorkDetailTray = {
        
        scrollContainer: '',
        scrollContent: '',
        thumbPages: '',
        nextPageEl: '',
        prevPageEl: '',
        pageNum: 0,
        pageWidth: 984,
        workExpanded: false,
        
        init: function() {
            tray.scrollContainer = $('#footer-worktray-container');
            tray.scrollContent = tray.scrollContainer.find('.hscroll-content');
            
            tray.thumbPages = tray.scrollContent.find('.thumbs-page');
            tray.nextPageEl = $('#btn-worktray-next');
            tray.prevPageEl = $('#btn-worktray-prev');

            // update content size
            tray.scrollContent.css({ 'width': Math.max(tray.thumbPages.length, 1) * tray.pageWidth + 'px' });

            tray.nextPageEl.click(function(e) {
                e.preventDefault();
                if (tray.pageNum + 1 < tray.thumbPages.length) {
                    tray.pageNum++;
                    tray.scrollPages();
                }
            });

            tray.prevPageEl.click(function(e) {
                e.preventDefault();
                if (tray.pageNum - 1 >= 0) {
                    tray.pageNum--;
                    tray.scrollPages();
                }
            });
            
            // Add touch dragging for iOS
            if (isMobile) {
                $(tray.scrollContainer).touchyscroll(tray.scrollContent).bind('touchyscroll', function(e) {
                    var oldPageNum = tray.pageNum;
                    tray.pageNum = Math.max(0, Math.min(Math.round($(this).touchyscroll('left') / tray.pageWidth), tray.thumbPages.length - 1));
                    if (oldPageNum != tray.pageNum) tray.updateNav();
                });
            }
            
            this.updateNav();
            
            // Setup worktray tab
            $('#cc-footer .footer-worktab a').click(function(e) {
                e.preventDefault();

                if (!tray.workExpanded) {
                    $(this).addClass('selected');
                    tray.workExpanded = true;
                    $('#footer-worktray').stop(true).animate({height: '290px'}, 200);
                } else {
                    $(this).removeClass('selected');
                    tray.workExpanded = false;
                    $('#footer-worktray').stop(true).animate({height: '0px'}, 200);
                }
            });
        },
        
        scrollPages: function() {
            if (isMobile) {
                tray.scrollContainer.touchyscroll('stop').animate({'scrollboxLeft': tray.pageNum * tray.pageWidth}, {
                    duration: speed,
                    step: function(now) {
                        tray.scrollContainer.touchyscroll('left', now);
                    }
                });
            } else {
                tray.scrollContainer.stop(true).animate({'scrollLeft': (tray.pageNum * tray.pageWidth) + 'px'}, speed, 'easeOutCubic');
                this.updateNav();
            }
            var speed = isMobile ? 800 : 500;
            
        },
        
        updateNav: function() {
            if (tray.pageNum == 0) {
                tray.prevPageEl.addClass('disabled');
            } else {
                tray.prevPageEl.removeClass('disabled');
            }

            if (tray.pageNum + 1 >= tray.thumbPages.length) {
                tray.nextPageEl.addClass('disabled');
            } else {
                tray.nextPageEl.removeClass('disabled');
            }
        }
    };
    
    window.CubanWorkDetail = CubanWorkDetail;
    window.CubanWorkDetailImages = CubanWorkDetailImages;
    window.CubanWorkDetailTray = CubanWorkDetailTray;

    $(document).ready(function() {
        CubanWorkDetail.init();
    });

})(jQuery);