$(document).ready(function() {

    // Bind a click handler to each list item in the sub nav list
    $('ul#navsublist li').mouseover(function() {

        if (!$(this).hasClass('current')) {
        
            // Save the DOM item we just moused over
            var overDomItem = this;

            // Get the 0-based index of the click list item
            var liIndex = $(overDomItem).prevAll().length;

            // Remove the class from all the the nav list items
            $('ul#navsublist li').removeClass('current');

            // Go through each of the listitems to remove the ...Over class
            $('ul#navsublist li').each(function() {

                if ($(this).attr('class') != undefined) {

                    var oldClass = $(this).attr('class');

                    if (overDomItem == this) {
                        $(this).removeClass(oldClass);
                        $(this).addClass(oldClass + 'Over');
                    }
                    else {
                        if (oldClass.lastIndexOf('Over') != -1) {
                            $(this).removeClass(oldClass);
                            $(this).addClass(oldClass.substring(0, oldClass.lastIndexOf('Over')));
                        }
                    }
                }
            });

            // Add the current class to the one we clicked
            $(overDomItem).addClass('current');

            // Remove the current class from all the current list items
            $('ul#navSubContent li').removeClass('current');

            // Add the current class to the content list item with the same index as the one we clicked
            $('ul#navSubContent li:eq(' + liIndex + ')').addClass('current');

            // Set the source and alt tag of the middle sub content image
            $("#navsubcontent1 img").attr('src', img_url + 'photosharing/contentImage_' + liIndex + '.jpg').attr('alt', $(overDomItem).text());
        }
    });


    // Bind a click handler to each list item in the sub nav list
    $('ul#navsublistNew li').mouseover(function() {

        if (!$(this).hasClass('current')) {

            // Save the DOM item we just moused over
            var overDomItem = this;

            // Get the 0-based index of the click list item
            var liIndex = $(overDomItem).prevAll().length;

            // Remove the class from all the the nav list items
            $('ul#navsublistNew li').removeClass('current');

            // Go through each of the listitems to remove the ...Over class
            $('ul#navsublistNew li').each(function() {

                if ($(this).attr('class') != undefined) {

                    var oldClass = $(this).attr('class');

                    if (overDomItem == this) {
                        $(this).removeClass(oldClass);
                        $(this).addClass(oldClass + 'Over');
                    }
                    else {
                        if (oldClass.lastIndexOf('Over') != -1) {
                            $(this).removeClass(oldClass);
                            $(this).addClass(oldClass.substring(0, oldClass.lastIndexOf('Over')));
                        }
                    }
                }
            });

            // Add the current class to the one we clicked
            $(overDomItem).addClass('current');

            // Remove the current class from all the current list items
            $('ul#navSubContentNew li').removeClass('current');

            // Add the current class to the content list item with the same index as the one we clicked
            $('ul#navSubContentNew li:eq(' + liIndex + ')').addClass('current');

            // Set the source and alt tag of the middle sub content image
            $("#navsubcontent1New img").attr('src', img_url + 'photosharing/contentImageNew_' + liIndex + '.jpg').attr('alt', $(overDomItem).text());
        }
    });




/*
    // Bind a click handler to each list item in the sub nav list
    $('ul#navsublistNew li').mouseover(function() {

        // Get the 0-based index of the click list item
        var liIndex = $(this).prevAll().length;

        // Remove the class from all the the nav list items
        $('ul#navsublistNew li').removeClass('current');

        // Add the current class to the one we clicked
        $(this).addClass('current');

        // Remove the current class from all the current list items
        $('ul#navSubContentNew li').removeClass('current');

        // Add the current class to the content list item with the same index as the one we clicked
        $('ul#navSubContentNew li:eq(' + liIndex + ')').addClass('current');

        // Set the source and alt tag of the middle sub content image
        $("#navsubcontent1New img").attr('src', img_url + 'photosharing/contentImageNew_' + liIndex + '.jpg').attr('alt', $(this).text());

    });
*/
});


