$(function(){

    if ($('#nav-comm').length) {
        $('#nav-comm').mouseover(function(event){
            if (event.target.id) {
                $('#t-' + event.target.id).addClass('img-highlight');
            }
        });
        $('#nav-comm').mouseout(function(event){
            if (event.target.id) {
                $('#t-' + event.target.id).removeClass('img-highlight');
            }
        });
        $('.thumbs a').mouseenter(function(event){
            var parts = this.id.toString().split("-");
            $('#n-' + parts[2]).addClass('nav-highlight');
        });
        $('.thumbs a').mouseleave(function(event){
            var parts = this.id.toString().split("-");
            $('#n-' + parts[2]).removeClass('nav-highlight');
        });
    }

    //$('.content').jScrollPane({showArrows:true, arrowSize: 13, scrollbarWidth: 13});
    if ($('.content').length) {
        $('.content').jScrollPane();
    }

    // image preview
    if ($('.thumbs').length) {

        // product thumbs

        $('#thumbs img').mouseenter(function(e){
            var middle = $(document).width() / 2;
            var left = $(this).offset().left;
            var top = $(this).offset().top;
            if (left < middle) {
                shiftLeft = 110;
            } else {
                shiftLeft = -250;
            }
            var parts = this.src.split("/");
            var img = parts[parts.length - 1];
            var src = "/img/products/main/" + img;
            var parts = this.alt.split(" - ");
            var title = parts[1] + " &gt; " + parts[0];
            $('#img-preview').css({left: left + shiftLeft + 'px', top: top - 80 + 'px'});
            $('#img-preview .title').html(title);
            $('#img-preview .img').html("<img src='" + src + "' />");
            $('#img-preview').show();
        });
        $('.thumbs img').mouseleave(function(e){
            var parts = this.src.split("/");
            var img = parts[parts.length - 1];
            var src = "/img/products/main/" + img;
            $('#img-preview').hide();
            $('#img-preview .img').html("");
            $('#img-preview .title').html("");
        });

        // other thumbs
        $('#collection img').mouseenter(function(e){
            var middle = $(document).width() / 2;
            var left = $(this).offset().left;
            var top = $(this).offset().top;
            if (left < middle) {
                shiftLeft = 110;
            } else {
                shiftLeft = -250;
            }
            var parts = this.src.split("/");
            var img = parts[parts.length - 1];
            var src = "/img/products/main/" + img;
            var parts = this.alt.split(" - ");
            var title = parts[1] + " &gt; " + parts[0];
            $('#img-preview').css({left: left + shiftLeft + 'px', top: top - 80 + 'px'});
            $('#img-preview .title').html(title);
            $('#img-preview .img').html("<img src='" + src + "' />");
            $('#img-preview').show();
        });
        $('#collection img').mouseleave(function(e){
            var parts = this.src.split("/");
            var img = parts[parts.length - 1];
            var src = "/img/products/main/" + img;
            $('#img-preview').hide();
            $('#img-preview .img').html("");
            $('#img-preview .title').html("");
        });

    }

    // family photo preview
    if ($('#hg-img').length) {
        $('#hg-img').mouseenter(function(e){
            var middle = $(document).width() / 2;
            var top = $(this).offset().top - 140;
            var left = middle - 450;
            $('#hg-preview').css({left: left + 'px', top: top + 'px'});
            $('#hg-preview').fadeIn();
        });
        $('#hg-img').mouseleave(function(e){
            $('#hg-preview').fadeOut();
        });
    }

    $('#nl').click(function(){
        return showWin('ck_win2');
    });

    $('#ck_win_close2').click(function(){
        return hideWin('ck_win2');
    });

    $('#send-friend a').click(function(){
        return showWin('ck_win3');
    });

    $('#ck_win_close3').click(function(){
        return hideWin('ck_win3');
    });
    
    $('#contact-link').click(function(){
        $('#ck_win4 iframe').attr('src', "/contact?product=" + $(this).attr('title'));
        return showWin('ck_win4');
    });
    
    $('#ck_win_close4').click(function(){
        return hideWin('ck_win4');
    });

    $('.prod-img a').click(function(){
        showWin('ck_win');
        $('#popup_img').hide();
        $('#popup_img').attr('src', this.href);
        $('#popup_img').load(function(){
            $('#popup_img').show();
        });

        return false;
    });

    $('#ck_win_close').click(function(){
        return hideWin('ck_win');
    });

    function showWin(win){
        if ($('#flash').length) {
            $('#flash').hide();
        }
        $('#' + win).slideDown();
        return false;
    }

    function hideWin(win){
        $('#' + win).slideUp();
        if ($('#flash').length) {
            $('#flash').show();
        }
        return false;
    }
    
    
    
    // video
    if ($('#video-thumb').length) {
    
        // videos
        var panel = new Panel({
            id: 'qplayer',
            modal: true,
            centered: false,
            onClose: function(){
                YouTube.stop();
            }
        });
        
        YouTube.load({
            id: 'qyt',
            width: 638,
            height: 363,
            background: '#000'
        });
        
        panel.html(YouTube.html);
        
        $('#video-thumb a').click(function(){
            var videoId = this.href.split("=")[1];
            panel.open();
            YouTube.play(videoId);
            return false;        
        });
    }


});


