// JavaScript Document

/*
Hierarchy
 <div> #slideshow
	 <div> .slides
		 <ul>
			 <li>
				 <div>.description
					 <h2/>
				 </div>
				<img/>
			 </li>
		 </ul>
	 </div>
	 <ul> .slides-nav 
            <li><a href="#slide-one"></a></li>
     </ul> 
 </div>
*/

// --- *** Add controlable class to HTML tag for immediate control
$('html').addClass('js');
$('html').attr("id", "js");

// -- modal window
var openMyModal = function(source) {
    modalWindow.windowId = "Images";
    modalWindow.width = 500;
    modalWindow.height = 335;
    modalWindow.content = source;
	modalWindow.contentType = 'image';
    modalWindow.open();
};

var videoModal = function(source) {
    modalWindow.windowId = "Video";
    modalWindow.width = 480;
    modalWindow.height = 385;
    modalWindow.content = source;
    modalWindow.contentType = 'flash';
    modalWindow.open();
}

var loadAnimation = function() {
$('#rightCol').html('<div id="loading"><strong>Loading</strong><br/><img src="../../App_Themes/Socket%20960/images/progress-indicator.gif" /></div>');
};

// Sitefinity code for disabling the menu dropdown system
function OnClientItemOpening(sender, eventArgs) {
    eventArgs.set_cancel(true);
}

