IS.Shopping = {
    init : function() {
        IS.Shopping.gallerynav();
        IS.Shopping.omniture();
        IS.Shopping.redirect();
    },
    gallerynav : function () {
        //highlight first nav item
        $('#item-1').addClass('selected');
        //nav listeners
        $('#gallerynav div.item').unbind();
        $('#gallerynav div.item').hover(
            function() { //hover over
                //toggle highlighted nav item
                $('#gallerynav div.item').removeClass('selected');
                $(this).addClass('selected');
                var idarray = $(this).attr('id').split('-');
                if (idarray[1] != '') {
                    //toggle sponsored
                    if ($(this).hasClass('sponsored')) {
                        $('#shoppinggallery').addClass('sponsored');
                        if ($('#gallerymain-slide5ad').html() == '') { //if the sponsored ad has not been written to the page yet, write it in
                            iframe = '<iframe src="http://www.instyle.com/instyle/static/h/shopping/sponsoredad.html" allowtransparency="yes" frameborder="0" height="31" width="88" scrolling="no"></iframe>';
                            if ($.browser.mozilla) {iframe += '<iframe src="#" style="display:none;"></iframe>';}
                            $('#gallerymain-slide5ad').html(iframe);
                        }
                    } else {
                        $('#shoppinggallery').removeClass('sponsored');
                    }
                    //toggle slide and txtcont
                    $('#gallerymain div.slide,#galleryfooter div.txtcont').hide();
                    $('#slide-' + idarray[1] + ',#text-' + idarray[1]).show();
                }
            },
            function() { //hover off (doing nothing for now...)
                return false;
            }
        ).click(function() {
            return false;
        });
    },
    omniture : function () {
        //left navigation link listener
        $('#col1nav a').click(function() {
            var groupid = $(this).parents('div.group:first').attr('id');
            var grouptitle = $('#' + groupid + ' h3:first').text();
            if (grouptitle != '') { grouptitle += ': '; }
            omniLinkCode(
                this,
                'o',
                'Shopping Main: ' + grouptitle + $(this).text()
            );
        });
        //gallery image listener
        $('#gallerymain a').click(function() {
            omniLinkCode(
                this,
                'o',
                'Shopping Main: ' + $(this).children('img:first').attr('alt') + ': Image'
            );
        });
        //gallery footer links listener
        $('#galleryfooter a').click(function() {
            
            var imagealt;
            $('#gallerymain div.slide').each(function() {
                if ($(this).css('display') == 'block') {
                    var slideid = $(this).attr('id');
                    var slidenum = slideid.split('-');
                    slidenum = slidenum[1];
                    imagealt = $('#gallerymainimage-' + slidenum + ' img:first').attr('alt') + ': ';
                    return false;
                }
                return true;
            });
            omniLinkCode(
                this,
                'o',
                'Shopping Main: ' + imagealt + $(this).text()
            );
        });
    },
    sponsoredgallery : function(data) {
        //get a random slide from the sponsored slide array
        var x = Math.floor(Math.random() * data.slides.length);
        //HTML for the 400x340 image
        var html400x340 = '<div class="slide sponsored" id="slide-5">';
            html400x340 += '<div class="adwrapper">';
                html400x340 += '<div class="ad170x30">';
                    html400x340 += '<iframe width="170" height="30" frameborder="0" scrolling="no" id="iframe-sponsoredad" src="http://www.instyle.com/instyle/static/h/iframe/ads/shopping170x30.html" allowtransparency="true"></iframe>';
                html400x340 += '</div>';
            html400x340 += '</div>';
            html400x340 += '<div id="gallerymainimage-5">';
                html400x340 += '<a href="' + data.slides[x]['url'] + '">';
                    html400x340 += '<img src="' + data.slides[x]['image-400x340-src'] + '" width="400" height="340" alt="' + data.slides[x]['image-alt'] + '" title="' + data.slides[x]['image-alt'] + '" />';
                html400x340 += '</a>';
            html400x340 += '</div>';
        html400x340 += '</div>';
        //HTML for the 71x71 image
        var html71x71 = '<div class="item sponsored" id="item-5">';
            html71x71 += '<a href="' + data.slides[x]['url'] + '">';
                html71x71 += '<img src="' + data.slides[x]['image-71x71-src'] + '" width="71" height="71" alt="' + data.slides[x]['image-alt'] + '" title="' + data.slides[x]['image-alt'] + '" />';
                html71x71 += '<span class="title">sponsored</span>';
            html71x71 += '</a>';
        html71x71 += '</div>';
        //HTML for the sponsored footer
        var htmlfooter ='<div class="txtcont sponsored" id="text-5">';
            htmlfooter += '<h4>' + data.slides[x]['caption-title'] + '</h4>';
            htmlfooter += '<div class="dek">';
                htmlfooter += data.slides[x]['caption-dek'];
                htmlfooter += '<span class="more">';
                    htmlfooter += '<a href="' + data.slides[x]['url'] + '">';
                        htmlfooter += '<span>' + data.slides[x]['caption-cta'] + '</span>';
                        htmlfooter += '<img width="4" height="7" class="arrow" alt="" src="http://img2-preview.timeinc.net/instyle/static/i/shopping/icon-bluearrowright.gif" />';
                    htmlfooter += '</a>';
                htmlfooter += '</span>';
            htmlfooter += '</div>';
        htmlfooter += '</div>';
        //append the HTML to the various areas
        $('#gallerymain').append(html400x340);
        $('#gallerynav').append(html71x71);
        $('#galleryfooter div.content').append(htmlfooter);
        //resest thumbnail listeners
        IS.Shopping.gallerynav();
    },
	redirect : function() {
        //left column links redirect with "StyleFind" redirect message (no "msg" param)
        $('#col1nav .group a, #whattowearnow-1 a, #whattowearnow-2 a, #whattowearnow-3 a, #whattowearnow-4 a').click(function() {
		    if(this.href.indexOf('instyle.com') < 0){
				window.open('http://www.instyle.com/instyle/static/h/shopping/redirect.html?r=' + $(this).attr('href'));
				return false;
			}
        });
        //center coulmn links redirect with "Retailer" message
        $('#gallerymain div.slide:not(.sponsored) a,#galleryfooter div.txtcont:not(.sponsored) a,#whattowearnow div.tout a').click(function() {
		    if(this.href.indexOf('instyle.com') < 0){
				window.open('http://www.instyle.com/instyle/static/h/shopping/redirect.html?r=' + $(this).attr('href') + '&msg=retail');
				return false;
			}
        });
    }
}

//jsonp callback sponsored gallery slide handler
function shoppinggallery(data) {
    $(function() { IS.Shopping.sponsoredgallery(data); });
}

$(function() { IS.Shopping.init(); });