/*
$(document).ready(function() {

    $("#liOne").mouseover(function() {

        //alert(img_url);

        $("#navsubcontent1").html('<img src="' + img_url + "photosharing/panoramicImage.jpg\" width=\"306\" height=\"500\" alt=\"Download from your camera\" class=\"imgmenuhow\" />");

        $("#navsubcontent2").html('<p>aaaLet your friends know who\'s who by tagging the people in your photograph. Your contacts can also tag people. </p>' +

            '<img src="' + img_url + 'photosharing/1.gif" width="24" height="24" alt="1" class="imgnumbers" />' +
            
            '<p class="numbers">Import your photos from your camera straight into <a href="#">Windows Live Photo Gallery</a>, so you can start organising and editing your photos straight away.</p>'
            );

        removeCurrent();

        $("#liOne").replaceWith("<li id=\"liOne\" class=\"current\">" + $(this).text() + "</li>");
    });

    $("#liTwo").mouseover(function() {

        //alert("image1");
        $("#navsubcontent1").html("<img src=\"images/how/import.gif\" width=\"306\" height=\"492\" alt=\"Download from your camera\" class=\"imgmenuhow\" />");

        $("#navsubcontent2").html("<p>If you're tagging yourself, choose That's me! Windows Live Photo Gallery has automatic face detection, meaning it will recognise when there is a face in a photo, which makes tagging easy.</p>");

        //removeCurrent();

        $("#liTwo").replaceWith("<li id=\"liTwo\" class=\"current\">" + $(this).text() + "</li>");

    });

    $("#liThree").mouseover(function() {

        //alert("image1");
        $("#navsubcontent2").html("<img src=\"images/how/1.gif\" width=\"24\" height=\"24\" alt=\"1\" class=\"imgnumbers\" /><p class=\"numbers\">Import your photos from your camera straight into <a href=\"#\">Windows Live Photo Gallery</a>, so you can start organising and editing your photos straight away.</p>");

        removeCurrent();

        $("#liThree").replaceWith("<li id=\"liThree\" class=\"current\">" + $(this).text() + "</li>");

    });

    $("#liFour").mouseover(function() {

        //alert("image1");
        $("#navsubcontent2").html("<img src=\"images/how/2.gif\" width=\"24\" height=\"24\" alt=\"2\" class=\"imgnumbers\" /><p class=\"numbers\">Import your photos from your camera straight into Windows Live Photo Gallery, so you can start organising and editing your photos straight away.</p>");

        removeCurrent();

        $("#liFour").replaceWith("<li id=\"liFour\" class=\"current\">" + $(this).text() + "</li>");

    });

    $("#liFive").mouseover(function() {

        //alert("image1");
        $("#navsubcontent2").html("<img src=\"images/how/3.gif\" width=\"24\" height=\"24\" alt=\"3\" class=\"imgnumbers\" /><p class=\"numbers\">Import your <a href=\"#\">photos</a> from your camera straight into Windows Live Photo Gallery, so you can start organising and editing your photos straight away.</p>");

        removeCurrent();

        $("#liFive").replaceWith("<li id=\"liFive\" class=\"current\">" + $(this).text() + "</li>");

    });

    $("#liSix").mouseover(function() {

        //alert("image1");
        $("#navsubcontent2").html("<p>Let your friends know who's who by tagging the people in your photograph. Your contacts can also tag people. </p>");

        removeCurrent();

        $("#liSix").replaceWith("<li id=\"liSix\" class=\"current\">" + $(this).text() + "</li>");

    });

    $("#liSeven").mouseover(function() {

        //alert("image1");
        $("#navsubcontent2").html("<p>If you're tagging yourself, choose That's me! Windows Live Photo Gallery has automatic face detection, meaning it will recognise when there is a face in a photo, which makes tagging easy.</p>");

        removeCurrent();

        $("#liSeven").replaceWith("<li id=\"liSeven\" class=\"current\">" + $(this).text() + "</li>");

    });

    $("#liEight").mouseover(function() {

        //alert("image1");
        $("#navsubcontent2").html("<img src=\"images/how/2.gif\" width=\"24\" height=\"24\" alt=\"2\" class=\"imgnumbers\" /><p class=\"numbers\">Import your photos from your camera straight into Windows Live Photo Gallery, so you can start organising and editing your photos straight away.</p>");

        removeCurrent();

        $("#liEight").replaceWith("<li id=\"liEight\" class=\"current\">" + $(this).text() + "</li>");

    });


    function removeCurrent() {

        $("#liOne").replaceWith("<li id=\"liOne\">Download from your camera</li>");

        $("#liOne").bind("mouseenter", function() {

            $("#navsubcontent1").html("<img src=\"" + img_url + "photosharing/panoramicImage.jpg\" width=\"306\" height=\"500\" alt=\"Download from your camera\" class=\"imgmenuhow\" />");

            $("#navsubcontent2").html('<p>aaaLet your friends know who\'s who by tagging the people in your photograph. Your contacts can also tag people. </p>' +

            '<img src="' + img_url + 'photosharing/1.gif" width="24" height="24" alt="1" class="imgnumbers" />' +

            '<p class="numbers">Import your photos from your camera straight into <a href="#">Windows Live Photo Gallery</a>, so you can start organising and editing your photos straight away.</p>'
            );

            removeCurrent();

            $("#liOne").replaceWith("<li id=\"liOne\" class=\"current\">" + $(this).text() + "</li>");
        });

        $("#liTwo").replaceWith("<li id=\"liTwo\">Edit</li>");

        $("#liTwo").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent1").html("<img src=\"images/how/import.gif\" width=\"306\" height=\"492\" alt=\"Download from your camera\" class=\"imgmenuhow\" />");
            $("#navsubcontent2").html("<p>If you're tagging yourself, choose That's me! Windows Live Photo Gallery has automatic face detection, meaning it will recognise when there is a face in a photo, which makes tagging easy.</p>");

            removeCurrent();

            $("#liTwo").replaceWith("<li id=\"liTwo\" class=\"current\">" + $(this).text() + "</li>");

        });

        $("#liThree").replaceWith("<li id=\"liThree\">Create a panoramic photo</li>");

        $("#liThree").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent2").html("<img src=\"images/how/1.gif\" width=\"24\" height=\"24\" alt=\"1\" class=\"imgnumbers\" /><p class=\"numbers\">Import your photos from your camera straight into <a href=\"#\">Windows Live Photo Gallery</a>, so you can start organising and editing your photos straight away.</p>");

            removeCurrent();

            $("#liThree").replaceWith("<li id=\"liThree\" class=\"current\">" + $(this).text() + "</li>");

        });

        $("#liFour").replaceWith("<li id=\"liFour\">Tag your photos</li>");

        $("#liFour").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent2").html("<img src=\"images/how/2.gif\" width=\"24\" height=\"24\" alt=\"2\" class=\"imgnumbers\" /><p class=\"numbers\">Import your photos from your camera straight into Windows Live Photo Gallery, so you can start organising and editing your photos straight away.</p>");

            removeCurrent();

            $("#liFour").replaceWith("<li id=\"liFour\" class=\"current\">" + $(this).text() + "</li>");

        });

        $("#liFive").replaceWith("<li id=\"liFive\">Publish to the Web</li>");

        $("#liFive").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent2").html("<img src=\"images/how/3.gif\" width=\"24\" height=\"24\" alt=\"3\" class=\"imgnumbers\" /><p class=\"numbers\">Import your <a href=\"#\">photos</a> from your camera straight into Windows Live Photo Gallery, so you can start organising and editing your photos straight away.</p>");

            removeCurrent();

            $("#liFive").replaceWith("<li id=\"liFive\" class=\"current\">" + $(this).text() + "</li>");

        });

        $("#liSix").replaceWith("<li id=\"liSix\">Create a Slideshow</li>");

        $("#liSix").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent2").html("<p>Let your friends know who's who by tagging the people in your photograph. Your contacts can also tag people. </p>");

            removeCurrent();

            $("#liSix").replaceWith("<li id=\"liSix\" class=\"current\">" + $(this).text() + "</li>");

        });

        $("#liSeven").replaceWith("<li id=\"liSeven\">Blog your photos</li>");

        $("#liSeven").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent2").html("<p>If you're tagging yourself, choose That's me! Windows Live Photo Gallery has automatic face detection, meaning it will recognise when there is a face in a photo, which makes tagging easy.</p>");

            removeCurrent();

            $("#liSeven").replaceWith("<li id=\"liSeven\" class=\"current\">" + $(this).text() + "</li>");

        });

        $("#liEight").replaceWith("<li id=\"liEight\">Create a Photo CD</li>");

        $("#liEight").bind("mouseenter", function() {

            //alert("image1");
            $("#navsubcontent2").html("<img src=\"images/how/2.gif\" width=\"24\" height=\"24\" alt=\"2\" class=\"imgnumbers\" /><p class=\"numbers\">Import your photos from your camera straight into Windows Live Photo Gallery, so you can start organising and editing your photos straight away.</p>");

            removeCurrent();

            $("#liEight").replaceWith("<li id=\"liEight\" class=\"current\">" + $(this).text() + "</li>");

        });
    }


});
*/