jQuery(document).ready(function($) {

    if ($('#js a.new_win')) {
        $('.new_win').click(function() {
            var path = $(this).attr('href');

            window.open(path, 'PopupPage', 'height=650, width=650, scrollbars=yes, resizable=yes, toolbar=no, menubar=no, location=yes');
            return false;
        });
    }

    // -- tooltip
    function toolTip(id, element) {
        // -- Image btn tooltip
        var $elem = $('<span>').attr('id', 'ToolTipDiv');
        var attachElem = $(id + element);

        $elem.appendTo($('body'));

        attachElem.mousemove(function(e) {
            var tipY = e.pageY + 25;
            var tipX = e.pageX + 15;

            $(this).attr('title', '');
            $('#ToolTipDiv').html('Click to enlarge').css({ 'top': tipY + 'px', 'left': tipX + 'px' });
        }).hover(function() {
            $elem.appendTo($('body'));
            $('#ToolTipDiv').stop(true, true).show();
        }, function() {
            $('#ToolTipDiv').stop(true, true).hide();
            $('#ToolTipDiv').remove();
        });

    }

    // function that checks for a query string
    function getParameterByName(name, location) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(location);
        if (results == null)
            return "";
        else
            return results[1];
    }

    //--- overall site style enhancements

    $('a[href$=.pdf]').addClass('pdflink');

    $('a[class=youtube]').click(function() {
        var curURL = $(this).attr('href');
        var vidURL = getParameterByName('v', curURL);

        videoModal('http://www.youtube.com/v/' + vidURL + '&hl=en_US&fs=1&');

        return false;
    });

    //---- Code for Product Landing page Product scroller
    if ($('#slideshow').length != 0) {
        var img = $('#slideshow img');
        var imgWidth = img.width();
        var imgCount = img.length;
        var carouselWidth = (8 + imgWidth) * imgCount;

        var navClasses = $('.js #slideshow .slides-nav li a');

        // --- *** change carousel Width *** ---
        $('.js #slideshow .slides ul').css({ 'width': carouselWidth + 'px' });

        // --- *** assign a number for each class;
        navClasses.each(function(e) {
            $(this).attr({ 'class': e });
        });

        // --- *** set links to return false *** ---;
        navClasses.click(function() {
            var curClass = $(this).attr('class').toString();
            var move = curClass * imgWidth / 2;

            switch (curClass) {
                case '0':
                    $('.js #slideshow .slides ul li').animate({ 'left': '-' + move + 'px' }, 'slow');
                    break;

                case '1':
                    $('.js #slideshow .slides ul li').animate({ 'left': '-' + move + 'px' }, 'slow');
                    break;

                case '2':
                    $('.js #slideshow .slides ul li').animate({ 'left': '-' + move + 'px' }, 'slow');
                    break;

                case '3':
                    $('.js #slideshow .slides ul li').animate({ 'left': '-' + move + 'px' }, 'slow');
                    break;

                case '4':
                    $('.js #slideshow .slides ul li').animate({ 'left': '-' + move + 'px' }, 'slow');
            }
            return false;

        });
    }

    // -- find the current ID
    function findID(param) {
        var curMenu = '#' + $(param).closest('.product_module').attr('id');
        return curMenu;
    }

    //---- Code for Product page Product listing
    if ($('#js .product_module').length != 0) {
        var cur_id = findID('#js .product_module');

        // -- initial function when page loads
        function productInit() {
            var productWrapper = $('.product_content');
            var prodListHeight = $(productWrapper).find('.product').height();
            var navigationPath = 'a.options';

            $('.product_content').each(function() {
                var prodListHeight = $(this).find('.product').height();

                $(this).find('.product-selector').css({ 'height': prodListHeight + 'px' });
            });

            // -- set initial content;
            productNav(navigationPath, true);
        }

        // -- product nav function
        $('.product_nav a').click(function() {

            productNav(this, false);

            return false;
        });

        // -- main product nav
        function productNav(val, init) {
            // -- gets the selected items ID
            var cur_id = findID($(val));

            // -- clears all the .selected classes before adding a new one to the currently selected item
            $('#js ' + cur_id + ' .product_nav li a').removeClass('selected');

            // -- add the clase to the selected itme
            $(val).addClass('selected');

            // -- check if the initial menu item is selected if not then change the content
            if (!init) {
                changeContent(val, cur_id);
            } else {
                // show the intro text by default
                $('#js .product-list .product:first-child').css({ 'display': 'block' }); //.addClass('selected');	
            }
        }

        // -- change main product content
        function changeContent(itm, id) {
            var href = $(itm).attr('href');
            var curItm = id;
            var height = $(curItm + ' .product-list ' + href).height();

            $(curItm + ' .product-selector').animate({ 'height': height });

            $(curItm + ' .product-list .product').fadeOut();

            $(curItm + ' .product-list ' + href).fadeIn();

            $(curItm + ' .package-list li a').removeClass('selected');
            $(curItm + ' .package-list li:first-child a').addClass('selected');

            var firstImg = $(curItm + ' .product-list ' + href + ' .package-list li a').attr('href');

            toolTip(id, ' .product-list .package-list li a'); // -- load tooltip
            loadImg(curItm, firstImg);
        }

        // -- change images
        function loadImg(id, img) {
           
            var $imgId = $('#img_list ' + img).html();
            $(id + ' .package-images').html("<img src='../ajax/img.ashx?id=" + $imgId + "&w=310' />")
            $(id + ' .package-images').stop(true, true).hide();
            $(id + ' .package-images').show();
        }

        // -- on hover change images
        $('#js .package-list li a').hover(function() {
            var img = $(this).attr('href');
            var id = findID($(this));

            loadImg(id, img); // load images

            $(id + ' .package-list li a').removeClass('selected');
            $(this).addClass('selected');
        });


        // -- product package function
        $('#js .product-list .package-list a').click(function() {

            var selectedItem = $(this).attr('href');
            //var img_url = $('#js .product-list .package-images img').attr('src');
            var rootElement = $(this).parent().parent().parent().parent().parent().parent().parent().parent().attr('id');

            var img_id = $('#img_list ' + $(this).attr('href')).attr('id');
            var img_url = "../ajax/img.ashx?id=" + $('#' + img_id).text();

            openMyModal(img_url);
            return false;
        });



        // -- call initial function when page is loaded
        productInit();
    }

    function getSwitchID(param) {
        var curItem = '#' + $(param).closest('.switcher').attr('id');
        return curItem;
    }

    // -------------------------------------------------------------------------------------------------- image switcher
    if ($('#js .switcher').length != 0) {

        // find the first item in the list and highlight it
        $('#js .switcher').each(function() {
            var navID = getSwitchID(this);

            // highlight first item
            $(navID + ' .thumbnails li:first').addClass('active');
        });

        // image switcher
        $('#js .thumbnails li').click(function() {
            var imgId = getSwitchID(this);
            var img = $(imgId + ' .img_large img');

            $(imgId + ' .img_large img').attr('src', $(this).find('a').attr('href'));
            $(imgId + ' .thumbnails li').removeAttr('class');
            $(this).addClass('active');
            return false;
        });

        // ---------------------------------------------------------------------------------------------- Text switcher
        function initTxt() {
            $('#js .text').each(function() {
                var txtID = getSwitchID(this);
                var $tabs = $(txtID + ' .tabs');

                // -- *** hide all the DIV tags *** --
                $tabs.addClass('hide');
                // -- *** show the first DIV tag *** --
                $tabs.eq(0).removeClass('hide').addClass('show');

                // -- *** Build Menu *** --
                $('<div>').attr('class', 'tabBtn').appendTo(txtID);

                buildMenu($tabs, txtID);
            });
        }

        function buildMenu(tabs, id) {

            tabs.each(function() {
                var idTag = $(this).attr('id'); // -- *** get titles from the DIV tags *** --
                var title = $(this).find('h5').text(); // -- *** get titles from the h5 tags *** -
                $('<a>')
                .attr('href', idTag)
                .attr('class', 'off')
                .html('<span>' + title + '</span>')
                .appendTo(id + ' .tabBtn').click(function() {
                    // switch tab button classes
                    $(id + ' .tabBtn a').attr('class', 'off');
                    $(this).attr('class', 'on');

                    // switch tab content classes
                    $(tabs).removeClass('show').addClass('hide');
                    var curClass = $(this).attr('href');

                    $(id + ' #' + curClass).addClass('show'); //.removeClass('hide');

                    return false;
                });

                $(id + ' .tabBtn a:first').attr('class', 'on');
            });

        }
        // highlight first item
        initTxt();
    }

    if ($('#js #accessory_menu').length) {
        $.getScript("../../scripts/json-minified.js");
        $.getScript("../../scripts/accessories.js");
    }

    if ($('#js #prodDetails').length) {

        var $thumbContainer = $('#mini-thumb-list').width(); // -- thumbnail container width
        var $thumbList = $('#mini-thumb-list ul').width(); // -- thumbnail list width
        var $left_pos = ($thumbContainer - $thumbList) / 2 + 'px'; // -- get left position
        var $thumbListItems = $('#mini-thumb-list ul li a'); // thumbnail items list
        var $mainImg = $('#thumbMod #image');

        // center align the img list
        $('#mini-thumb-list ul').css({ 'position': 'absolute', 'left': $left_pos });

        // highlight the first thumbnail
        $thumbListItems.first().css({ 'border': 'solid #0089CF 1px' });

        toolTip('#prodDetails ', ' #mini-thumb-list ul li a'); // apply tooltip

        // mouse over thumbnail to change main image
        $thumbListItems.mouseover(function() {
            var curItem = $(this).attr('href') + '&w=300';

            $thumbListItems.css({ 'border': 'solid #eee 1px' }); // remove all borders
            $(this).css({ 'border': 'solid #0089CF 1px' });
            $mainImg.attr('src', curItem);
        });

        // click on the thumbnail to enlarge the image
        $thumbListItems.click(function() {

            openMyModal($(this).attr('href'));
            return false;
        });
    }
});