var $j = jQuery.noConflict();

$j(document).ready(function() {
    //set the container background dependent on whether its the homepage or not
    if ($j(".home").length > 0) {
        $j('#container').css('background', 'transparent url("") no-repeat top center scroll');
    }
    if ($j('#wall').length > 0) {
        mediaWall();
    }
    //hide all the sub navigation elements
    $j('.subMenu').hide();

    $j('ul.hover_block li a img').hide();
    $j('ul#nav li').mouseenter(function() {
        //make sure the link isn't "selected"
        $j(this).find('ul').show();
        $j(this).children(':first').css('backgroundColor', '#9b27bc');
    });

    $j('ul#nav li').mouseleave(function() {
        $j(this).find('ul').hide();
        $j(this).children(':first').css('backgroundColor', 'transparent');
    });

    //initialise the search page
    if ($j('#mapArea').length > 0) {
        //display the location images box
        $j('#locationImages').show();
        //display the map area checkboxes
        $j('div#mapArea input[type=checkbox]').show();
        //hide all the area images
        $j('#locationImages img').css('visibility', 'hidden');

        $j('#mapArea a').mouseenter(function() {
            var thisName = $j(this).attr('class');
            if ($j(this + " INPUT[name='map_" + thisName + "']").attr('checked') == false) {
                $j('#locationImages').append('<img class="' + thisName + '" src="/images/areas/' + thisName + '.jpg" alt="' + thisName + '" />');
                $j('#locationImages img.' + thisName + '').hide();
                $j('#locationImages img.' + thisName + '').fadeIn(200);
            }
        });
        $j('#mapArea a').mouseleave(function() {
            var thisName = $j(this).attr('class');
            if ($j(this + " INPUT[name='map_" + thisName + "']").attr('checked') == false) {
                $j('#locationImages img.' + thisName + '').fadeOut(100, function() { $j('#locationImages img.' + thisName + '').remove(); });

            }
        });
        $j('#mapArea input').click(function() {
            var thisName = $j(this).attr('class');
            if ($j(this).attr('checked') == true) {
                $j('#locationImages').append('<img class="' + thisName + '" src="/images/areas/' + thisName + '.jpg" alt="' + thisName + '" />');
                $j('#locationImages img.' + thisName + '').show();
                $j('#areas input.' + thisName + '').attr('checked', true);
            } else {
                $j("#mapArea INPUT." + thisName + "").attr('checked', false);
                $j('#locationImages img.' + thisName + '').hide();
                $j('#areas input.' + thisName + '').attr('checked', false);
            }
            var checkboxNum = true;

            for (i = 1; i < $j('div#mapArea input[type=checkbox]').length; i++) {
                if ($j('div#mapArea input[type=checkbox]:eq(' + i + ')').attr('checked') == true) {
                    checkboxNum = true;
                    return;
                } else {
                    checkboxNum = false;
                }
            }
            if (checkboxNum == false) {
                $j('div#mapArea input[name=allbox]').attr('checked', false)
                $j('#locationImages').css('background-image', 'url(/images/areas/imagesBg.gif)');
            }
        });
        //make each area-anchor toggle its relevant checkbox and show/hide relevant image
        $j('#mapArea a').click(function() {
            var thisName = $j(this).attr('class');
            if ($j(this + " INPUT." + thisName + "").attr('checked') == false) {
                $j(this + " INPUT." + thisName + "").attr('checked', true);
                $j('#locationImages img.' + thisName + '').show();
            } else {
                $j(this + " INPUT." + thisName + "").attr('checked', false);
                $j('#locationImages img.' + thisName + '').hide();
            }
            var checkboxNum = true;

            for (i = 1; i < $j('div#mapArea input[type=checkbox]').length; i++) {
                if ($j('div#mapArea input[type=checkbox]:eq(' + i + ')').attr('checked') == true) {
                    checkboxNum = true;
                    return;
                } else {
                    checkboxNum = false;
                }
            }
            if (checkboxNum == false) {
                $j('div#mapArea input[name=allbox]').attr('checked', false)
                $j('#locationImages').css('background-image', 'url(/images/areas/imagesBg.gif)');
            }
        });
        //make each area-checkbox toggle its relevant checkbox and show/hide relevant image
        $j('#areas input').click(function() {
            var thisName = $j(this).attr('class');
            if ($j("INPUT." + thisName + "").attr('checked') == false) {
                $j("INPUT." + thisName + "").attr('checked', true);
                $j('#locationImages').append('<img class="' + thisName + '" src="/images/areas/' + thisName + '.jpg" alt="' + thisName + '" />');
                $j('#locationImages img.' + thisName + '').show();
            } else {
                $j("INPUT." + thisName + "").attr('checked', false);
                $j('#locationImages img.' + thisName + '').hide();
            }
            var checkboxNum = true;
            for (i = 1; i < $j('div#areas input[type=checkbox]').length; i++) {
                if ($j('div#areas input[type=checkbox]:eq(' + i + ')').attr('checked') == true) {
                    checkboxNum = true;
                    return;
                } else {
                    checkboxNum = false;
                }
            }
            if (checkboxNum == false) {
                $j('div#mapArea input[name=allbox]').attr('checked', false)
                $j('#locationImages').css('background-image', 'url(/images/areas/imagesBg.gif)');
            }

        });
    }
    //Initialise the fulldetails page
    if ($j('#imgThumbs li').length > 1) {
        fullDetailsInit();
    }
});

