var loadingImage = '<center>Loading</center><center><img src="images/loading.gif" /></center>';

    $(function() {
        loadHome();
        
        $("ul.alphabet > li > a").click(function() {
            var letter = $(this).html();
            var search_term = 'FILTER:' + letter;
        
            loadMainList(search_term, "Both");
        });
    });

    function loadHome()
    {
        var main_window = document.getElementById('main_window');
        var right_list = document.getElementById('main_list');
        var homePage = '';
        
        main_window.innerHTML = loadingImage;
        loadMainList('All', 'right');
        
        $.ajax({
            type: "POST",
            url: "response.aspx?type=loadhometext",
            data: "",
            success: function(msg)
            {
                main_window.innerHTML = msg;
            }
        });
        
       num_cart_items();
    }
    
    function num_cart_items()
    {
        var cartitems = document.getElementById("cart_items");
        
         $.ajax({
            type: "POST",
            url: "response.aspx?type=getnumitems",
            data: "",
            success: function(msg)
            {
                cartitems.innerHTML = msg;
            }
        });
    }
    
    function loadContact()
    {
        var main_window = document.getElementById('main_window');
        var right_list = document.getElementById('main_list');
        var contactPage = '';
        
        main_window.innerHTML = loadingImage;
        
        contactPage += '<center><h1>Contact Us</h1></center>';
        contactPage += '<table class="form">';
        contactPage += '<tr>';
        contactPage += '<th scope="row">Telephone number</th>';
        contactPage += '<td>(021) 852 1396</td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row">&nbsp;</th>';
        contactPage += '<td>&nbsp;</td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row">Name</th>';
        contactPage += '<td><input type="text" id="txtName" name="name" /></td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row">Surname</th>';
        contactPage += '<td><input type="text" id="txtSurname" name="surname" /></td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row">Email Address</th>';
        contactPage += '<td><input type="text" id="txtEmail" name="email" /></td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row">Order number</th>';
        contactPage += '<td><input type="text" id="txtOrderNum" name="order_num" /></td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row">Message</th>';
        contactPage += '<td><textarea id="txtAddress" name="msg"></textarea></td>';
        contactPage += '</tr>';
        contactPage += '<tr>';
        contactPage += '<th scope="row"></th>';
        contactPage += '<td><input type="button" value="Send" onclick="contact_us_click();" /></td>';
        contactPage += '</tr>';
        contactPage += '</table>';
        contactPage += '<center><p id="result"></p></center>'
        
        main_window.innerHTML = contactPage;
    }
    
    function contact_us_click()
    {
        $.ajax({
	       type: "POST",
	       url: "response.aspx?type=contactus",
	       data: $("input[@name],textarea").serialize(),
	       beforeSend: function()
	       {
	           $("p#result").html(loadingImage.replace('Loading','Sending'));
	       },
	       success: function(msg)
	       {
	           $("p#result").html('<b>Message Sent. Thank you</b>');
	           $("input[@name],textarea").val('');
	       }
	   });
        
    }
    
    
    
    function loadCart()
    {
        var main_window = document.getElementById('main_window');
        var right_list = document.getElementById('main_list');
        var output = '<center><h1>Shopping Cart</h1></center>';
        
        output += '<table width="100%" id="shopping_cart">';
        output += '<tr><th></th><th>Qty</th><th>Title</th><th>Cost</th></tr>';
        
        main_window.innerHTML = loadingImage;
        
        $.ajax({
	       type: "POST",
	       url: "response.aspx?type=getcart",
	       data: "",
	       success: function(msg)
	       {
	            var items = msg.getElementsByTagName('ITEM');
	            var n_items = items.length;
	            var total_items = 0;
	            var total_cost = 0.00;
	            
	            for (var i = 0; i < n_items;i++)
	            {
	                var itemID = items[i].getElementsByTagName('ID')[0].firstChild.nodeValue;
	                var title = items[i].getElementsByTagName('TITLE')[0].firstChild.nodeValue;
	                var qty = items[i].getElementsByTagName('QTY')[0].firstChild.nodeValue;
	                var cost = items[i].getElementsByTagName('COST')[0].firstChild.nodeValue;
	                
	                var int_qty = parseInt(qty);
	                var float_cost = parseFloat(cost);
	                
	                total_items += int_qty;
	                
	                if (qty > 1)
	                {
	                    float_cost *= int_qty;
	                }
	                total_cost += float_cost;
	                
	                output += '<tr>'
	                output += '<td><a href="javascript:;" onclick="removeItem(' + itemID + ');">Remove</a></td>'
	                output += '<td>' + qty + '</td>'
	                output += '<td>' + title + '</td>'
	                output += '<td>R ' + cost + '</td>'
	                output += '<tr>'
	            }
	            
	            if (total_cost > 350)
	            {
	                output += '<tr><td></td><td></td><td align="right"><b>10% Discount</b></td><td>- R ' + addCommas((total_cost*10/100).toFixed(2)) + '</td></tr>';
	                total_cost -= (total_cost*10/100);
	            }
	            
	            output += '<tr><td></td><td></td><td align="right"><b>Total:</b></td><td class="total">R ' + addCommas(total_cost.toFixed(2)) + '</td></tr>';
	            if (int_qty > 0)
	            {
	                output += '<tr><td></td><td></td><td></td><td></td></tr>';
	                output += '<tr><td></td><td></td><td></td><td><a href="javascript:;" onclick="continue_checkout();" id="aCheckOut">Check out</a></td></tr>';
	            }
	            output += '</table>';
	            
	            output += '<table class="form" id="tblForm" style="display:none;">';
                output += '<tr>';
                output += '<th scope="row">Fullname</th>';
                output += '<td><input type="text" id="txtName" onkeyup="monitor(this.id)" name="name" /></td>';
                output += '</tr>';
                output += '<tr>';
                output += '<th scope="row">Contact Number</th>';
                output += '<td><input type="text" id="txtNumber" onkeyup="monitor(this.id)" name="number" /></td>';
                output += '</tr>';
                output += '<tr>';
                output += '<th scope="row">Email Address</th>';
                output += '<td><input type="text" id="txtEmail" onkeyup="monitor(this.id)" name="email" /></td>';
                output += '</tr>';
                output += '<tr>';
                output += '<th scope="row">Physical Address</th>';
                output += '<td><textarea id="txtAddress" onkeyup="monitor(this.id)" name="address"></textarea></td>';
                output += '</tr>';
                output += '<tr>';
                output += '<th scope="row">Payment Method</th>';
                output += '<td style="font-size:12px;"><input type="radio" style="width:20px;" name="method" value="Deposit" checked="true" />Deposit <input value="PostOffice" type="radio" name="method" style="width:20px;" />SA Post Office</td>';
                output += '</tr>';
                output += '<tr>';
                output += '<th scope="row"></th>';
                output += '<td><input type="button" value="Make Purchase" onclick="make_purchase();" /></td>';
                output += '</tr>';
                output += '</table>';
	       
	            document.getElementById('cart_items').innerHTML = total_items;
	            main_window.innerHTML = output;
	       }
	   });
    }
    
    function monitor(id)
    {
        if ($("#" + id).val().length > 0)
        {
            $("#" + id).removeClass('error');
        }
        else
        {
            $("#" + id).addClass('error');
        }
    }
    
    function removeItem(itemID)
    {
        $.ajax({
	       type: "POST",
	       url: "response.aspx?type=removefromcart",
	       data: "item=" + itemID,
	       success: function(msg)
	       {
	           loadCart();
	       }
	   });
    }
    
    function continue_checkout()
    {
        var button = document.getElementById('aCheckOut');
        
        if ($("table.form").is(":hidden")) 
        {
            $("table.form").slideDown("slow");
            button.innerHTML = 'Cancel';
        } 
        else 
        {
            $("table.form").slideUp("slow");
            button.innerHTML = 'Check out';
        }
    }
    
    function make_purchase()
    {
        var name = document.getElementById('txtName').value;
        var number = document.getElementById('txtNumber').value;
        var email = document.getElementById('txtEmail').value;
        var address = document.getElementById('txtAddress').value;
        var cont = true;
        
        if (name.value == '')
        {
            name.className = "error";
            cont = false;
        }
        else
        {
            name.className = "";
        }
        
        if (number.value == '')
        {
            number.className = "error";
            cont = false;
        }
        else
        {
            number.className = "";
        }
        
        if (email.value == '')
        {
            email.className = "error";
            cont = false;
        }
        else
        {
            email.className = "";
        }
        
        if (address.value == '')
        {
            address.className = "error";
            cont = false;
        }
        else
        {
            address.className = "";
        }
        
        if (cont)
        {
            var sure = confirm('Are you sure you want to purchase the list above and all details are correct?');
            
            if (sure)
            {
                var params = $("input[@name],textarea").serialize().replace('&method=Deposit&method=PostOffice','') + "&method=" + $(":radio[@checked]").val();
                
                $.ajax({
                    type: "POST",
                    url: "response.aspx?type=purchase",
                    data: params,
                    success: function(msg)
                    {
                        var client_email = "<div>"
                        client_email += "Hi " + name + "<br /><br />";
                        client_email += "Thank you for making use of 35052.co.za. Please follow the steps outlined in the email we have sent you to complete payment.<br /><br />";
                        client_email += "<b><u>Banking Details</u></b><br />";

                        if ($(":radio[@checked]").val() == "PostOffice")
                        {
                            client_email += "You can pay the amount at any SA post office<br /><br />";
                            client_email += "Account Name: LIFESTYLE PROJECTS<br />";
                            client_email += "Account Number: 00058204834<br />";
                            client_email += "Book Number: 3559066<br /><br />";

                            client_email += "Fax or email us the deposit slip/proof or payment to 0880 21 852 1388 or deposit@35052.co.za.  On the deposit slip, please write your order number (" + msg + "), your initials and surname on the deposit slip next to reference.<br /><br />";
                            
                        }
                        else
                        {
                            client_email += "You can pay the amount at Standard Bank or via EFT<br /><br />";
                            client_email += "Account Name: LIFESTYLE PROJECTS<br />";
                            client_email += "Account Number: 200126989<br />";
                            client_email += "Branch: NORTHCLIFF<br />";
                            client_email += "Branch Code: 006-305<br /><br />";
                            client_email += "Fax or email us the deposit slip/proof or payment to 0880 21 852 1388 or deposit@35052.co.za.  On the deposit slip, please write your order number (" + msg + "), your initials and surname on the deposit slip next to reference.<br /><br />";
                            client_email += "<a href='http://www.absa.co.za/' target='_blank'><img border='0' src='/images/banks/absa.jpg' /></a>";
                            client_email += "<a href='http://www.fnb.co.za/' target='_blank'><img border='0' src='/images/banks/fnb.jpg' /></a>";
                            client_email += "<a href='http://www.nedbank.co.za/' target='_blank'><img border='0' src='/images/banks/nedbank.jpg' /></a>";
                            client_email += "<a href='http://www.standardbank.co.za/' target='_blank'><img border='0' src='/images/banks/standard.jpg' /></a>";
                            
                        }
                        client_email += "</div>";
                        
                        $("div#main_window").html(client_email);
                        
                        num_cart_items();
                    } 
                });
            }
        }
        else
        {
            //alert('All fields a required. Please fill in marked fields');
        }
        
    }
    
    function addCommas(nStr)
    {
	    nStr += '';
	    x = nStr.split('.');
	    x1 = x[0];
	    x2 = x.length > 1 ? '.' + x[1] : '';
	    var rgx = /(\d+)(\d{3})/;
	    while (rgx.test(x1)) {
		    x1 = x1.replace(rgx, '$1' + ',' + '$2');
	    }
	    return x1 + x2;
    }
    
    function search_click(id)
    {
        var term = document.getElementById(id).value;
        var search_term = 'SEARCH:' + term;
        
        loadMainList(search_term, "Both");
    }
    
    function exec_search(e)
    {
        if (e == 13)
        {
            search_click('txtSearch');
        }
    }
    
    function loadMainList(cat, side)
    {
        if (side == "right" || side == "Both")
	    {
            $("div#main_list").html(loadingImage);
        
            //alert(cat);
            if (cat.indexOf('SEARCH:') == -1 && cat.indexOf('FILTER:') == -1)
            {
                load_top_list(cat);
            }

            if (cat == "All") 
            {
                cat = "FILTER:A";
            }
            
        
            $.ajax({
	           type: "POST",
	           url: "response.aspx?type=homeartistlist",
	           data: "Cat="+cat,
	           success: function(msg)
	           {
	                var output = "";
	                var artists = msg.getElementsByTagName('ARTIST');
	                
	                for (var i = 0;i < artists.length; i++)
	                {
	                    
	                    var artist_name = artists[i].getElementsByTagName('NAME')[0].firstChild.nodeValue;
	                    var albums = artists[i].getElementsByTagName('ALBUMS')[0].getElementsByTagName('ALBUM');
	                    
	                    output += '<div class="artist_container">'
	                    output += '<a class="openartist" href="javascript:;">' + artist_name + '</a>';
	                    output += '<ul class="artist_albums" style="display:none;">';
	                    
	                    for (var x = 0;x < albums.length;x++)
	                    {
	                        var album_id = albums[x].getAttribute("id");
	                        var album_title = albums[x].getElementsByTagName('ALBUM_NAME')[0].firstChild.nodeValue;
	                        var album_desc = '';
	                        var album_price = albums[x].getElementsByTagName('ALBUM_PRICE')[0].firstChild.nodeValue;
	                        var album_cover = albums[x].getElementsByTagName('ALBUM_COVER')[0].firstChild.nodeValue;
	                        
	                        if (albums[x].getElementsByTagName('ALBUM_DESC')[0].firstChild != null)
	                        {
	                            album_desc=albums[x].getElementsByTagName('ALBUM_DESC')[0].firstChild.nodeValue;
	                        }
	                        
	                        output += '<li>';
	                        
	                        output += '<table width="250px;" cellpadding="0" callspacing="0">';
	                        output += '<tr>';
	                        output += '<td width="65px" align="left">';
	                        output += '<a href="javascript:;" class="viewalbum" onclick="viewDisc(' + album_id + ')">';
	                        output += '<img style="padding-bottom:5px;" src="" border="0" id="imgCover" />';
	                        output += '<input type="hidden" value="/thumbnail.ashx?w=60&h=&path=' + album_cover + '" id="hdnCover" />';
	                        output += '</a>';
	                        output += '</td>';
	                        output += '<td valign="top" align="left">';
	                        output += '<a href="javascript:;" class="viewalbum" onclick="viewDisc(' + album_id + ')">' + album_title + '</a><br />';
	                        output += '<small>' + album_desc + '</small><br />';
	                        output += '<a href="javascript:;" onclick="addToCart(' + album_id + ')" style="float:right">Add to cart</a>';
	                        output += '<span>R ' + album_price + '</span>';
	                        output += '</td>';
	                        output += '</tr>';
	                        output += '</table>';
	                        
	                        
	                        
	                        output += '</li>';
	                    }
	                    
	                    output += "</ul>";
	                    output += '</div>'
	                }
	                
    	            $("div#main_list").html(output);
    	            $('a.openartist').bind('click', toggleContent);
	           }
	       });
	   }
    }
    
    function addToCart(id)
    {
        var loading = document.getElementById('cart_loading');
        loading.innerHTML = '<center><img src="images/loading.gif" /></center>';
        
        $.ajax({
	       type: "POST",
	       url: "response.aspx?type=addtocart",
	       data: "item="+id,
	       success: function(msg)
	       {
	            if (document.getElementById('shopping_cart') != null)
	            {
	                loadCart();
	            }
	            else
	            {
	                document.getElementById('cart_items').innerHTML = msg;
	            }
	            loading.innerHTML = '';
	       }
	   });
    }
    
    function viewDisc(album_id)
    {
        var returnInner = '';
        
        document.getElementById('main_window').innerHTML = loadingImage;
        //alert('desc');
        $.ajax({
	       type: "POST",
	       url: "response.aspx?type=discinfo",
	       data: "item="+album_id,
	       success: function(msg)
	       {
	       //alert('desc');
	            var disc_nodes = msg.getElementsByTagName('DISC');
	            var id = disc_nodes[0].getElementsByTagName('ID')[0].firstChild.nodeValue;
	            var artist_name = disc_nodes[0].getElementsByTagName('ARTIST_NAME')[0].firstChild.nodeValue;
                var album_name = disc_nodes[0].getElementsByTagName('NAME')[0].firstChild.nodeValue;
                var desc = '';
                var price = disc_nodes[0].getElementsByTagName('PRICE')[0].firstChild.nodeValue;
                var cover = disc_nodes[0].getElementsByTagName('IMAGE')[0].firstChild.nodeValue;
                var tracks = disc_nodes[0].getElementsByTagName('TRACKS')[0].childNodes;
                
                
                if (disc_nodes[0].getElementsByTagName('DESC')[0].firstChild != null)
                {
                    desc = disc_nodes[0].getElementsByTagName('DESC')[0].firstChild.nodeValue;
                }
                
	            returnInner = '<div class="disc_info" style="border:0;">';
	            returnInner += '<a href="covers/'+ cover +'" target="_blank" class="lightbox">';
                returnInner += '<img src="thumbnail.ashx?w=110&h=&path=' + cover + '" border="0" />';
                returnInner += '</a>';
                returnInner += '<div style="display:table;width:255px">';
                returnInner += '<small style="float:right;">Artist - ' + artist_name + '</small>';
                returnInner += '<h1>' + album_name + '</h1>';
                returnInner += '<p>' + desc + '</p>';
                
                returnInner += '<p><br /><strong><u>Tracks</u></strong><br />';
                returnInner += '<ol>';
                
                for (var i = 0; i < tracks.length; i++)
                {
                    returnInner +=  '<li class="track" id="li_' + tracks[i].attributes[0].value + '">' + tracks[i].firstChild.nodeValue + '</li>';
                }
                
                if (tracks.length < 1)
                {
                    returnInner += '<li>None specified</li>';
                }
                
                returnInner += '</ol>';
                
                returnInner += '</p>';
                returnInner += '<br /><a href="javascript:;" onclick="addToCart(' + id + ');" class="addcart">Add To Cart</a>';
                returnInner += '<span>R ' + price + '</span>';
                returnInner += '</div>';
                returnInner += '</div>';
                
                document.getElementById('main_window').innerHTML = returnInner;
                
                $('a.lightbox').lightBox();
                
                if (loggedInUsername == 'admin')
                {
                    $('li.track').editInPlace({
                        url: "response.aspx?type=savetrack"
                    });
                }
	       }
	   });
	   
	   //$.scrollTo('div#main_window', 800, {easing:'elasout'});
	   window.location.href='#';
    }
    
    function load_top_list(cat)
    {
        $.ajax({
	       type: "POST",
	       url: "response.aspx?type=toplist",
	       data: "Cat="+cat,
	       beforeSend: function()
	       {
	            $("ul.top_list").html("<li style='list-style-type:none;'>" + loadingImage + "</li>");
	       },
	       success: function(msg)
	       {
                var disc_nodes = msg.getElementsByTagName('DISC');
                var n_discs = disc_nodes.length;
                var top_ul = '';
                
                //alert(side);
                for (i = 0;i < n_discs;i++)
                {
                    var album_id = disc_nodes[i].getElementsByTagName('ID')[0].firstChild.nodeValue;
                    var album_name = disc_nodes[i].getElementsByTagName('NAME')[0].firstChild.nodeValue;
                    
                    top_ul += '<li><a href="javascript:;" onclick="viewDisc(' + album_id + ');">'+ album_name +'</a></li>';
  
                }
                
                $("ul.top_list").html(top_ul);
	       }
	   });
    }
    
var toggleContent = function(e)
{
 var targetContent = $('ul.artist_albums');
 targetContent.slideUp(300);


 var targetContent = $('ul.artist_albums', this.parentNode);
 if (targetContent.css('display') == 'none') {
 targetContent.slideDown(300);
 
 //$(this).next().find("img").attr("src", $(this).next().find("img").next().val());

var images = $(this).next().find("img");
var hiddens = $(this).next().find("img").next();

for (var i = 0; i < images.length; i++)
{
    images[i].src = hiddens[i].value;
}

 } else {
 targetContent.slideUp(300);
 }
 return false;
};