// 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 = "myModal";
    modalWindow.width = 500;
    modalWindow.height = 335;
    modalWindow.content = source;
    modalWindow.open();
};

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

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;
        });
    }

    //--- overall site style enhancements

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

    //---- 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;
            //	$('.js #slideshow .slides ul li').animate({'left': '-' + move + 'px'}, 'slow');

        });
    }

    // -- 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');

        //var ajax_load = "<img src='images/loadingIcon.gif' alt='loading' />";
        //var loadUrl = "../ajax/product_images.htm";
        //  var library_id = $('#titlebar h1').attr('class');

        // var loadUrl = "../ajax/product_images.aspx?lib=" + library_id;

        // $('.package-images').html(ajax_load).load(loadUrl);

        // -- 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');

            loadImg(curItm, firstImg);
        }

        // -- change images
        function loadImg(id, img) {
            toolTip(id); // -- load tooltip
            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');
        });

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

            $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() {
                $('#ToolTipDiv').stop(true, true).show();

            }, function() {
                $('#ToolTipDiv').stop(true, true).hide();
            });
        }

        // -- 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');

            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");
    }
});