function fullDetailsInit() {
    //general variables
    var fadeSpeed = 500;
    var timerActive = true;
    var count = 1;
    var selectedBtn = 0;
    var totalImages = $j('#imgThumbs').children().length - 1;
    var largeImgContainer = $j('#largeImgContainer li img');
    var buttons = $j('#imgThumbs a');

    //hide all the images
    $j('#largeImgContainer li img').hide();
    //apply the styles to position the images for the slideshow to work properly (default styles counter this for when javascript is turned off)
    $j('#largeImgContainer').css('height', '355px');
    $j('#largeImgContainer li').css('position', 'absolute');

    //show the first image
    changeBanner(0);
    //events			
    $j.timer(2000, function(timer) {
        if (timerActive) {
            changeBanner(count);

            count++;
            if (count > totalImages) {
                count = 0;
            }
        } else {
            timer.stop();
        }
    });

    $j(buttons).click(function() {
        var index = $j(buttons).index(this);
        var clicked = index;

        timerActive = false;
        changeBanner(clicked);
    });
    //main function to change the banner
    function changeBanner(c) {

        $j('div#detailRight ul#imgThumbs li').eq(selectedBtn).removeClass('selected');
        //fade out the current one
        $j(largeImgContainer).eq(selectedBtn).fadeOut(fadeSpeed);
        //$j('#largeImgContainer li img').eq(selectedBtn).hide();
        //select the new one and fade it in
        selectedBtn = c;
        //$j('.'+selectedBtn+'').parent().addClass('selected');
        $j('div#detailRight ul#imgThumbs li').eq(selectedBtn).addClass('selected');
        $j(largeImgContainer).eq(selectedBtn).fadeIn(fadeSpeed);

    }
}
var telShown = true;
function slideSwitch() {
    var $jactive = $j('#slideshow IMG.active');

    if ($jactive.length == 0) $jactive = $j('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $jnext = $jactive.next().length ? $jactive.next()
        : $j('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order

    // var $jsibs  = $jactive.siblings();
    // var rndNum = Math.floor(Math.random() * $jsibs.length );
    // var $jnext  = $j( $jsibs[ rndNum ] );

    if ($j('#tel').length) {
        if (telShown) {
            $j('#tel1').fadeOut(function() {
                $j('#tel2').fadeIn();
            });

        } else {
            $j('#tel2').fadeOut(function() {
                $j('#tel1').fadeIn();
            });
        }
        telShown = !telShown;
    }

    $jactive.addClass('last-active');

    $jnext.css({ opacity: 0.0 })
        .addClass('active')
        .animate({ opacity: 1.0 }, 1000, function() {
            $jactive.removeClass('active last-active');
        });
}
//this sets the inteval for the homepage slideshow
$j(function() {
    setInterval("slideSwitch()", 5000);
});


$j(function() {
    $j('ul.hover_block li').hover(function() {
        $j(this).find('img').fadeIn(300);
    }, function() {
        $j(this).find('img').fadeOut(500);
    });
});

//Toggle "select all" checkboxes function
function checkAll() {
    if ($j('.selectAll INPUT[name="allbox"]').attr('checked') == false) {
        $j('#locationImages').css('background-image', 'url(/images/areas/imagesBg.gif)');
        $j('#locationImages img').remove();
    } else {
        $j('#locationImages').css('background-image', 'url(/images/areas/multipleAreas.gif)');
    }

    for (var i = 0; i < document.forms[0].elements.length; i++) {
        var e = document.forms[0].elements[i];
        if ((e.name != 'allbox') && (e.type == 'checkbox')) {
            e.checked = document.forms[0].allbox.checked;

        }
    }
}
///////////////////////////
//MEDIA WALL CODE START
///////////////////////////
function mediaWall() {
    //cache main selectors
    var theWall = $j('#wall');
    var largeImagesArea = $j('#largeImagesArea');
    var thisLargeImageDiv;
    var currentIndex;
    var largeImg;
    var thisEl;
    $j('#wall li img').mouseover(function() {
        //set the necessary variables	
        thisEl = $j(this);
        currentIndex = $j(thisEl).parent().prevAll().length;
        thisLargeImageDiv = $j('#largeImagesArea div:eq(' + currentIndex + ')');
        largeImg = $j('#largeImagesArea div:eq(' + currentIndex + ') img');
        //get the absolute position of this THUMBNAIL image (top and left values both stored in this object)
        var thumbPos = $j(thisEl).offset();

        //get the width of the THUMBNAIL image
        var thumbWidth = $j(thisEl).outerWidth();

        //add the thumnail width to the left position of the thumnail (to position large image to the right of thumnail)
        thumbPos.left += thumbWidth;

        //use the above value to position the large image
        thisLargeImageDiv.css(thumbPos);
        thisLargeImageDiv.css(thumbPos);

        //show the large image - this needs to be done before we can determine the large image width (next line)
        thisLargeImageDiv.show();

        //get the width of the large image
        var largeImgWidth = largeImg.outerWidth();

        //get the height of the large image
        var largeImgHeight = largeImg.parent().outerHeight();

        //float the image to the left of its container
        largeImg.css('float', 'left');

        //get the remaining window WIDTH space (to be used to see if the large Image should be displayed to the left or right of thumbnail)
        var widthRemaining = $j(window).width() - parseInt(thisLargeImageDiv.css('left'));

        //check to see if the large image's width exceeds the remaining window space, if so, position the large image to the left of the thumbnail
        if (widthRemaining < largeImgWidth) {

            //reset the thumbnail left position (take off the "thumbWidth" added earlier
            var finalXPos = (thumbPos.left - thumbWidth);
            //set the coordinates of the large image to the left of the thumbnail
            finalXPos -= thisLargeImageDiv.outerWidth();

            //use the above value to position the left coordinates of the large image
            thisLargeImageDiv.css('left', finalXPos);

            //float the image to the right of its container
            largeImg.css('float', 'right');
        }
        //get the remaining window HEIGHT space (to be used to see if the large Image should be displayed at the bottom of the window area)
        //use scrollTop in the calculation to determine the number of pixels the window has been scrolled
        var heightRemaining = $j(window).height() - (thumbPos.top - $j(window).scrollTop());

        //check to see if the large image's height exceeds the remaining window space, if so, keep it in view
        if (heightRemaining < largeImgHeight) {

            //calculate the new position
            var finalYPos = ($j(window).height() + $j(window).scrollTop()) - largeImgHeight;

            //use the above value to position the top coordinates of the large image
            thisLargeImageDiv.css('top', finalYPos);

        }
        //check to see if the large image's height exceeds the remaining window space, if so, keep it in view
        if (thumbPos.top < $j(window).scrollTop()) {
            thisLargeImageDiv.css('top', $j(window).scrollTop());
        }
    });
    $j('#wall li img').mouseout(function() {
        thisLargeImageDiv.hide();
    });

}
//MEDIA WALL END
//------------------