function onYouTubePlayerReady() {
    ytplayer = document.getElementById(YouTube.id);
    ytplayer.playVideo();
    //ytplayer.loadVideoById(YouTube.videoId);
}



var YouTube = {
    
    load: function(params){
        this.container = params.id + 'Container';
        this.video = params.id + 'Video';
        this.id = params.id;
        this.width = params.width;
        this.height = params.height;
        this.background = params.background
        this.videoHtml = "<div id='" + this.video + "'>You need Flash player 8+ and JavaScript enabled to view this video.</div>";
        this.html = "<div id='" + this.container + "'>" + this.videoHtml + "</div>";
       // this.embedded = false;
        //this.player = null;
    },
    
    embed: function(videoId){
        swfobject.embedSWF(
            //"http://www.youtube.com/apiplayer?enablejsapi=1&version=3",
            "http://www.youtube.com/v/" + videoId + "&enablejsapi=1&playerapiid=ytplayer", 
            this.video, 
            this.width, 
            this.height, 
            "8", 
            null, 
            null, 
            {bgcolor: this.background, allowScriptAccess: "always"},  // params
            {id: this.id} // atts
        );
        this.embedded = true;
        //this.videoId = videoId;        
    },
    
    play: function(videoId){        
        $('#' + this.container).html(this.videoHtml);
        this.embed(videoId);
    },
    
    stop: function(){
        document.getElementById(this.id).clearVideo();
    }
    
}


/*
 * Floating Panel - optionally modal
 */
var Panel = function(params){
    var html = "<div id='" + params.id + "'><div class='qheader'><div class='qclose'>CLOSE X</div><span class='qtitle'></span></div><div class='qcontent'></div><div class='qfooter'></div></div>";
    $('#inhalt').append(html);
    var that = this;
    this.id = params.id;
    this.elm = $('#' + params.id);
    $(this.elm).css({'z-index':11000})
    this.header = $('#' + params.id + ' .qheader');
    this.closeButton = $('#' + params.id + ' .qclose');
    this.content = $('#' + params.id + ' .qcontent');
    this.footer = $('#' + params.id + ' .qfooter');
    this.modal = params.modal;
    this.overlayId = 'overlay';
    this.setOverlay();
    params.draggable ? that.draggable(): null;
    params.easyHide ? that.easyHide() : null;
    params.onOpen ? this.openCallback = params.onOpen : this.openCallback = null;
    params.onClose ? this.closeCallback = params.onClose : this.closeCallback = null;
    $(this.closeButton).click(function(){
        that.close();
    });
    //params.centered ? this.centred = true : this.centered = false;
    this.centered = params.centered||false;
}

Panel.prototype = {
    
    html: function(content){        
        $(this.content).html(content);
    },
    
    footerHtml: function(content){
        $(this.footer).append(content);
    }, 
    
    open: function(){
        this.insertOverlay();  
        //if ($.browser == 'msie') {
            //$(this.elm).css('margin-top','113px');
        //}     
        $(this.elm).fadeIn('medium');
        if (this.centered) {
            var top = document.getElementsByTagName('html')[0].scrollTop + 80;
            this.elm.css({top: top + 'px'});
        }
        if (this.openCallback) {
            this.openCallback();
        }        
    },
    
    close: function(callback){
        $(this.elm).hide();
        this.removeOverlay();
        if (this.closeCallback) {
            this.closeCallback();
        }
    },
    
    insertOverlay: function(){
        $('#' + this.overlayId).show();
    },
    
    removeOverlay: function(){
        $('#' + this.overlayId).hide();
    },
    
    easyHide: function(){
        var that = this;
        $('#' + this.overlayId).click(function(){
            that.close();            
        });
    },
    
    draggable: function(){
        $(this.header).css({
            cursor: 'move'
        });
        this.elm.draggable({
            handle: this.header
        });
    },
    
    onclose: function(callback){
        this.closeCallback = callback;
    },
    
    setOverlay: function(){
        $('body').append("<div id='" + this.overlayId + "'></div>");
        $('#' + this.overlayId).css({
            display: 'none',
            height: '100%',
            width: '100%',
            position: 'fixed',
            left: '0',
            top: '0',
            'z-index': 10000,
            opacity: '0.9',
            background: '#fff'
        });
        
    }
}