// JScript File

jQuery.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img>").attr("src", arguments[i]);
  }
}

$(document).ready(function() {
    $.preloadImages("images/why-d.gif", "images/who-d.gif", "images/how-d.gif", "images/why-u.jpg", "images/who-u.jpg", "images/how-u.jpg");
    $('div#tab1, div#tab2, div#tab3, div#tab1 h2, div#tab2 h2, div#tab3 h2, div.closebtn, div.infobox1, div.infobox2, div.infobox3, div.mask').hide(10);

    $('div#tab1 h2').css('margin-left', '-25px');
    
    var formStr = '<div class="form"><p>For more information please supply us with your details below and we will reply as soon as we can.</p>' +
    '<label for="name">Name: <input type="text" id="name" /></label>' +
    '<label for="email">Email: <input type="text" id="email" /></label>' +    
    '<label for="submit"> <input type="submit" id="submit" value="Go >" /></label>' +
    '</form>';
    
    var browserName = navigator.appName;
    var browserVer = parseInt(navigator.appVersion);
    if(browserName=="Microsoft Internet Explorer" && browserVer<=7)
    {
        $('div.content').css('position', 'absolute');
        $('div.content').css('marginLeft', '-770px');
    }
    
    $('#threeways').hover(function() {
        $(this).attr('src', 'images/btn-3wayslink2.jpg');
    }, function() {
        $(this).attr('src', 'images/btn-3wayslink.jpg');
    });
    
    $('img#why').hover(function() {    
        $(this).attr('src', 'images/why-d.gif');
    }, function() {
        $(this).attr('src', 'images/why-u.jpg');
    });
    $('img#how').hover(function() {    
        $(this).attr('src', 'images/how-d.gif');
    }, function() {
        $(this).attr('src', 'images/how-u.jpg');
    });
    $('img#who').hover(function() {    
        $(this).attr('src', 'images/who-d.gif');
    }, function() {
        $(this).attr('src', 'images/who-u.jpg');
    });
//    $('img').hover(function() {
//        if($(this).attr('id') == 'how') {
//            $(this).attr('src', 'images/how-d.gif');
//        } else if($(this).attr('id') == 'why') {
//            $(this).attr('src', 'images/why-d.gif');
//        } else if($(this).attr('id') == 'who') {
//            $(this).attr('src', 'images/who-d.gif');
//        }}, function() {
//        if($(this).attr('id') == 'how') {
//            $(this).attr('src', 'images/how-u.jpg');
//        } else if($(this).attr('id') == 'why') {
//            $(this).attr('src', 'images/why-u.jpg');
//        } else if($(this).attr('id') == 'who') {
//            $(this).attr('src', 'images/who-u.jpg');
//        }
//    });
    
    $('h2').hover(function() {
        $(this).css('color', '#f6c384');
    }, function() {
        $(this).css('color', '#fff');
    });
    
    $('div.circle-r').click(function() {
        var $previousimg = $(this).siblings('div.circle-l').children('img');
        var $selection = $(this).children('img');
        var $nextimg = $(this).siblings('div.circle-t').children('img');
        $('div#tab1').fadeOut('fast');
        $('div#tab2').fadeOut('fast');
        $('div#tab3').fadeOut('fast');
        $('h2').empty();
        $('div.circle-t').children('img').fadeOut('slow');
        $('div.circle-l').children('img').fadeOut('slow');
        $(this).children('img').fadeOut('slow', function() {
            $selection.appendTo('div.circle-t').fadeIn('slow', function() {
                if ($selection.attr('id') == 'who') {
                    $('div#tab1').show('fast', function() {
                        $('div#tab3').show('fast', function() {
                            $('div#tab1 h2').append('Relationships').fadeIn('slow')
                                            .show('fast', function() {
                                $('div#tab3 h2').append('Reputation').fadeIn('slow')
                                                .show('fast');
                            });
                        });
                    });
                } else if ($selection.attr('id') == 'how') {    
                    $('div#tab1').show('fast', function() {
                        $('div#tab3').show('fast', function() {
                            $('div#tab1 h2').append('Personal skills').fadeIn('slow')
                                            .show('fast', function() {
                                $('div#tab3 h2').append('Expertise').fadeIn('slow')
                                                .show('fast');
                            });
                        });
                    });
                } else if ($selection.attr('id') == 'why') {    
                    $('div#tab1').show('fast', function() {
                        $('div#tab3').show('fast', function() {
                            $('div#tab2').show('fast', function() {
                                $('div#tab1 h2').append('Identity').fadeIn('slow')
                                                .show('fast', function() {
                                    $('div#tab3 h2').append('Values').fadeIn('slow')
                                                    .show('fast', function() {
                                        $('div#tab2 h2').append('Motivation')
                                                        .show('fast');
                                    });
                                });
                            });
                        });
                    });
                };
                                $previousimg.appendTo('div.circle-r').fadeIn('slow');
                                $nextimg.appendTo('div.circle-l').fadeIn('slow');
           });
        });
    });
    
    $('div.circle-l').click(function() {
        var $previousimg = $(this).siblings('div.circle-t').children('img');
        var $selection = $(this).children('img');
        var $nextimg = $(this).siblings('div.circle-r').children('img');
        $('div#tab1').fadeOut('fast');
        $('div#tab2').fadeOut('fast');
        $('div#tab3').fadeOut('fast');
        $('h2').empty();
        $('div.circle-t').children('img').fadeOut('slow');
        $('div.circle-r').children('img').fadeOut('slow');
        
        $(this).children('img').fadeOut('slow', function() {
            $selection.appendTo('div.circle-t').fadeIn('slow', function() {
                if ($selection.attr('id') == 'who') {
                    $('div#tab1').show('fast', function() {
                        $('div#tab3').show('fast', function() {
                            $('div#tab1 h2').append('Relationships')
                                            .show('fast', function() {
                                $('div#tab3 h2').append('Reputation')
                                                .show('fast');
                            });
                        });
                    });
                } else if ($selection.attr('id') == 'how') {    
                    $('div#tab1').show('fast', function() {
                        $('div#tab3').show('fast', function() {
                            $('div#tab1 h2').append('Personal skills').fadeIn('slow')
                                            .show('fast', function() {
                                $('div#tab3 h2').append('Expertise')
                                                .show('fast');
                            });
                        });
                    });
                } else if ($selection.attr('id') == 'why') {    
                    $('div#tab1').show('fast', function() {
                        $('div#tab3').show('fast', function() {
                            $('div#tab2').show('fast', function() {
                                $('div#tab1 h2').append('Identity')
                                                .show('fast', function() {
                                    $('div#tab3 h2').append('Values')
                                                    .show('fast', function() {
                                        $('div#tab2 h2').append('Motivation')
                                                        .show('fast');
                                    });
                                });
                            });
                        });
                    });
                };
                                $previousimg.appendTo('div.circle-r').fadeIn('slow');
                                $nextimg.appendTo('div.circle-l').fadeIn('slow');
                            
            });
        });
    });
    
    $('div.circle-t').click(function() {
        var $selection = $(this).children('img');
        $('div#tab1').fadeOut('fast');
        $('div#tab2').fadeOut('fast');
        $('div#tab3').fadeOut('fast');
        $('h2').empty();
        if ($selection.attr('id') == 'who') {
            $('div#tab1').show('fast', function() {
                $('div#tab3').show('fast', function() {
                    $('div#tab1 h2').append('Relationships')
                                    .fadeIn('fast', function() {
                        $('div#tab3 h2').append('Reputations')
                                        .fadeIn('fast');
                    });
                });
            });
        } else if ($selection.attr('id') == 'how') {    
            $('div#tab1').show('fast', function() {
                $('div#tab3').show('fast', function() {
                    $('div#tab1 h2').append('Personal skills')
                                    .fadeIn('fast', function() {
                        $('div#tab3 h2').append('Expertise').fadeIn('slow')
                                        .fadeIn('fast');
                    });
                });
            });
        } else if ($selection.attr('id') == 'why') {    
            $('div#tab1').show('fast', function() {
                $('div#tab3').show('fast', function() {
                    $('div#tab2').show('fast', function() {
                        $('div#tab1 h2').append('Identity')
                                        .fadeIn('fast', function() {
                            $('div#tab3 h2').append('Values')
                                            .fadeIn('fast', function() {
                                $('div#tab2 h2').append('Motivation')
                                                .fadeIn('fast');
                            });
                        });
                    });
                });
            });
        };
    });
    
    //for when form is ready: infobox previous height = 500
    $('div#tab1').click(function() {
        var $tabselection = $(this);
        var selection = $(this).siblings('div.circle-t').children('img').attr('id');
        $('div.mask').fadeIn('fast', function() {
            $('div.infobox1').animate({height:435}, 'fast')
                             .animate({width:560}, 'fast', function() {
            $('div#cb-ib1').show('fast', function() {
                $.get('content.xml', function(xml) {
                    var tabname = $("[@id=" +selection+ "] > tab1 > title",xml).text();
                    var text =$("[@id=" +selection+ "] > tab1 > text",xml).text();
                    var imageLocation = $("[@id=" +selection+ "] > tab1 > images",xml);
                    var image = $("[@id=" +selection+ "] > tab1 > images",xml).text();
                    $('div.infobox1').html('<h1>'+tabname+'</h1><p>'+text+'</p><div class="info-content"></div>'/*+formStr+''*/);
                    var html = "";
                    $(imageLocation).each(function(index){
                        html +='<div class="card1"><div class="card2">'+$(this).text()+'</div></div>';
                    });
                    $('div.infobox1 .info-content').html(html);
                });
            });
            });
        });
    });
    

    $('div#tab3').click(function() {
        var $tabselection = $(this);
        var selection = $(this).siblings('div.circle-t').children('img').attr('id');
        $('div.mask').fadeIn('fast', function() {
            $('div.infobox3').animate({height:435}, 'fast')
                             .animate({width:560}, 'fast', function() {
            $('div#cb-ib3').show('fast', function() {
                $.get('content.xml', function(xml) {
                    var tabname = $("[@id=" +selection+ "] > tab2 > title",xml).text();
                    var text =$("[@id=" +selection+ "] > tab2 > text",xml).text();
                    var imageLocation = $("[@id=" +selection+ "] > tab2 > images",xml);
                    var image = $("[@id=" +selection+ "] > tab2 > images",xml).text();
                    $('div.infobox3').html('<h1>'+tabname+'</h1><p>'+text+'</p><div class="info-content"></div>'/*+formStr+''*/);
                    var html = "";
                    $(imageLocation).each(function(index){
                        html +='<div class="card1"><div class="card2">'+$(this).text()+'</div></div>';
                    });
                    $('div.infobox3 .info-content').html(html);
                });
            });
            });
        });
    });
    
    $('div#tab2').click(function() {
        var $tabselection = $(this);
        var selection = $(this).siblings('div.circle-t').children('img').attr('id');
        $('div.mask').fadeIn('fast', function() {
            $('div.infobox2').animate({height:435}, 'fast')
                             .animate({width:560}, 'fast', function() {
            $('div#cb-ib2').show('fast', function() {
                $.get('content.xml', function(xml) {
                    var tabname = $("[@id=" +selection+ "] > tab3 > title",xml).text();
                    var text = $("[@id=" +selection+ "] > tab3 > text",xml).text();
                    var imageLocation = $("[@id=" +selection+ "] > tab3 > images",xml);
                    var image = $("[@id=" +selection+ "] > tab3 > images",xml).text();
                    $('div.infobox2').html('<h1>'+tabname+'</h1><p>'+text+'</p><div class="info-content"></div>'/*+formStr+''*/);
                    var html = "";
                    $(imageLocation).each(function(index){
                        html +='<div class="card1"><div class="card2">'+$(this).text()+'</div></div>';
                    });
                    $('div.infobox2 .info-content').html(html);
                });
            });
            });
        });
    });
    
    $('div.closebtn').click(function() {
    var box = $(this).next('div');
        $(this).hide();
        $(box).html('');
        $(box).animate({width:165}, 'fast', function() {
            $(box).animate({height:2}, 'fast', function() {
                $(box).hide('fast', function() {
                    $('div.mask').hide('fast');
                });
            });
        });
    });
    
//    $('div.infobox1, div.infobox2, div.infobox3').click(function() {
//        $(this).empty();
//        $(this).animate({width:165}, 'fast', function() {
//            $(this).animate({height:2}, 'fast', function() {
//                $(this).hide('fast', function() {
//                    $('div.mask').fadeOut('fast');
//                });
//            });
//        });
//    });
              
});